Blogger Popüler Yayınlar Widgetini Özelleştirmek

12:12 | 0 yorum


Popüler konularınızı ziyaretçilerinizin dikkatini çekmek için daha belirgin bir hale getirebilirsiniz. CSS kodları ile Popüper Yayınlar Widgetini değiştirebilirsiniz. Birçok blog yazarının kullandığını gördüğüm popüler yayınları widgetini artık değiştirmenin vakti gelmişti diye düşünüyorum.

Eğer blogunuzda "Popüer Yayınlar" widget yok ise;

Blogger > Yerşelim > Gadget Ekle > Popüler Yayınlar Widgetini seçin


Yukarıda bulunan

  • En çok görüntülenen 3 seçenekten istediğiniz birini tercih edebilirsiniz. 
  • Göster kısmında kaç tane popüler yayının gösterilmesini istediğiniz sayıyı seçmelisiniz 1'den 10'a kadar tercih mevcut. İdeal olanı 5tir. Böylece blogunuzda ilk girişlerde bir "geç görüntülenme" olayı meydana gelmemiş olur. 

Widgeti ekledikten sonra CSS kodları ile özelleştirelim

Blogger Kumanda Paneli > Şablon > CTRL + F yardımı ile ]]></b:skin> kodunu bulun. Hemen üzerine gelecek şekilde aşağıdaki kodu ekleyin.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCgKbusDVqjmFNVhRSFvEunTsWJmYJMsDX8Qpj4fT45f0t4Apb3vuKqYT1LOB3aQ9Hv5URKgthomhyphenhyphenaeQrvpkj-w7rRzHNhsx4Tz6m_2TlYgm0U5icwvN0qpwPuJod2GOlariEarIoGS8/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

Kodu ekledikten sonra ŞABLONU kaydedip çıkın. Herhangi bir sorun olursa yorum kısmından iletebilirsiniz.

Kategori: , , , ,

0 yorum