Terkadang kotak komentar memakan tempat yang sangat banyak, sehingga membuat halaman postingan kita sangat panjang. Untuk mengatasi hal tersebut kali ini saya akan membagikan bagaimana caranya untuk menyembunyikan kotak komentar pada blog kita. Jika sobat masih bingung dengan penjelasan tersebut, mungkin akan saya bantu dengan gambar berikut.
Berikut bentuk kotak komentar saat disembunyikan setelah menggunakan tips ini: |
| Perhatikan Click Here.... |
 |
| Kotak komentar yang disembunyikan |
1. Login ke blogger dengan account anda.
2. Pada Dasbor blog anda, pilih Template.
3. Kemudian pilih Edit HTML ==>> Lanjutkan
4. Jangan lupa centang Expand widgets Templates
5. Cari kode <head> dan letakkan kode berikut di bawahnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>6. Cari kode ]]></b:skin> dan letakkan kode berikut di atasnya.
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
/*----- Comment Box by www.MybloggerTricks.com ----*/Anda dapat merubah panjangnya dengan mengganti tulisan 518px.
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
7. Untuk mengubah warna, ukuran font, jenis font teks, silahkan edit tulisan berwarna kuning.
8. Cari kode berikut ini
<b:includable id='comment-form' var='post'>9. Letakkan kode berikut ini di bawah kode tersebut.
<h3 class='trigger'>Click Here To add Comment</h3>10. Kemudian silahkan anda lihat ke bawah kode seperti ini </b:includable> , jika sudah ketemu letakkan kode berikut ini di atasnya.
<div class='toggle_container'>
<div class='block'>
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://tips-untuk-blogger.blogspot.com/2012/08/membuat-hideshow-kotak-komentar.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>11. Kemudian Simpan Template, dan lihat perubahannya pada blog sobat. Selamat mencoba semoga berhasil. Mohon maaf jika ada kesalahan. (Jkt/2012)
</div>
</div>
Posting Komentar