Andry Blog's

Menampilkan Jumlah Komentar Diatas Posting  – Tips menampilkan jumlah komentar ini sangat berguna untuk mengetahui berapa banyak komentar yang ada di setiap artikel. Kali ini kita akan menggunakan CSS3 untuk membuat widget jumlah komentar di atas posting atau disamping judul artikel. Jangan takut dengan efek loading, karena CSS tidak akan memberatkan loading. Selain bisa menampilkan jumlah komentar di blog, widget jumlah komentar dengan CSS3 ini juga dapat mempercantik tampilan blog anda karena dapat mengganti warnanya pada kode CSS. Dibawah ini adalah screenshot hasil tampilan jumlah komentar pada homepage dan halaman artikel (single post).     

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;

}

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