Blogger Yorum Balonu Eklentisi

Blogger anasayfasında konularınızın yanına resimdeki gibi resim üzerinde yorum sayısını göstermek isterseniz bu eklenti tam size göre. Oldukça basit kuruluma sahip olmasıyla birlikte sitenize ayrı bir güzellik katıcak.

Kurulum: Şablon>Htmlyi Düzenle>Devam Et yolunu izleyerek Widget Şablonlarını Genişlet diyoruz.Ctrl+F yardımı ile aşağıdaki kodu aratın.

]]></b:skin> 

Bulduğunuz kodun üzerine aşağıdaki kodu ekleyin.

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

Yükarıdaki kırmızı ile gösterilmiş kodu aşağıda vercegimiz resimlerle yada istediğiniz resimlerle değiştirebilirsiniz.

Şimdiki adımda ise yorum balonu kodunu anasayfamıza eklemeye geldi bunun için aşağıdaki kodları bulun.

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

Eğer kodları bulamadıysanız temanızda sadece bir kısmını örneğin '  post-title entry-title ' kısmını aratıp bulmanız gerekmektedir.

Eğer kodları bulduysanız aşağıdaki kodları hemen sonrasına ekleyin.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

Kod içerisinde kırmızı ile işaretlediğim yeri kendinize göre ayarlayabilirsiniz.

Şimdi vericek olcağım resimleri css ye eklediğimiz yani ']]></b:skin>' kodundan önce eklediğimiz kodların içinde kırmızı renk ile gösterdiğim kodla kendinize göre isteğinize göre değiştirebilirsiniz.

Almak istediğiniz resmi sağ tıklayıp 'Resim konumunu kopyala' diyip Ctrl+V yardımıyla yapıştırabilirsiniz.