Blogger alt bilgi yatay renkli popüler yayınlar eklentisi

Blogger  sidebar da kullandığınız renkli dikey Popüler yayınlar gadget eklentimizden sonra şimdi de, footer alt bilgi kısmında sol baştan sağa doğru yatay olarak sıralanmış her penceresi ayrı renk ve numara sıralı popüler yayınlar eklentisi. Blogger’un varsayılan sade Popüler yayınlar gadget eklentisini, blog ana sayfanızda alt bilgiler olarak bilinen (footer) bölümün de farklı renklerden oluşan pencereler ile numaralı başlangıç ve bitiş sırasına göre yatay gösteren Linkwithin ve Nrelate  gibi benzer yazılar görünümünde bir eklentidir. Eklentinin alt bilgi (footer) bölümün de  nasıl görüldüğünü yukarıda ve aşağıdaki resimden görebiliyorsunuz. Ayrıca eklentinin nasıl görüldüğünü test blog’umdan CANLI inceleyin.
Footer Popüler yayınlar Linkwithin ve Nrelate benzeri görünüm.
Blogger gadget'leriniz arasında yer alan Popüler yayınlar eklentisi ana sayfada 10 ad.’e kadar en çok izlenen yayınlarınızı gösterebilmektedir. Göstermek istediğiniz Popüler yayınlar sayısı ne olursa olsun ana sayfanızda görülen her yayın link penceresini aşağıdaki kodları kullandığınızda ayrı bir renk ile görürsünüz. Farklı renklerden oluşan en çok izlenen yazılarınız blog temanıza değişik bir görünüm vererek okuyucularınızın ilgisini çeker.
Eklentinin farklı özelliklerinden biride sağ tarafta kaç adet yayın görüldüğünü gösteren rakamlardan oluşmaktadır.
Aşağıda verilen renkli yatay görünümlü Popüler yayınlar CSS kodunu kopyalayın.
/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  width:810px;
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
  overflow:hidden;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  padding:6px 6px;
  counter-increment:num;
  position:relative;
  float:left;
  width:150px;
  height:100px;
  -webkit-box-shadow:-1px -1px 10px rgba(0,0,0,.7);
  -moz-box-shadow:-1px -1px 10px rgba(0,0,0,.7);
  box-shadow:-1px -1px 10px rgba(0,0,0,.7);
}

.PopularPosts ul li .item-snippet {display:none}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:100%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  right:0;
  bottom:0;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27}
.PopularPosts ul li:nth-child(5) {background-color:#149A48}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1}
.PopularPosts ul li:nth-child(7) {background-color:#61469C}
.PopularPosts ul li:nth-child(8) {background-color:#863E86}
.PopularPosts ul li:nth-child(9) {background-color:#863E62}
.PopularPosts ul li:nth-child(10) {background-color:#815540}
Renkli Popüler yayınlar CSS kod’unu eklemek için ilgili adımlar :
1. Blogger kumanda paneline giriş yapın.
2. ŞablonÖzelleştirGelişmiş CSS ekle penceresini açarak biraz önce kopyaladığınız kodları pencereye yapıştırın. Şu ( } ) işaretten sonra enterleyin ve blog'unuzu kaydedin. Renkli Popüler yayınlar gadget'ini incelemek için blog ana sayfanıza dönün.
Ayrıca, etiketlerininizi çerçeve içinde gösteren eklentiyi de inceleyebilirsiniz.