pengunjung mengeklik Tombol ini akan Tampil Kotak Komentar ini, Dan Style Kotak Komentar ini juga tidak banyak memakan tempat. Untuk itulah saya akan menjelaskan cara untuk membuatnya. Jika Anda Berminat membuatnya anda perlu mengedit HTML anda. Dan tolong Backup template anda, jika sewaktu-waktu ada kesalahan dan anda tidak bingung. Setelah di backup ikuti Cara-Cara Berikut ini:
- Silahkan Login Ke Blogger Anda.
- Setelah itu, Klik Menu Template --> Klik Tombol Edit HTML.
- Centang Expand Template Widget, Lalu Cari Kode <head> dengan menekan CTRL+F atau dengan F3.
- Paste Kode Berikut ini Dibawah kode <head> :
<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_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
- Setelah itu, Cari Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
- Paste Kode Berikut ini di atas kode ]]></b:skin> :
/*----- Comment Box by your-belajarblog.blogspot.com ----*/
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLui1mngZkwchUSS5O0re3uZTY-JwABBdArWytZKAgjv69t-l7q_EgaA3cTDJc9c45HkT-B-aKW9_h97ar4SSAMnJrdiQzxl-vPYYEWxitbYksyGP7BKcEcIr14WheWkPUA5nHDVZ_DSA/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_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
Keterangan:
Jika Anda ingin Mengatur Lebar Tombol Silahkan atur pada tulisan yang berwarna kuning.
- Setelah itu, Cari Kode <b:includable id='comment-form' var='post'> dengan menekan CTRL+F atau dengan F3.
- Paste Kode Berikut ini dibawah kode <b:includable id='comment-form' var='post'> :
<h3 class='trigger'>Klik Untuk Menambahkan</h3>
<div class='toggle_container'>
<div class='block'>
Keterangan:
Ganti Tulisan Klik Untuk Menambahkan dengan Judul Tombol yang anda mau
- Lalu, Cari Kode Berikut ini </b:includable> dengan menekan CTRL+F atau dengan F3.
- Paste Kode Berikut ini diatas kode </b:includable> :
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://your-belajarblog.blogspot.com/' style='color:#CAC8C8;'><i>Blogger TricksnTips</i></a></p>
</div>
</div>
- Setelah itu, Klik Tombol Pratinjau untuk meninjau kesalahan, Jika Tidak ada kesalahan, Klik Tombol Simpan Template.
Selamat Mencoba,
Salam Sukses.
Your-BelajarBLOG
makasih om irsyad sebelumnya
dan minusnya lebih berat dikit karena memuat plugins jquerynya.
Selamat Mencoba,
Salam Sukses,
Your-BelajarBLOG