GO Blog

Pada dasarnya kode ini hanya menyembunyikan isi dari elemen DIV yang berisi bagian komentar blog Anda yang hanya terbuka setelah Anda mengklik tombol yang dibuat untuk memunculkannya, elemen DIV pun akan disembunyikan kembali ketika tombol tersebut diklik untuk kedua kalinya.

Ikuti petunjuk di bawah untuk memasangnya di blog Anda. Seperti biasa, lebih baik anda membuat cadangan template Anda terlebih dahulu sebelum melanjutkan untuk membuat perubahan apapun pada kode.

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(){
$(&quot;.toggle_comment_db&quot;).hide();
$(&quot;h3.pesan_comment_db&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});
});
</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/AVvXsEhUHGnRkzcEz9B-ZTE6hw4eNBfPfXBMJkV4duBwCzeq6RhDcBJamF5wy-eqkpk_rTlx5mt1aW9ozQpcQ7_Xn-gzrhr54OAYqkoRSWMRbsIssrfUwAdclmmTQBpjKORag4ghB9mQHcl-dC4/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...