wanita allen: Cara Memasang Comment Box Show/Hide

Selamat siang sobat bloger kali ini BC mau share tentang gimana cara memasang box coment tampil show/hide, berikut langkah-langkanya :

Sobat Masuk ke- blogger.com
Masuk halaman dhasboard
Klik Layout / tempelate
Edit HTML jangan lupa centang expand widgate tempelate
Cari kode <head> kemudian sobat masukan kode HTML di bawah tepat di atas 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>

6.Kemudian cari kode ]]></b:skin> dan letakan kode di bawah ini tepat di bawah kode ]]></b:skin>

/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/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;
}

7. Sobat bisa mengubah width / panjangnya dengan mengganti angka : 518px.
Untuk mengubah warna, ukuran font, jenis font teks, silahkan sobat edit tulisan berwarna biru.

8. Kemudian Cari kode di bawah ini

<b:includable id='comment-form' var='post'>

9. Dan letakkan kode berikut ini 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'>

10. Kemudian sobat scroll kebawah cari kode </b:includable> , jika sudah ketemu letakkan kode berikut ini di atasnya.

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://tips-untuk-blogger.blogspot.com/2012/08/membuat-hideshow-kotak-komentar.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
</div>

11. Jangan lupa pratinjau dahulu kalo gak ada error simpan tempelate, dan lihat hasilnnya pada blog sobat. Selamat mencoba semoga berhasil.salam bloger.................!!!

wanita allen

Thursday, September 13, 2012

Cara Memasang Comment Box Show/Hide

No comments:

Post a Comment