Blogger Popüler Gönderileri Otomatik Numaralandırma - Blogger html css kodlari

Yazdir

 👍Blogger, 2011 yılında Popüler Gönderiler widget'ını yayınladığında, stil sayfasını BlogSpot şablonlarınızla mükemmel bir şekilde uyumlu hale getirebilmeniz için sızdırmıştık. Bugün, CSS3 otomatik artış özelliğini kullanarak popüler gönderiler listesini nasıl görüntüleyeceğimizi öğreneceğiz. Sayıları çeşitli şekillerde biçimlendirebilirsiniz; biz kare/dikdörtgen ve dairesel şekillerde biçimlendirdik. Yorum Sayıları ile dizili yorumları görüntüleyen ilk kişiler sizdiniz ve bugün yine daha ilginç bir şey öğreneceksiniz. Bu uygulamanın pratik bir demosunu kenar çubuğumuzda görebilirsiniz. JavaScript kullanmadan, yalnızca stiller kullanarak bu efekti Blogger'a oldukça kolay adımlarla ekleyelim.

Popüler gönderiler widget'ı, blog sayfa görüntülemelerinizi artırmak ve okuyucularınızın blogunuzda daha fazla etkileşim kurmasını sağlamak için etkili bir araçtır. Google Analytics verilerinizi kullanarak gönderileri en çok ziyaret edilen sayfalara göre getirir ve sıralar.

1. Popüler Gönderiler Widget'ı Ekle
2. Blogger > Düzen'e gidin
3. "Gadget Ekle"ye tıklayın
4. Listeden "Popüler Gönderiler"i seçin

Ayarlarını aşağıdaki resimde gösterildiği gibi yapılandırmanız gerekecek: "Görsel küçük resmi" ve "parça" işaretlerini kaldırın. En fazla 7-9 gönderi görüntülemeniz daha iyidir. Daha azı iyidir ve temizdir.

Popüler Gönderileri Özelleştirme Eklentisi

Şimdi varsayılan stilleri değiştirmeniz ve Özel stiller'i kullanarak görünümünü istediğiniz tasarıma dönüştürmeniz gerekiyor.

1. Blogger > Şablon'a gidin
2. Şablonunuzu yedekleyin
3. HTML Düzenle'ye tıklayın
4. </b:skin> arayın. Kodu genişletmek için siyah oka tıklayın.

  5.  Aşağıdaki Stilleri hemen yukarıya yapıştırın </b:skin>

/*--- MBT Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}

.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }

.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}

.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 balonun arka plan rengini değiştirmek için #292D30'u düzenleyin

Balonun metin rengini değiştirmek için #ffffff'yi düzenleyin

Varsayılan olarak balonun şekli Kare'dir. Daire'ye değiştirmek için box-shadow'dan hemen sonra aşağıdaki kodu eklemeniz yeterlidir: 1px 2px 9px #666666;

border-radius:15px;

 6. Şablonunuzu kaydedin ve işte bu kadar!

Mükemmel bir şekilde çalıştığını görmek için blogunuzu ziyaret edin.

Blogumuzda yaptığımız gibi bir Çoklu Sekme Widget'ına eklemek isterseniz, blogumuzda yıllar önce Çoklu Sekmeler hakkında yayınlanmış birkaç eğitim bulabilirsiniz. Lütfen aşağıdaki eğitimlerden birini okuyun: