Tips Menampilkan Jumlah Komentar Dengan CSS3

1.       Login ke  blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.

2.       Cari kode ]]></b:skin>  pada template anda.

3.       Letakkan kode CSS3 dibawah ini 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;

}

4.  Kemudian cari kode judul posting pada template anda karena kita kita akan meletakkan kode untuk menampilkan jumlah komentar ini disebelahnya. Susunan kode tag judul biasanya 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'>

NB: Sesuaikan kode tag heading (h3) dengan tag judul post yang ada di template anda. Karena bisa jadi dalam template anda tag judul adalah h1 atau bisa juga h3.

5.       Tambahkan tag HTML yang berwarna biru berikut ini dibawahnya.

 

 

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

6.       Save/Simpan template anda.