Rabu, 27 Februari 2013

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

0 komentar:

Poskan Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes