Cara Menampilkan Jumlah Komentar Di Samping Judul Postingan Blog Cara Menampilkan Jumlah Komentar Di Samping Judul Postingan Blog

Mungkin sebagian dari sobat blogger Toturial Blog ada yang tertarik juga untuk memasang jumlah komentar di samping judul postingan blog masing masing bisa mengikuti Resep dari Master Chef berikut ini :

1. Langkah pertama pastikan kamu sudah login ke akun blogger kamu masing-masing
2. Karena kita akan melakukan sedikit Edit HTML silahkan back-up template blog kamu terlebih dahulu untuk mengantisifasi kesalahan dalam edit HTML. Tidak mengerti caranya ( Baca : Cara upload dan Back-up Template Blog lengkap)
3. Jika sudah login dari Dashbord blog kamu pilih Template untuk masuk kehalaman Edit HTML. Silahkan Baca selengkapnya tetang Cara mengakses Halaman Edit HTML Blogger
4. Pada halam Edit HTML jangan lupa centak kotak kecil bertulisan Expand Widget Template
5. Selanjutnya cari kode  ]]></b:skin> ( Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode tersebut)
6. Sudah ketemu kode tersebut kemudian Copy kode dibawah ini  tepat diatas kode ]]></b:skin>.

a.comment-bubble:hover{color:#cc6611;}
a.comment-bubble {
float:right;
width:34px;
height:18px;
text-align: center;
white-space:nowrap;
font: bold 14px monospace;
color:white;
position:relative;
margin-left: 6px;
margin-top: 3px;
padding-top:2px;
background:#eeaa00;   /* fallback */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f8dd99), to(#eeaa00));
background:-webkit-linear-gradient(#f8dd99, #eeaa00);
background:-moz-linear-gradient(#f8dd99, #eeaa00);
background:-o-linear-gradient(#f8dd99, #eeaa00);
background:linear-gradient(#f8dd99, #eeaa00);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
border: 1px solid #dd8808;
border-bottom-color: #f8dd99;
border-right-color: #f8dd99;
}
a.comment-bubble:after {
content:"";
position:absolute;
bottom:-5px;
left:11px;
border-width:5px 5px 0px 0px;
border-style:solid;
border-color:#eeaa00 transparent;
display:block;
width:0;
}

7. Masih pada halaman Edit HTML Cari kode yang mirip dengan kode seperti ini <h3 class='post-title entry-title'>. Pada umumnya diatas kode tersebut terdapat susunan kode seperti beriku :

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Setiap template mungkin memiliki kode yang berbeda, sekali lagi Master Ingatkan cari kode yang mirip dengan kode <h3 class='post-title entry-title'>

8. Jika sudah ketemu kode tersebut tambahkan kode dibawah ini tepat dibawah kode <h3 class='post-title entry-title'> 

<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.url + &quot;#comments&quot;' expr:title='&quot;Comments to &amp;quot;&quot; + data:post.title + &quot;&amp;quot;&quot;'><data:post.numComments/></a></b:if>

9. Sehingga susunannya menjadi seperti ini

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.url + &quot;#comments&quot;' expr:title='&quot;Comments to &amp;quot;&quot; + data:post.title + &quot;&amp;quot;&quot;'><data:post.numComments/></a></b:if>

10. Sekarang klik Simpan
11. Selesai dan lihat hasilnya

Demikian Tutorial Blog Dari Master Chef kali ini. Terimakasih buat sobat yang sudah mencoba menerapkan resep Cara Menampilkan Jumlah Komentar Di Samping Judul Postingan Blog kali ini. Pada kesempatan berikutnya akan kita bahas Tutorial-tutorial blog lainnya.