Blogger Popüler Yayınlar Eklentisini Numaralandırma Eklentisi

   CSS3 otomatik artış özelliğini kullanarak popüler yayınlar listesini otomatik numaralandırma eklentisini görüntülemeyi göreceğiz.Numaralara kare/dikdörtgen veya yuvarlak gibi değişik şekillerde stiller uygulayabilirsiniz.Blogger için bu efekti oldukça kolay adımda JavaScript kullanmayı gerektirmeden Saf stilleri kullanarak eklemenizi sağlar.Popüler yayınlar eklentisi blog sayfası görüntülenme sayısını arttıran ve blogunuza daha fazla okuyucu kazandıran etkili bir araçtır. Google analytics verilerini kullanarak en çok ziyaret edilen sayfalar temel alınarak yayınları sırayla gösterir.Bu işlemi Blogger sitenize uygulamak için öncelikle aşağıda ki anlatımı ve yapılanları sırası ile yapın.

Popüler yayınlar Widget'ini ekleme:

1. Kumanda paneli > Yerleşim > Gadget ekle > Popüler yayınlar sıralamasını takip ederek sitenize ekleyin.Eğer sitenizde popüler yayınlar eklentisi varsa tekrar eklemenize gerek yok.

2. Altta ki resimde gördüğünüz gibi ayarlarınızı yapın.Ayrıca görüntüleme sınırı kısmında ki yayın sayısını 5 yapın.

Popüler Yayın Eklentisini Özelleştirme:

Şimdi Blogger'in bize sunduğu Popüler yayınlar eklentisini kendimize göre özelleştirmek için yapacak olduğumuz küçük bir işlem ile bunu yapabileceğiz.Böylece kullanmış oldunuz temaya göre ve sitenizi ziyaret eden kişilerin dikkatini çekmiş olacaksınız.


Blogger kumanda paneline girin.Ardından Şablon'a tıklayın
Daha sonra her ihtimale karşı şablon yedeğinizi alın ve ardından HTML Düzenle'ye tıklayın.
CTRL+F kısayol tuşları ile kodu aradın bulun ve kodu genişletmek için altta ki resimde ki kırmızı işaretli yere tıklayın.

 ]]></b:skin>

Daha sonra yukarıda ki bulduğunuz kodun hemen üst kısmına aşağıda ki stil kodlarını ekleyerek şablonu kaydedin.

 .popular-posts ul{padding-left:0;counter-reset:popcount;}
.popular-posts ul li:before{background:#292D30;color:#fff;box-shadow:1px 2px 9px #666;float:left;list-style-type:none;margin-right:15px;counter-increment:popcount;content:counter(popcount);font-size:16px;position:relative;font-weight:700;font-family:georgia;border:2px solid #ddd;padding:.3em .6em;}
.popular-posts ul li{border-bottom:1px dashed #ddd;}
.popular-posts ul li:hover{border-bottom:1px dashed #696969;}
.popular-posts ul li a{text-decoration:none;color:#5A5F63;}
.popular-posts ul li a:hover{text-decoration:none;}

Özelleştirmek için:

• Kare baloncukları düzenlemek arka plan rengini değiştirmek için #292D30
• Baloncuk metin rengini değiştirmek için #fff
• Varsayılan olarak numaralandırma solda, eğer sağa almak istiyorsanız float:left olan bölümde left'i right yapın.
• Varsayılan olarak baloncuğun şekli kare. Yuvarlak yapmak istiyorsaniz değiştirmek için box-shadow: 1px 2px 9px #666666;kodundan hemen sonra aşağıdaki kodu ekleyin.

border-radius:15px;

Son olarak ön izleme yaparak her hangi bir sorun yoksa şablonu kaydedip çıkın.

Sorun yaşayanlar ve yapamayan kişiler altta yorum bırakarak yardım alabilir veya bizimle iletişime geçebilirsiniz.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!