Tampilkan Sembunyikan Form Komentar

Pada tutorial kali ini saya akan mencoba menjelaskan cara menyembunyikan dan menampilkan form kotak komentar bawaan dari Blogger dengan tombol show/hide comment.

Jadi ketika ada seorang pengunjung yang mengklik tombol Show maka kotak komentar beserta komentar yang ada akan ditampilkan begitupun sebaliknya jika pengunjung mengklik tombol Hide maka kotak komentar serta komentar yang ada akan
disembunyikan dengan begitu tampilan kotak komentar akan menjadi lebih menarik.

Cara ini juga cocok bagi blogger yang menggunakan Captcha untuk mengurangi spam pada komentar.

Demo

Cara memasangnya :

1. Login ke Blogger Masuk ke Rancangan -> Edit HTML dan klik "Expand Template Widget"
2. Cari kode dibawah ini

]]></b:skin>

3. Copy dan paste kode CSS dibawah ini tepat diatas kode no 2

.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. Cari kode dibawah ini

</head>

5. Copy dan paste kode dibawah ini tepat dibawah kode no 4

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

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

7. Copy dan paste kode XHTML ini diatas kode no 6

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

8. Sehingga kodenya menjadi seperti 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>
<button class='tombol black' id='bukakeun'>Click here for show comment</button>
<button class='tombol black' id='tutupkeun'>Click here for hide comment</button>
</b:includable>

9. Simpan template dan lihat hasilnya

Semoga Bermanfaat