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.
Popüler Yayınlar
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.
Popüler Yayınlar
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.
b:skin
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...

6 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. "Popüler Yayın"larda galiba Blogger kaynaklı bir sorun var. Benim bloglarda dünden bu yana yeni eklediğim yazıların resmi çıkmamaya başladı, sizinkinde de aynı durum var sanırım bir yazının resmi yok garip bir durum.

    YanıtlaSil
  2. Teşekkür ederim. Emeğinize sağlık.

    YanıtlaSil
  3. çalışmıyor.........................................................................

    YanıtlaSil
  4. Sayenizde Gerçekten blogum gayet güzel oldu teşekkür ederim wwww.Kemandiyari.com

    YanıtlaSil
  5. Bloguma ekledim. Çok güzel oldu. Emeğinize sağlık. https://kozmokitap.blogspot.com.tr/

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale