Sabtu, 29 Desember 2012

Cara Membuat Kotak Komentar Show/Hide Di Blog

sya mw Berbagi Informasi Blogging,,,,,,,,,,,  Contoh nya ada di blog sya kok ^_-
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(){

$(&quot;.toggle_container&quot;).hide();

$(&quot;h3.trigger&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});

});
</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>
<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>
 Contoh: 
<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 ^_^

7 komentar:

  1. Wah,ini yang saya cari sobb, thanks infonya.
    visit back ya sob http://altecdz.blogspot.com/

    BalasHapus
  2. link sudah terpasang...
    follow blog saya ya, nantik saya follow back..

    BalasHapus
  3. kotaknya kok sesudah komentar pengunjung?

    BalasHapus
  4. @Era Biodo: biasa nya sih itu bertentangan sama kotak komentar bawaan template. Klo mau saya bisa bantu, kirim template agan ke saya nnti saya bantu

    BalasHapus

Informasi Berkomentar :

[*] Blog Ini DOFOLLOW
[*] WAJIB menggunakan kata yg Sopan
[*] Dilarang berkomentar yg mengandung Porno, Sara, dan Judi
[*] Dilarang LiveLink
[*] Dilarang Ribut, apalagi membawa Agama
[*] Usahakan menggunakan Account

Nyann Maru | Berbagi Informasi dan Tips Terbaru © 2014. All Rights Reserved | Powered By Blogger | Grosir Gamis Murah | Blogger Templates | Designed by-Dapinder