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(){
$(".tombol-komentar").click(function(){
$("#comments").slideToggle("slow");
$(this).toggleClass("active");
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'>
5. Klik "Simpan Template" dan lihat hasilnya.
Sekian tentang Cara Membuat Kolom Komentar Blog Auto Hide, selamat mencoba dan semoga bermanfaat.
<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>
Sekian tentang Cara Membuat Kolom Komentar Blog Auto Hide, selamat mencoba dan semoga bermanfaat.
