Menambahkan Comment Bubble Pada Blogger

Terinspirasi dari beberapa template blogger, dari beberapa template blogger yang saya miliki ada beberapa perbedaan yang unik dari perbedaan template tersebut yaitu adanya gelembung komentar yang berada di samping sesudah judul atau di sudut judul postingan.
Setelah saya mencari-cari pada kode untuk membuat Comment Bubble pada template saya yang satunya akhirnya saya sukses menemukan dua kode terhubung untuk Membuat atau Menambahkan Comment Bubble Pada Blogger.
Untuk itu kali ini saya akan bebrabagi trick blogger dan article kali ini saya beri judul Menambahkan Comment Bubble Pada Blogger. Agar lebih jelasnya tentang yang saya maksud kali ini silahkan Anda lihat pada gambar berikut ini.

Contoh Comment Bubble Pada Blogger

---

Apa Fungsi Comment Bubble Pada Blogger

---

Menurut saya jika Anda ingin menampilkan jumlah komentar hanya hanya di sebelah setiap judul postingan atau halaman cara ini adalah cara terbaik untuk menunjukkan jumlah komentar dengan posting tertentu dalam Comment bubble atau icon gelembung kecil.

Menambahkan Comment Bubble Pada Blogger juga akan meningkatkan jumlah komentar pada blog Anda, karena dengan mengklik gelembung pembaca Anda dapat langsung mengakses kotak komentar Anda.
Jadi Anda dapat Menambahkan Comment Bubble Pada Blogger dengan cara mudah pada blog atau situs Anda.

---

Menambahkan Comment Bubble Pada Blogger

---

Seperti yang saya bilang di atas bahwa Menambahkan Comment Bubble Pada Blogger itu sangatlah mudah, untuk caranya silahkan ikuti langkah-langkah berikut.

1. Login ke aku blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Lalu centang Expand Template Widget ➨ Backup Template Anda.

4. Selanjutnya dalam Edit HTML cari kode ]]></b:skin> atau <style> bila kesulitan mencarinya coba klick DISINI.

5. Jika kode tersebut sudah ketemu sekarang letakkan kode CSS berikut tepat di atas kode tadi.

.comment-bubble {
    float: right;
    width: 48px;
    height: 48px;
    background: url(http://otowebsite.googlecode.com/files/ow-commentbubble.png) no-repeat;
    font-size: 18px;
    float: right;
    margin-top: -15px;
    margin-right: 2px;
    text-align: center;
    position: float;
    text-align: center;
}

6. Sekarang cari temukan kode <b:if cond='data:post.link'> dan ganti kode tersebut dengan kode berikut.

<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>
<b:if cond='data:post.link'>

7. Simpan Template.

Sekarang Anda bisa lihat hasilnya pada blog Anda.

---

Anda bisa melakukan perubahan atau editing???

---

Anda bisa melakukan sedikit perubahan pada kode CSS yang berada pada langkah 7, Jika Anda ingin mengatur posisi dari Comment Bubble ini.

---

Bagaimana Selanjutnya ?!!

---

Jika Anda membutuhkan bantua tentang atau untuk mengatur posisi Comment Bubble ini silahkan bertanya, saya akan dengan senang hati membantu Anda!