Animasyonlu Popüler Yazılar Eklentisi

Animasyonlu-popüler-yazılar-eklentisi
Popüler Yazılar Eklentisi

Popüler yazılar eklentisi ne işe yarar? Popüler yazılar için kod gerekir mi? Çok okunan yazılar eklentisi nasıl eklenir?
  "Popüler yazılar", hem seo açısından hem de blog sayfanızı tamamlayacak en önemli eklentilerden biridir. Hemen çıkma oranını yani sitede geçirilen süreyi de olumlu yönde etkiler. Tüm zamanlar, aylık veya haftalık şekilde popüler olan yazıların listelenmesi her zaman faydanıza olacaktır. Ziyaretçileriniz ilgili olduğu yazınızı okumaya geldiğinde diğer kategorilerdeki yazıları da görerek ziyaret edebilir. Blogger için hazır eklentiyi de kullanabilirsiniz ama vereceğim kodlar ile daha şık ve kullanışlı bir görünüme de sahip olabilirsiniz. Yapmanız gereken popüler yazıları eklemek ve aşağıda verdiğim kod ile animasyonlu hale getirmek olacak. Güzel bir tasarım ve kolay kurulum ile animasyonlu popüler yazılar için Tema - Html'yi Düzenle üzerinden Ctrl+F tuşlarını kullanarak ]]></b:skin> kodunu aratın ve hemen bir üst satırına aşağıdaki kodları yapıştırın ve kaydedin.


.sidebar .PopularPosts .item-content {font-family:Raleway;position: relative;float: left;max-height: 310px;width: 100%;text-align: center;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);font-size: 20px;margin: 0px auto;background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");overflow: hidden;background-size: cover;background-repeat: no-repeat;background-position: center center;} .sidebar .PopularPosts .item-content * {-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;} .item-content img {max-width: 100%;position: relative;top: 0;left: 0;} .item-content .item-title {position: absolute;top: 50%;left: 30px;right: 30px;line-height: 1.6em;-webkit-transform: rotate(0deg) translateY(-50%) scale(1);transform: rotate(0deg) translateY(-50%) scale(1);-webkit-transform-origin: center 0;transform-origin: center 0;} .item-content .item-title a {top: 50%;letter-spacing: -1px;color: #ffffff;text-transform: uppercase;padding: 10px 0;margin: 0;font-weight: 400;} .item-content .item-title a:hover {color: #fff;} .item-content .item-title:before,.item-content .item-title:after {background-color: rgba(255, 255, 255, 0.8);width: 100%;height: 2px;position: absolute;content: "";display: block;-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;} .item-content .item-title:before {left: 0;top: 0;} .item-content .item-title:after {bottom: 0;right: 0;} .item-content:hover .item-title,.item-content.hover .item-title {-webkit-transform: rotate(-45deg) translateY(-50%) scale(0.9);transform: rotate(-29deg) translateY(-50%) scale(0.9);} .item-content:hover .item-title:before,.item-content.hover .item-title:before,.item-content:hover .item-title:after,.item-content.hover .item-title:after {width: 200%;} .sidebar .widget{clear:both} .sidebar .PopularPosts .item-snippet {display: none;} .sidebar .PopularPosts ul {padding: 0;} .sidebar .PopularPosts ul li:first-child {width: 100%;max-height: 100%;opacity: 0.9;} .sidebar .PopularPosts ul li:nth-child(even) {margin-right: 2%;} .sidebar .PopularPosts ul li:nth-child(2) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(3) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(4) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(5) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(6) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(7) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(8) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(9) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(10) .item-content {font-size: 12px} .sidebar .PopularPosts ul li {box-sizing: border-box;position: relative;padding: 0px !important;width: 49%;max-height: 120px;opacity: 0.4;overflow: hidden;float: left;margin-bottom: 2%;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;} .sidebar .PopularPosts ul li:hover {opacity: 1;} .sidebar .PopularPosts .item-thumbnail {margin: 0;width: 100%;} .sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height: 123px;object-fit: cover;padding: 0; }
  Yukarıdaki kodu ekledikten sonra Gadget ekle üzerinden popüler yazılar eklentisi ekleyin. Ayarlarını yaparken küçük resim seçeneğinin seçili olduğuna emin olun. Düzenlemeler bittiğinde mause eklenti üzerine geldiğinde yazılar sola doğru eğilecek ve görüntü netleşecek. Aynı şekilde mause yazı üzerindeyken daha soluk aynı alanda resime doğru kaydırıldığında daha net olacak.


✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

YAZIYI PAYLAŞ

BENZER YAZILAR

SONRAKİ
« Prev Post
ÖNCEKİ
Next Post »

8 yorum

yorum YAZ
14 Haziran 2017 13:46 Bu yorum yazar tarafından silindi.
avatar
14 Haziran 2017 13:47

Sizce çok kolay olabilir bu sorduğum soru :) ama yaklaşık bir yıldır blog yazarıyım şu kodu bulamıyorum bi türlü bende çıkmıyor yardım edermisiniz.

Cevap Ver
avatar
14 Haziran 2017 13:48 Bu yorum yazar tarafından silindi.
avatar
14 Haziran 2017 14:03

Evet galiba buldum blog yazmaya bir yıl ara vermiştim unutmuşum biraz. Yeni temam ile alakalı başka bir sorunum var o sorunum için yardımıza ihtiyacım var yardımcı olursanız çok sevinirim.Teşekkürler

Cevap Ver
avatar
14 Haziran 2017 15:21

Elimdrn geldiği kadar yardımcı olurum tabi..ilatişim bölümünden de yazabilirsin..görüşmek üzere

Cevap Ver
avatar
14 Haziran 2017 16:00

Teşekkürler konuyo toparlıyıp dönüş yapıcam

Cevap Ver
avatar

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.
5) Yorumunuza ikon eklemek için "Emoticon" butonuna tıklayın.
6) EmoticonEmoticon