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/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...
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT