Blogger İçin Yıldız Sıralamalı Popüler Yayınlar Widget'ı





,
Rate this posting: 
{[['<img src="http://static.graddit.com/img/star_blue.png"/>']]}

Bloglarda kesinlikle kullanılması gereken widget'lardan birisi de popüler yayınlar widget'ıdır. Çeşitli bloglarda bununla ilgili birçok yazı görmüş olabilirsiniz. Fakat benim sizlere sunmuş olduğum widget, fazla yer kaplamaz ve sade güzellikte bir görüntüsü vardır. Yıldız sıralaması ile çok hoş duran bu popüler yayınlar widget'ının nasıl göründüğünü görmek istiyorsanız aşağıdaki "Önizleme" butonuna tıklayabilirsiniz.

[##eye## Önizleme]

Önizleme butonuna tıklayıp widget'a göz attıysanız, Blogger'a eklemek için yapmanız gerekenlerden bahsedeyim. Adımları doğru bir şekilde uyguladıktan sonra kendi blogunuzda bu popüler yayınlar widget'ını görüntüleyebilirsinz.

Nasıl Yapılır?

[accordion]

Adım 1

Blogger Kontrol Paneli'nde sol tarafta bulunan Şablon > HTML'yi Düzenle seçeneklerine tıklayınız.

Adım 2

Kodların bulunduğu alana bir kez tıkladıktan sonra klavyeden Ctrl+F tuşlarına tıklayınız ve gelen arama ekranına </head> yazıp Enter tuşuna tıklayınız.

Adım 3

</head> kodunun bir üst satırına aşağıda bulunan FontAwesome kodunu yapıştırınız.

Adım 4

Tekrardan kodların bulunduğu alana tıklayıp Ctrl+F tuşuna tıklayınız ve gelen arama ekranına ]]></b:skin> yazıp Enter tuşuna tıklayınız.

Adım 5

]]></b:skin> kodunun bir üst satırına aşağıda bulunan CSS Kodunu yapıştırınız ve son olarak Şablonu Kaydet seçeneğine tıklayınız.

Adım 6

Blogger Kontrol Paneli'nde sol tarafta bulunan Yerleşim seçeneğine tıklayınız ve popüler yayınlar widget'ını eklemek istediğiniz yere tıklayınız. Popüler Yayınlar widget'ını seçiniz ve seçeneklerin aşağıdaki gibi olmasına dikkat ettikten sonra Kaydet seçeneğine tıklayınız.

Popüler Yayınlar Widget'ı

FontAwesome Kodu

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

[message]

##warning## Uyarı

Eğer blogunuzda FontAwesome kodları kullanıyorsanız, ilk üç adımı es geçebilirsiniz.

CSS Kodu

[.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{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}]

Böylece popüler yayınlar widget'ını başarılı bir şekilde kullanabilirsiniz. Yapamadığınız ve anlamadığınız durumlarda bana ulaşabilirsiniz. Elimden geldiğince yardımcı olurum.

Peki sizlerin popüler yayınlar widget'ı hakkındaki düşünceleriniz nelerdir?