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!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top