Cara Menampilkan Jumlah Komentar Diatas Posting Dengan CSS3

Advertisement

Your Ads Here

Cara Menampilkan Jumlah Komentar Diatas Posting Dengan CSS3  - Tau kan hari ini Blog Mas Hanif bakalan posting apa? Yah bernar sekali saya hari ini akan mengajari teman-teman cara merubah tampilan jumlah komentar yang ada diatas posing menggunakan kode CSS3. Kalo mau tau caranya langsung saja ikuti langkah-langkah yang dibawah ini.

1. Login ke Dashboard blogger anda, pilih Template > 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.

Semoga tutorial ini bermanfaan bagi anda sekalian, mohon maaf jika ada kesalahan dalam penulisan. Kunjungi juga artikel Cara mengetahui ID Facebook, Cara Merubah Ukuran Kotak Komentar, Cara Mempercepat Koneksi Modem.

Advertisement

Your Ads Here