0 Tips Menampilkan Jumlah Komentar Dengan CSS3

Tips menampilkan jumlah komentar ini sangat berguna untuk mengetahui berapa banyak komentar yang ada di setiap artikel. Kali ini kita akan menggunakan CSS3 untuk membuatwidget 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).     

1.       Login ke dashboard 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 artikel/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 merah 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.

Kalau berhasil maka tampilan jumlah komentar diatas posting akan sama persis seperti gambar diatas. Selamat mencoba.!!