Penasaran gx ???????????????? Liat tutorial nya di bawah ini,,,, Special Tahun Baru,,, jdi sya gx pke system Login
- Login Ke Blogger
- Klik Template >> Edit HTML
- Cari kode berikut
<head>
- Masukkan kode berikut Di Bawah kode tadi
<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>
- klo udah Cari kode berikut
]]></b:skin>
- Masukkan kode berikut Di Atas kode tadi
/*----- Comment Box by rully-sc.blogspot.com ----*/
h3.trigger {
background-color: #0066FF;
height: 44px;
line-height: 46px;
width: 360px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:center;
color:#0b0b0b;
float: center;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
border:3px solid black;
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;
-moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;
-webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
- Cari kode berikut
<b:includable id='comment-form' var='post'>
- Masukkan kode HTML Di Antara kode berikut
<b:includable id='comment-form' var='post'>
.......
</b:includable>
- Kode HTML :
<h3 class='trigger'>Tambahkan Komentar</h3>Contoh:
<div class='toggle_container'>
<div class='block'>
<b:includable id='comment-form' var='post'>
<h3 class='trigger'>Tambahkan Komentar</h3>
<div class='toggle_container'>
<div class='block'>
...............
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://rully-sc.blogspot.com/2012/12/cara-membuat-kotak-komentar-showhide-di.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
</div>
</b:includable>
- Save tempe dan lihat hasilnya y sob ^_^
Tag :
Tutorial Blog
0 Komentar untuk "Cara Membuat Kotak Komentar Show/Hide Di Blog"