Blog Seputar : Blogger | Tips dan Trick | Internet| Komputer | Software

September 20, 2012

Membuat Kotak Komentar Show Hide

Membuat kotak komentar show hide.

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(){

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

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

});
</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

Membuat Kotak Komentar Show Hide Rating: 4.5 Diposkan Oleh: Yori Angelic

3 komentar:

  1. Anonymous23/9/12 09:48

    waah, coba di terapkan dlu gan

    ReplyDelete
  2. posts and your blog is very interesting article, I'll be back to see your blog posts and articles later .. thanks for the info

    ReplyDelete
  3. oke sep!!! ane coba dulu

    ReplyDelete

Silahkan berkomentar.
Di mohon untuk tidak menyisipkan LINK AKTIF
Komentar dengan LINK AKTIF akan di anggap SPAM
Jangan spam dan jangan menggunakan kata kata kasar.!
Jadilah pembaca yang baik dan meninggalkan komentar sesuai topik