Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Kolom Komentar Blog Auto Hide

Cara Membuat Kolom Komentar Blog Auto Hide adalah membuat kolom komentar pada blog yang nantinya akan dibuat dengan menampilan sebuah tombol dimana fungsi dari tombol itu untuk memunculkan dan menyembunyikan form komentar yang ada pada blog, dan bentuk dari kolom komentar tersebut seperti halnya dengan tombol spoiler. Jika di tekan tombol tersebut maka akan muncul form komentar dan jika di tekan lagi tombol tersebut maka akan menyembunyikan form komentar yang tadi telah terbuka. Membuat Kolom Komentar Blog Auto Hide berguna untuk membuat blog menjadi lebih simple jika nantinya artikel yang terdapat pada postingan blog telah ramai dan banyak dengan komentar dimana komentar tersebut sebelumnya telah memanjang kebawah postingan sampai jumlah akhir dari komentar yang membanjiri blog tersebut. Bisa anda bayangkan jika postingan artikel anda telah ramai dikunjungi dan di banjiri komentar sampai ratusan bahkan ribuan maka akan seperti apa nantinya. Untuk Cara Membuat Kolom Komentar Blog Auto Hide tidaklah sulit, karena hanya dengan membuka template editor dan menambahkan sedikit kode saja maka form kolom komentar pada blog tersebut sudah bisa menjadi auto hide yang layaknya seperti tombol spoiler. Berikut Cara Membuat Kolom Komentar Blog Auto Hide :

1. Login ke blogger, Klik Template > Edit Html.
2. Copy kode berikut ini dan letakan tepat diatas kode </head> pada template blog anda.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(&quot;.tombol-komentar&quot;).click(function(){
        $(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        return false;
    });
});
</script>
3. Kemudian letakan kode berikut ini tepat diatas kode ]]></b:skin>
#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}

#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}
a.tombol-komentar{background: #f9f9f9 url(http://i1327.photobucket.com/albums/u677/Andes_Rizky/down-arrow_zps19d8ad93.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000}
a.tombol-komentar:hover{background: #B580FE url(http://i1327.photobucket.com/albums/u677/Andes_Rizky/down-arrow_zps19d8ad93.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000;}
a.active.tombol-komentar{background: #ccc url(http://i1327.photobucket.com/albums/u677/Andes_Rizky/up-arrow_zps79d542b5.gif) 85% 55% no-repeat;border:1px solid #000000}
4. Lalu taruh kode berikut ini, tepat di bawah kode <b:includable id='comments' var='post'>
<center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>Buka Komentar<b:else/>
<b:if cond='data:post.numComments == 1'>1
<data:top.commentLabel/><b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center>
5. Klik "Simpan Template" dan lihat hasilnya.

Sekian tentang Cara Membuat Kolom Komentar Blog Auto Hide, selamat mencoba dan semoga bermanfaat.

Berlangganan artikel via email

14 Response to "Cara Membuat Kolom Komentar Blog Auto Hide"

Wih.. berhasil mas.. thank's yaa..

Balas

Mas ini cara bikin kotak komentar kayak punya mas ini gimana ?

Balas

terimakasih kembali :)
mas ivan lihat saja di http://mas-andes.blogspot.com/2012/11/menggabungkan-3-kotak-komentar-blogger.html

Balas

punya saya kok gagal -_____- ..gimana nih.

Balas

coba lagi nih tak update

Balas

punya q jg gagal

Balas
avatar
Anonymous

sekalian dikasi demonya mas biar lebih yakin, terima kasih banyak :)

Balas

nih mas yang udah tak pasangin http://miztia-respect.blogspot.com

Balas
avatar
Anonymous

terimakasih mas, saya simpan dulu.
untuk sekarang masih banyak kerjaan

Balas

mantap gang.. tapik saya belom tau lancar,,

Balas

mantap nih boleh d coba..

Balas

Mantap, boleh dicoba nih

Balas

tutorialnya bagus jangan lupa kujungin balik yaw|

http://tutorialimparare.blogspot.com/

Balas

Sepertinya keren tapi puyeng juga belajarnya apa lagi class dan ID di blog sudah di ganti....

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Kolom Komentar Blog Auto Hide" ini bermanfaat, share ke jejaring sosial.
Konversi Kode