Membuat kotak komentar show hide.
sebelum memulai langkah langkah membuat kotak komentar show hide, lebih baik sobat mem-backup template sobat terlebih dahulu,
oke langkah langkahnya
- masuk ke akun blogger sobat
- klik rancangan > klik edit HTML
- kasih tanda centang pada Expand template widget
- cari kode <head> , biar cepat gunakan CTRL + F
- lallu copy kode di bawah ini, tepat di bawah 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>
- sekarang cari kode ]]></b:skin> dan copy kode di bawah ini tepat di atas kode ]]></b:skin>
/*----- Comment Box by www.yori-skipper.blogspot.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 360px; 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;
}
- untuk merubah lebar nya 360 , ubah sesuai lebar blog sobat
- selanjutnya cari kode <b:includable id='comment-form' var='post'>
- lalu copy kode di bawah ini tepat di bawah kode <b:includable id='comment-form' var='post'>
<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>
- Click Here To add Comment bisa sobat ganti sesuai keinginan
- cari kode </b:includable> lalu copy kode di bawah tepat di atas </b:includable>
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
</div>
lalu save template dan lihat hasilnya
waah, coba di terapkan dlu gan
ReplyDeleteposts and your blog is very interesting article, I'll be back to see your blog posts and articles later .. thanks for the info
ReplyDeleteoke sep!!! ane coba dulu
ReplyDelete