Mengedit kotak jumlah komentar postingan di Home Blogger

Tweet

Memiliki bubble jumlah komentar untuk setiap judul posting blogger membuat blog Anda tentu lebih menarik. Hal ini meningkatkan tidak hanya jumlah komentar Anda, tetapi juga memungkinkan pengunjung Anda untuk melihat apa tulisan paling populer di blog Anda. Jika sebuah tulisan memiliki komentar lebih, maka ia akan menampilkan populer posts untuk pengunjung blog Anda. Jadi mari kita mulai menambahkan fitur ini untuk judul posting blog Anda dengan menampilkan jumlah total komentar untuk posting Blogger Anda :

Langkah 1. 

1. Pergi ke Dashboard - Template - Edit HTML - Proceed - centang Expand Template Widget.
2. Cari (CTRL + F) potongan kode berikut pada template Anda : 

]]></b:skin>

    3.  Masukkan kode dibawah ini, diatas pada kode diatas :

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

Langkah 2

1. Cari kode dibawah ini :

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

    2.  Jika tidak ketemu cari kode dibawah ini :

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

    3.  Masukkan kode dibawah ini tepat pada kode diatas :

<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.  Preview terlebih dahulu, jika berhasil Save Template Anda.

Keterangan :

1. Klik kanan dan salin URL gambar yang Anda inginkan pada gambar-gambar .png dibawah ini :
   
    
2.  Ganti dengan URL  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Gk483x22z0T9rGN1UG3dP5YRyXOHp2aaFLoJJvFJ0AJ9v6WK5jk4LgmzAO_NYzMHZhzZqslcrVPl8FwKk13_snL07tXfljaiGz_2qkAj85_zVXhPmSHSv0lALCnvRg-6r19VHpst-CoD/s1600/speech+bubble+green.png diatas.