Yıldızlı Popüler Yazılar Eklentisi ile yazıları değerlendirin

blogger-popüler-yazıları-yıldızla-değerlendirin
Popüler Yazılar Eklentisi

Blogger popüler yazılar eklentisi, Yıldızlı popüler yazılar kodu, Yazıları yıldızlar ile değerlendirin

  Blog sayfanızda kullanmanız gereken ve Seo açısından destek olan bazı kodlar vardır. Benzer yazılar, sosyal medya butonları ve popüler yazılar gibi eklentiler ile ziyaretçilerinizi daha uzun süre blog sayfanızda tutabilir ve profesyonel görüntü kazanabilirsiniz. Bugün vereceğim kod ile popüler yazılar eklentisini farklı bir hale getireceğiz. Böylece daha dikkat çekici ve mobil uyumlu eklenti ile faydalı bir iş yapmış olacaksınız. Nasıl yapacağınıza gelecek olursak çok basit olduğunu göreceksiniz. Öncelikle <Head> kodunu temanız da bulduktan sonra hemen altına font awesome kodunu ekleyin. Eğer daha çok başka bir kod nedeniyle eklediyseniz bu kodu eklemenize gerek yok.


<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
 Devamında tema şablonunuzda ]]></b:skin> kodunu bulun ve aşağıdaki değişiklik kodunu hemen üzerine 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}
  Bu kodu çalıştırabilmeniz için Gadget Ekle bölümünde hazır bulunan "popüler yazılar" eklentisini eklemiş olmalısınız. Popüler Yazılar eklentisi ayarlarını "Son 30 gün" ve "Küçük Resim" seçili olarak kaydedin. İsterseniz bir hafta veya bir yıl boyunca seçeneklerini seçerek yazıları paylaşabilirsiniz. Artık yazıları yıldızla değerlendirilmiş olarak kullanabilirsiniz. 

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

YAZIYI PAYLAŞ

BENZER YAZILAR

SONRAKİ
« Prev Post
ÖNCEKİ
Next Post »

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.