Menambahkan Image Bubble Comment di Posting

Assalamu'alaikum Wr.Wb.

Share posting Go Blog Go akan menerangkan bagaimana cara-nya menambahkan Image Bubble Comment yang akan tampil disetiap postingan, tentu Mojang dan Bujang sudah pada faham kegunaan-nya untuk mengetahui berapa jumlah pengunjung yang ber-komentar disetiap posting yang di-Share.


Login ke Blogger
Dashboard -> Klik Monetize -> Klik Template -> Edit HTML (Jangan lupa Back-up template-nya)
Process -> Klik Expand Widget Template
Gunakan Ctrl+F (untuk mencari cepat) kemudian cari Kode ]]></b:skin>
Tambahkan Kode CSS berikut ini sebelum Kode ]]></b:skin>

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

Lanjut dengan mencari Kode HTML berikut ini :

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

catatan : apabila Kode diatas tidak ada (tergantung template yang digunakan) cari Kode HTML ini :

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

Apabila sudah ditemukan salah satu-nya, tambahkan Kode HTML dibawah ini :

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

Save Template-nya dan Preview

Untuk Image Bubble-nya, saya akan berikan beberapa Image kepada Mojang dan Bujang, silahkan Download...

DOWNLOAD
Semoga share posting yang kecil artinya ini bisa membawa kegunaan yang besar. Go Blog Go...!!! Amiin

Wassalam,