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.

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

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

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

Please rate this article: