Tombol Show/Hide Komentar Part 2

Tidak usah berlama lama, langsung aja lihat cara penerapannya di blog

1. Pertama,pergilah ke Dashboard,lalu Tata Letak,kemudian pilih tab Edit HTML.
2. Lalu contreng check box tulisan Expand Widget Templates,lalu cari kode berikut : ]]></b:skin>
3. Setelah ketemu,Copas code dibawah ini tepat diatasnya.

/* Panel Comments */
.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');}

4.  Setelah itu,masih di HTML area ,tarik scroll kebawah cari kode: </head>, Setelah ketemu letakkan kode script di bawah ini tepat diatasnya.

 <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('#open').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({
   display: 'none'
  });
  jQuery('#close').show();
  jQuery.cookie('komen', 1);
  return false
 });
 jQuery('#close').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({
   display: 'none'
  });
  jQuery('#open').show();
  jQuery.cookie('komen', null);
  return false
 });
 if (jQuery.cookie('komen') == 1) {
  jQuery('#comments').show();
  jQuery('#open').hide()
 } else {
  jQuery('#comments').hide();
  jQuery('#close').hide()
 }
});
//]]></script>

5. Setelah itu cari kode berikut:

</b:includable>
<b:includable id='comments' var='post'>

Untuk mempermudah pencarian kode gunakan Ctrl+F pada keyboard anda.
Jika sudah ketemu,letakkan kode berikut,tepat dibawahnya:

<button class='tombol black' id='open'>Click here for show comment</button>
<button class='tombol black' id='close'>Click here for hide comment</button>

6. Lalu Simpan Template,dan lihat hasilnya di postingan anda!!

Baca juga artikel : Tombol Show/Hide Komentar Part 3

"Terima kasih sudah membaca artikel Tutorial : Tombol Show/Hide Komentar Part 2. Anda bisa bookmark halaman ini dengan URL https://henry-dunanz.blogspot.com/2013/12/tombol-showhide-komentar.html. Jangan lupa klik salah satu tombol dibawah ini."