1. Dari dalam Dashboard Blogger Anda, pergi ke 'Template'
2. Klik 'Edit HTML' maka tombol 'Lanjutkan'
3. Carilah tag </head> dengan menekan Ctrl + F dan kemudian copy lalu paste kode berikut diatasnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_comment_db").hide();
$("h3.pesan_comment_db").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
4. Selanjutnya, dengan menekan 'Ctrl + F' lagi, cari kode tag ]]></b:skin> dalam kode html
5. Paste kode CSS berikut di atasnya
h3.pesan_comment_db {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiDm7h6syhKLNKYr3NC8PBLYCWr3Mw35rgiNra0HAgCL0NyPNa-6Jc2WTiaN7juLeAdD1vAWRPhjyhbpdv9pX4y1I4bTawZabh8Ct2Tt0v7qMIBNs3WHbnZBEyerAC0sOanBh8bpVmzuM/s1600/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_comment_db {
padding-left:10px;
overflow: hidden;
clear: both;
}
Anda dapat mengubah lebar tombol dengan mengedit 518px sesuai dengan lebar template anda. silahkan mengubah warna font, ukuran, dan gaya teks sesuai keinginan anda.
Berikutnya letakkan link teks untuk menyembunyikan bagian komentar.
6. Sekali lagi, menggunakan 'Ctrl + F', cari kode berikut:
<b:includable id='comment-form' var='post'>
7. Dan kemudian paste kode berikut dibawahnya:
<h3 class='trigger'>Klik untuk berkomentar</h3>
<div class='toggle_container'>
<div class='block'>
Sekarang cari tag </b:includable> penutup tag <b:includable id='comment-form' var='post'> kemudian paste kode berikut di atasnya:
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'>
<a href='http://defandaky.blogspot.com' style='color:#CAC8C8;'><i>Blogger Tutorial</i></a>
</p>
</div>
</div>
Seperti ini hasilnya:
<b:includable id='comment-form' var='post'>
<h3 class='trigger'>Klik untuk berkomentar</h3>
<div class='toggle_container'>
<div class='block'>
.....kode panjang.....
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'>
<a href='http://defandaky.blogspot.com' style='color:#CAC8C8;'><i>Blogger Tutorial</i></a>
</p>
</div>
</div>
</b:includable>
8. Sekarang 'Preview' untuk melihat hasilnya, dan jika Anda merasa cukup dengan hasilnya, simpan template anda dan sudah selesai.
Semoga bermanfaat...