Cara Membuat Show-Hide Komentar/Expand-Collapse Comment Bag.2

Sebenarnya sudah banyak para Blogger yang membahas hal ini, namun sebagian besar menggunakan form komentar dari pihak ketiga seperti DisqUs atau IntenseDebate. Sedangkan form bawaan Blogger dinonaktifkan hal tersebut dengan beberapa alasan diantaranya form komentar bawaan Blogger tidak valid XHTML dan menggunakan metode iframe sehingga kurang fleksibel dalam memodifikasi tampilannya. Terlepas dari alasan-alasan tersebut,
tetapi saya akan tetap membahas cara menyembunyikan dan menampilkan isi komentar dan form komentar bawaan Blogger dengan satu tombol yang terekam melalui jQuery Cookie. jQuery Cookie digunakan untuk merekam tingkah laku pengunjung blog terhadap tombol show/hide comment. Ketika pengunjung me-load halaman pertama kalinya dan cookie browser kosong (null) maka isi komentar dan kotak komentar akan disembunyikan, sebuah tombol "Show" akan ditampilkan.
Ketika tombol "Show" ditampilkan maka isi komentar dan form komentar akan ditampilkan, sebuah tombol "Hide" akan ditampilkan. Pada saat pengunjung meng-klik tombol "Show" maka browser akan menyimpan cookie, sehingga ketika pengunjung berulang-ulang kali berpindah halaman atau bahkan keluar dari browser dan kemudian kembali lagi mengunjungi blog maka isi komentar dan form komentar akan tetap terbuka. Namun ketika pengunjung mengklik tombol "Hide" maka isi komentar dan form komentar akan disembunyikan dan cookie pada browser akan dihapus. Hal ini karena jQuery Cookie merekam dan menyimpan tingkah laku pengunjung terhadap tombol "Show Hide Comment". Cara ini cocok bagi Blogger yang menggunakan metode Captcha untuk mengurangi spam pada komentar.





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> , Setelah ketemu,tepat diatasnya,letakkan kode berikut :

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

3. Setelah itu,masih di HTML area (aaaalah!),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>

4. 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>

5. Lalu Simpan Template,Selesai!!

 

Jangan lupa lihat juga tutorial sebelumnya 'Cara Membuat Show-Hide Komentar/Expand-Collapse Comment' disini..

Semoga Bermanfaat :D