Menampilkan Jumlah Komentar Diatas Posting Dengan CSS 3

Menampilkan Jumlah Komentar Diatas Posting Dengan CSS 3 -

Menampilkan Jumlah Komentar Diatas Posting – Sambil Menunggu Waktu Sahur saya akan share sebuah tips untuk sobat Blogger. Pada Postingan Sebelumnya sudah Saya share tentang Membuat Related Post Thumbnail dan Kotak Feedburner, Membuat Daftar Isi Dengan jQuery Accordion, dll.

Nah. Tips kali ini adalah menampilkan jumlah komentar diatas postingan atau di samping judul postingan. Kali ini Kita akan Menggunakan CSS 3 untuk membuat Widged jumlah Komentar diatas Postingan. Jangan Takut Sobat, Karena CsS 3 Tidak memberatkan Loading Sebuah Blog, bahkan sobat bisa merubah warna tampilannya seperti apa yang sobat inginkan. Untuk Screenshotnya seperti pada Gambar diatas.Ok, langsung saja.

1. Login ke dashboard blogger anda
2. Pilih Rancangan, Edit HTML, centang Expand widget template.
3. Trus, Cari kode ]]></b:skin> pada template anda.
4. 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;
}

5. 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'>

Catatan: Sesuaikan Tag H? dengan yang ada di template anda.

6. 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 + "#comments"' expr:title='"Comments to &quot;" + data:post.title + "&quot;"'><data:post.numComments/></a></b:if>

7. Save/Simpan template anda.

Kalau Berhasil, maka Tampilan Jumlah Komentar akan Seperti Gambar Di atas. Happy Blogging...

Terimakasih, Anda telah membaca artikel tentang Menampilkan Jumlah Komentar Diatas Posting Dengan CSS 3 dan anda bisa menemukan artikel Menampilkan Jumlah Komentar Diatas Posting Dengan CSS 3 ini dengan url http://mr-odingk.blogspot.com/2012/07/Jumlah-komentar-diatas-postingan.html. Anda boleh menyebarluaskan atau mengcopy artikel Menampilkan Jumlah Komentar Diatas Posting Dengan CSS 3 ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Blogger Kendari