Membuat Comments Bubble Pada Blog

Masih berhubungan dengan kode CSS seperti pada postingan sebelumnya, kali ini saya akan membahas mengenai cara membuat comments bubble pada blog. Sedikit penjelasan, comments bubble merupakan tampilan jumlah komentar yang dimanipulasi seakan-akan berada dalam gelembung.

Langsung saja untuk anda yang berminat untuk membuatnya, silakan ikuti langkah-langkah di bawah ini.

1. Login ke blogger.com
2. Klik Rancangan, (berhubung sekarang Blogger.com menyediakan fitur baru (desain template), maka fitur tata letakpun berada dalam fitur Rancangan)
3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
4. Cari kode berikut
   
   </head>
5. Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.
   
   

   <style type="text/css">
   .comment-bubble {
   float: right;
   background: url(http://i46.tinypic.com/df97c4.jpg) no-repeat;
   width: 55px;
   height: 40px;
   font-size: 18px;
   margin-top: -15px;
   margin-right: 2px;
   text-align: center;
   }
   </style>

   
   Keterangan :
   
6. Kode yang berwarna merah merupakan Url tempat anda menyimpan image bubble. Jika anda menggunakan Url di atas maka image bubble yang anda gunakan seperti ini
   
   
   


7. Kode yang berwarna biru pada width dan height silakan sesuaikan dengan ukuran image anda.
8. Cari lagi kode seperti ini
   
   <h3 class='post-title entry-title'>
9. Copy kode di bawah ini lalu letakkan tepat di bawah kode tadi.
   
   

   <b:if cond='data:post.allowComments'>
   <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>

10. Klik Simpan

     Selanjutnya silakan lihat blog anda. Perhatikan bagian disamping kanan judul postingan anda. Semoga bermanfaat...

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Related posts: