Cara menampilkan jumlah komentar di samping judul posting

Tip Cara menampilkan jumlah komentar di samping judul posting - Template blog dengan adanya icon jumlah komentar selain mempermudah pengunjung untuk melihat jumlah komentar di setiap postingan, tampilan blog juga terkesan menjadi lebih keren. Bagaimana cara membuatnya ? - langsung saja ikuti langkah - langkah di bawah ini

Langkah 1 :
Login ke blogger >> Pilih Template >> Edit HTML >> Klik Expand Template Widget
Langkah 2 :
Cari kode ]]></b:skin>  kemudian copy paste code di bawah ini dan tempatkan di atas ]]></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;

}

Langkah 3 :
Cari kode yang menyerupai script di bawah ini :

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

Script diatas adalah kode untuk menampilkan judul post pada blog. Jadi silahkan sesuaikan dengan template blog sobat. Selanjutnya di bawah kode diatas tempatkan script berikut :

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

Jadi lengkapnya seperti ini :

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2>
<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>

Langkah 4 :
SIMPAN template >> Dan coba Refresh blog, maka akan muncul tampilan "jumlah Komentar Persis di sebelah Judul Posting"


Sumber :http://blogger-coepoe.blogspot.com