Membuat Icon Jumlah Komentar Disamping Blog

Cara Menampilkan jumlah komentar di samping judul postingan + Cara Membuat Widget Jumlah Komentar Disamping Judul Posting Blog + Cara Pasang Jumlah Komentar Disamping Judul Posting

Tutorial Blog kali ini memberikan artikel tentang Cara Memasang  Jumlah Komentar , Widget Jumlah Komentar ini nantinya akan kita tampilkan disamping judul blog tidak seperti pada template bawaan blogger yang jumlah komentarnya tampil dibawah postingan blog. Untuk contoh dari widget ini bisa Anda lihat gambarnya diatas atau jika ingin melihat yang aslinya silahkan kehalaman beranda blog ini.

Pemasangan Widget ini tentunya bisa menambah keindahan pada blog kita selain itu juga bisa menarik minat pengunjung untuk ikutan membaca artikel yang Anda posting yang banyak dikomentari oleh pengunjung lainnya.

Jika Anda ingin membuat widget jumlah komentar disamping postingan blog ,silahkan ikuti tutorial nya dibawah ini;

1. Langkah pertama Login di Blogger.com terlebih dahulu

2. Kemudian didasbor klik Template

3. Dilanjutkan lagi dengan meng-klik Edit HTML serta centang kotak Expand Template Widget

4. Setelah itu cari kode ]]></b:skin> (supaya cepat mencarinya tekan CTRL+F pada papan keyboard Anda kemudian masukkan kode tersebut didalamnya)

5. Setelah ketemu, copas kode dibawah ini dan simpan diatas kode ]]></b:skin> tadi.

KODE CSS/JAVASCRIPT :

.comment-ballon{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhniTfR-oPFDiBlkpik8ihaI-EjsUUZhbd3H2iMX7f9xkyXwD2PHDPKPSvsH6rrA-4bto0eBbWa9-LvXavQrglYYVKBTqmD_L3fKpcXdlxcMbJsyvNXEKJ1xJo9cz9a4HDShRfbzAqanwk/s1600/comments.png) no-repeat;

width:32px;

height:32px;

text-align:center;

font-size: 16px;

float: right;

padding-top: 3px;

margin-right: 10px;

font-color: #ffffff;

}

.comment-ballon a{

color: #000000;

}

6. Setelah itu cari lagi kode <a expr:name='data:post.id'/> (supaya cepat tekan CTRL+F lagi) jika kode tersebut ada 2 ,pilih kode yang pertama saja. Kemudian copas lagi kode dibawah ini dan letakkan diatas kode tersebut.

KODE CSS/JAVASCRIPT :

<div class='comment-ballon'><b:if cond='data:post.allowComments'>

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

</b:if></div>

7. Kemudian cari lagi kode dibawah ini

KODE CSS/JAVASCRIPT :

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>

</b:if>

</span> 

Agar mudah dalam mencari kode diatas, seperti biasa tekan lagi CTRL+F kemudian copy lah kode yang berwarna kuning saja yaitu kode <span class='post-comment-link'> lalu paste kedalam kotak tersebut dan jika sudah ketemu, hapuslah semua kode diatas dan ingat menghapusnya harus sampai kode penutup warna kuning yang terakhir yaitu kode </span>

Jika kode diatas ada 2 ,hapus saja deretan kode yang pertama.

8. Langkah terakhir silahkan klik simpan template dan lihat hasilnya.