Blogger Popüler Yayınlar Otomatik Numaralandırma eklentisi

Bugün CSS3 otomatik artış özelliğini kullanarak popüler yayınlar listesini Otomatik Numaralandırma eklentisini görüntülemeyi öğreneceğiz. Numaralara kare/dikdörtgen ve yuvarlak gibi değişik şekiller stil uygulayabilirsiniz. Kenar çubuğunda sidebarda bu pratik uygulamanın demosunu görebilirsiniz. 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.

Popüler Yayınlar Widget'ını ekleme

1. Blogger kontrol panelinize giriş yapın > Yerleşim
2. "Gadget ekle" ye tıklayın.
3. Listeden "Popüler Yayınlar" seçin.

4. Aşağıdaki resimde gösterildiği gibi kendi ayarlarınızı yapılandırmanız gerekir: Mesela "küçük resim" kutusunu işaretlerseniz paylaştıgınız yazılardaki kullandıgınız ilk resim eklentinizde görünür.

5. Kaydet diyip çıkıyoruz.

Popüler Yayınlar Eklentisi özelleştirme

Şimdi varsayılan stillerini değiştirmek ve Özel stilleri kullanarak istediğiniz tasarımı kendi görünüşünü değiştirmek gerekir.

1. Blogger kontrol panelinize giriş yapın > Şablon
2. Şablonunuzu yedeklemeyi unutmayın.
3. HTML'yi Düzenle
4. Ctrl+F yardımı ile ]]></b:skin>  kodunu aratıp bulun ve Kodunu genişletmek için (►) siyah oku tıklayın.

5. </b:skin> kodunun hemen üstüne aşağıdaki style kodlarını kopyalayıp yapıştırın.

.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ştirme:

• 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;

6. Şablonu kaydet diyip çıkıyoruz. işlem bukadar!
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...