Blogger Başlıkların Yanına Yorum Sayacı Balonu Eklentisi

Blogger Eklentileri ile Blogger şablonları çok daha dinamik bir hale geldi. Yorumlar için tasarlanmış bu eklenti sayesinde blog başlıklarınızda konuya yapılmış olan yorum sayısını mini bir baloncuk içerisinde gösterebilirsiniz.

Blogger Başlıkların Yanına Yorum Sayacı Balonu Eklentisi DEMO
Demo sayfasında Blogger kayıtlarının yanında ki yorum baloncuklarını görebilirsiniz.

Blogger Başlıkların Yanına Yorum Sayacı Balonu Eklentisi

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
2 ) Ardından CTRL+F yardımı ile

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

kodunuzu buluyoruz. Blog temalarında farklılık gösterebilir. Yukarıda ki kodu bulamadıysanız aşağıdaki kodu aramayı deneyin.

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>

3 ) Blogger temanızın durumuna göre yukarıdaki kodların hangisini bulabildiyseniz, kodların sonrasına aşağıda verilen Blogger Başlıkların Yanına Yorum Sayacı Balonu Eklentisi kodlarını ekleyin.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

4 ) Ardından kodlar içerisinde ]]></b:skin> kodunu bularak hemen öncesine aşağıdaki kodları ekliyoruz.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANX24RFFUBy9O7CG8hT8ukOWh1y84fLa1hipgzu7ySmI1Qb9VewuBZ_kw6Ck1nj7zKyay9BI2Jk64UEKJMpJ3sSQE7myBGKCpkY6QOMSmkLchAUr9LHC0Pmn0QZRkbH-CuHh4Gb53UNvK/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Blogger Başlıkların Yanına Yorum Sayacı Balon Eklentisi

Kodlar içerinde kırmızı olarak verilmiş resim linkini kendinize göre değiştirebilirsiniz. Ben Sizin için bir iki baloncuk örneği eklemek istiyorum .

İstediğiniz baloncuğu kullanmak için üzerine sağ tıklayarak resmin urlsini al seçeneği ile url linkini kopyalayın. Ardından kodlar içerisindeki kırmızı alan ile değiştirebilirsiniz.