Yıldız Değerlendirmeli Popüler Yayınlar Eklentisi

Şubat 12, 2016
blogger-popular-yayinlar-yildizli


Blogger bloglarımıza eklediğimiz popüler yayınlar widgetının daha şık görünmesi için bir takım modifiyeler yapmıştık, şimdi bir farklı tarz daha deneyeceğiz, isteyen bunu da uygulayabilir.

Daha önceki paylaştığım popüler yayınlar modifiyeleri aşağıdakiler. (İsterseniz bir göz atın onlara da).

  1. Popüler Yayınlar Modifiyesi
  2. Yeni Popüler Yayınlar Gadgetimiz
Şimdi yeni eklentimiz hakkında konuşalım. Bu popüler yayınlar düzenlemesini halihazırda benim bloğumda görmeniz mümkün. (Bkz:sağ tarafta)
O hafta veya ay en çok tıklanan yazınız hangisiyse otomatik olarak o yazıya beş yıldız veriyor. İkinciye dört, üç, iki diye gidiyor. Yıldız değerlendirmesi oluyor ya onun gibi birşey.

Buradaki amaç popüler yayınlarımızın biraz daha şık durması ve dikkat çekmesidir.

Şimdi anlatıma geçelim.
1. Blogger giriş.
2. Şablon
3. HTML'yi Düzenle
4. Açılan kodlar üzerine tıkla CTRL F tuşlarına bas arama kutusuna </head> yaz ve bul.
5. Bu kodun alt satırına aşağıdaki kodları ekle. 

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

6.Şimdi ]]></b:skin> kodunu bulun ve üst satırına aşağıdaki kodları ekleyin.


/* Popular Post */
.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 dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;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:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.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}

7. Şablonu kaydedin.

İşlem bu kadar basit. Bir de bu eklentinin yıldızlarıyla ilgili farklı yorumları var. Onları da denemek isterseniz bunun yerine aşağıdaki herhangi birini ekleyebilirsiniz. Aynı CSS kodlarını defalarca eklemeyin he ya yukarıdakini ekleyin yada aşağıdakilerden birini :)

Stil 2
/* Popular Post */
.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 dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;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\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.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}

Stil 3
/* Popular Post */
.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 dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;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';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
.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}

Arkadaşlar destek olmak için bloğumu izleyin ve lütfen yorumlarınızla güzellik katın. İyi bloglamalar :)

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

10 Yorum
avatar

Hocam yıldızlar gerçekten dikkat çekici olmuş. Güzelmiş ben beğendim teşekkürler anlatım için.

Yanıtla
avatar

Servis olarak güzel ama by yıldızlar arama sonuçlarında gösteriliyor mu?

Yanıtla
avatar

Çok açıklayıcı olmuş emeklerinize sağlık ....

Yanıtla
avatar

Hocam, uzun zamandır yayın yapmıyorsunuz. Bir sorun mu var acaba? Bu arada bugün bayram günü; bayramınız kutlu olsun.

Yanıtla
Bu yorum yazar tarafından silindi. - Hapus
Bu yorum yazar tarafından silindi. - Hapus
avatar

Merhabalar;

Bloğunuzun "Blogger Gazetemiz"de tanıtılmasını isterseniz, alttaki linkten detaylı bilgiye ulaşabilirsiniz. Sevgiler,

http://www.hikayekalplikadin.com/2016/12/blogger-gazetemizde-yerinizi-alin.html

Yanıtla
avatar

https://teknoowin.blogspot.com.tr/

Yanıtla
avatar

eklenti güzel paylaşım için teşekkür ederim.

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔