/ / Show Hide Komentar Di Blog

Show Hide Komentar Di Blog

Kali ini gw ngasih tutor show hide komentar di blog ........ untuk demonya bisa lihat di bawah posting ada tulisan "Klik Untuk Menampilkan Komentar"



Nih tutornya langsung dahh


1 .Login Ke Akun Blogger Kalian
2.Masuk Ke Rancangan >> Edit HTML
3.Klik "Expand Template Widget"
4.Cari Kode dibawah ini

]]></b:skin>
5.Dan diatasnya masukkan kode berikut ini

.tombol {width:100%;display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .3em 2em .35em;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight:bold;font: 13px/20px 'Open Sans',Arial,Helvetica,Verdana,sans-serif;}
.tombol:hover {text-decoration: none;}
.tombol:active {position: relative;top: 1px;}
.black {color: #d7d7d7;border: solid 1px #282828;box-shadow:0 0 2px #000 inset;-webkit-box-shadow: 0 0 2px #000 inset;-moz-box-shadow: 0 0 2px #000 inset;background: #282828;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000));background: -moz-linear-gradient(top, #282828, #000);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000');}
.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top,  #444,  #000);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}
.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top,  #000,  #444);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

6.Cari kode dibawah ini

</head>
7. Dan diatasnya masukkan kode berikut ini

<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
 jQuery('#bukakeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({
   display: 'none'
  });
  jQuery('#tutupkeun').show();
  jQuery.cookie('komen', 1);
  return false
 });
 jQuery('#tutupkeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({
   display: 'none'
  });
  jQuery('#bukakeun').show();
  jQuery.cookie('komen', null);
  return false
 });
 if (jQuery.cookie('komen') == 1) {
  jQuery('#comments').show();
  jQuery('#bukakeun').hide()
 } else {
  jQuery('#comments').hide();
  jQuery('#tutupkeun').hide()
 }
});
//]]></script>
 8.Cari Kode seperti dibawah ini

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
9.Masukkan kode dibawah ini dibawah kode tadi

<button class='tombol black' id='bukakeun'>Click here for show comment</button> <button class='tombol black' id='tutupkeun'>Click here for hide comment</button> 
10.Preview dulu ,terus save deh

NB : kode http://yandex.st/jquery/1.5.2/jquery.min.js jika sudah ada di blog kalian ,tidak usah ditambahkan ...

Semoga bermanfaat ..

About Rio Apri

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

0 Discussion:

Posting Komentar

Langganan: Posting Komentar ( Atom )