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.
- Pergi ke Dashboard - Template - Edit HTML - Proceed - centang Expand Template Widget.
- 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/AVvXsEj4gMznizOoQ-l4hhoKGNDhja1EbJcrqVfZDDRO82VaWJT67J3j9SvL3VYhaSKSROGOwVw_Pu3D2PxSA5nv7TqPbxyybbyA0YV3_kQTQTQiDe4H921JlPe-80QmYMzY9wyq4-leY7-Qwhbu/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
Langkah 2
- Cari kode dibawah ini :
<b:if cond='data:post.title'>2. Jika tidak ketemu cari kode dibawah ini :
<h3 class='post-title entry-title'>
<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'>4. Preview terlebih dahulu, jika berhasil Save Template Anda.
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
Keterangan :
- Klik kanan dan salin URL gambar yang Anda inginkan pada gambar-gambar .png dibawah ini :


















- Ganti dengan URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4gMznizOoQ-l4hhoKGNDhja1EbJcrqVfZDDRO82VaWJT67J3j9SvL3VYhaSKSROGOwVw_Pu3D2PxSA5nv7TqPbxyybbyA0YV3_kQTQTQiDe4H921JlPe-80QmYMzY9wyq4-leY7-Qwhbu/s1600/speech+bubble+green.png diatas.

Tidak ada komentar:
Posting Komentar