Seo Teknikleri ve Blog İpuçları

Animasyonlu Popüler Yazılar Eklentisi

Share:
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 ⤵

8 yorum:

  1. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  2. 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.

    YanıtlaSil
  3. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  4. 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

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

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

      Sil

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.

Seo ve Blog ipuçlarını alarak daha fazla ziyaretçi ve en yüksek verimi hedefleyin.