Animasyonlu Popüler Yazılar Eklentisi

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

  "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 yazı Doğuş Hakan Yılmaz - Seo Teknikleri ve Blog İpuçları tarafından yazılmıştır.

YAZIYI PAYLAŞ

BENZER YAZILAR

SONRAKİ
« Prev Post
ÖNCEKİ
Next Post »

8 yorum

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

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 delete Bu yorum yazar tarafından silindi.
avatar
14 Haziran 2017 14:03 delete

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 delete

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 delete

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österiniz.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat ediniz.
3) Kullandığınız üslubun sizi yansıttığını unutmayınız. EmoticonEmoticon