Menambahkan Tombol Show Hide pada Komentar Blog


Menambahkan Tombol Show Hide pada Komentar Blog
Cara membuatnya sebagai berikut :

1. Login ke Blogger 
2. Masuk ke "Rancangan - Edit HTML" 
3. Klik "Expand Template Widget" 
4. Cari kode ini ]]></b:skin>
5. Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4


.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 ini </head>
7. Masukan (copy paste) kode, plugin dan framework jQuery dibawah ini diatas kode pada langkah 6:
<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 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>
</b:includable>

9. Masukan (copy paste) kode XHMTL dibawah ini diatas kode pada langkah 8:
<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. Simpan template dan preview blog anda...

  • Note ;
Jika anda sudah pernah memasang framework jQuery ( pada langkah 7 baris 1) maka framework jQuery tidak perlu diikutsertakan...

0 Coment "Menambahkan Tombol Show Hide pada Komentar Blog", Baca atau Masukkan Komentar

Posting Komentar