30 Mayıs 2016 Pazartesi

Yıldızlı Popüler Yazılar Eklentisi

14 yorum
Blogger’ın gadgetlar listesinde bulunan “Popüler Yayınlar” eklentisini çoğu blogger kullanıyor. Bu eklenti; son 1 ay, son 1 hafta veya tüm zamanların en çok okunan yazılarını gösteren faydalı bir eklenti.

Blogger’ın çoğu gadgetı gibi popüler yayınlar gadgetını da özelleştirme şansımız var. Bu yazıda paylaşacağım kodlar ile popüler yazılar eklentisine ziyaretçilerin ilgisini çekecek ve blogunuzu daha orijinal gösterecek yıldızlı oylama sistemini ekleyeceğiz.

Yıldızlı Popüler Yazılar Eklentisi


Bu özellik en popüler yazınızı 5 yıldızlı olarak gösterirken , sırasıyla 4,5 – 4 – 3,5 – 3… yıldız diye gidiyor. Uygulamak için sırasıyla şu adımları izleyin:

1. İlk olarak şablonda <head> kodunu bulun ve bunun altına font awesome kodunu ekleyin. Eğer daha önce font awesome kodunu eklediyseniz tekrar eklemenize gerek yok.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

2. Şablonda ]]></b:skin> kodunu bulun ve üzerine şu stil kodlarını ekleyin.

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

3. 3. Son olarak Yerleşim > Gadget Ekle > Popüler Yayınlar diyerek gadgetı ekleyin ve ayarları resimde görüldüğü gibi yapın.

Popüler yayınlar

14 yorum:

  1. Teşekkürler şimdi yaptım. Ve çok güzel oldu. Emeğinize sağlık.

    YanıtlaSil
  2. Serdar abi bloğuma uyguladım çok hoş görünüyor, paylaşım için teşekkürler :) Verdiğin kod ilk başta popüler yayınlarımdaki yayın resimlerinin görüntüsünü bozmuştu, yükseklik ve genişlik sorunu yaşayan arkadaşlar verdiğin kodlardan width:60px; height:60px; kısımlarını width:auto;height:auto; olarak değiştirirlerse sorun kalmıyor.

    YanıtlaSil
  3. Güzel ve kullanışlı bir eklenti her blogunda kullanıyorum

    YanıtlaSil
  4. güzel bir paylaşım hocam. sağolun bizlei bilgilendirdiğiniz içim.

    YanıtlaSil
  5. Hocam Blogunuzu takip ediyorum.Her zamanki gibi güzel bir konu.Blogum hakkında tavsiyenizi yazarsanız sevinirim.
    minecraftkilavuzum.blogspot.com.tr
    Şimdiden teşekkürler hocam.

    YanıtlaSil
  6. Ellerine sağlık Serdar hocam. Kurstayım yazınızı daha yeni inceledim eve gittiğimde deneyeceğim :)

    YanıtlaSil
  7. Teşekkürler. Ben de yaptım bunu şimdi. Elinize sağlık.

    1haritaci.blogspot.com.tr

    YanıtlaSil
  8. Merhabalar.
    Güzel bir eklenti. Emeğinize ve yüreğinize sağlık ve mutluluklar dilerim.
    Selam ve dualarımla.

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

    YanıtlaSil
  10. Blogger'da site kullanmak yani siteadi.com gibi bir alan adı bağlamak seo ve ya hit açısından zararlı mı?. Bununla ilgili bir makale yayınlar mısınız?

    YanıtlaSil
  11. Emeğine sağlık.Bloguma uyguladım

    www.yaziyorumyazdim.com

    YanıtlaSil
  12. Beğendim bu kodu ve uyguladım..teşekkürler

    YanıtlaSil

Picardes

LİNKLER