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.