Memasang Show Hide Comment Button di Blog

Memasang tombol show hide pada kotak komentar blog - Kali ini kita akan mengimplementasikan sebuah script yang bisa menyembunyikan dan menampilkan kotak komentar dengan sebuah klik. Untuk demo atau previewnya bisa dilihat pada bagian kotak komentar di blog ini.

Cara kerjanya seperti sebuah spoiler button, jadi ketika button tersebut kita klik kontent target akan berubah kondisi dari terlihat menjadi tidak terlihat dan sebaliknya. kalo masih bingung coba lihat demo berikut:

 Langkah pertama yang harus kita siapkan adalah menyiapkan spoiler kode, untuk kodenya bisa disamakan dengan kode yang saya gunakan.

<style>
.loadindkreat {
    border: 1px solid #c5c5c5;
    padding: 3px;
    margin: 5px;
}
.tgl-btn {
    background: #e30404;
    text-align: center;
    color: #fff;
    line-height: 50px;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}
</style>

<div class='loadindkreat'>
<div class='tgl-btn' href='javascript:void(0)' id='tgl-btn' onclick=' var eusi = document.getElementById(&apos;eusi&apos;); var kmn = document.getElementById(&apos;tgl-btn&apos;);  if(eusi .style.display!=&apos;none&apos;){     kmn.innerHTML =&quot;Load Comments&quot;;    eusi.style.display=&apos;none&apos; ; }else{    this.innerHTML =&quot;Hide Comments&quot;;    eusi.style.display=&apos;&apos; ; } '>Load Comments</div>
<div id='eusi' style='display:none'>
//Masukan isi content untuk spoilernya disini//
</div>

2. Cari kode "<b:includable id='comments' var='post'> ", biasanya kode ini hanya ada 1 dalam setiap template blogger. Letakkan script(awal) berikut dibawah kode tersebut.

<style>
.loadindkreat {
    border: 1px solid #c5c5c5;
    padding: 3px;
    margin: 5px;
 display:none;
}
.tgl-btn {
    background: #e30404;
    text-align: center;
    color: #fff;
    line-height: 50px;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 3px;
}
</style>
<b:if cond='data:post.allowComments'>
<style>.loadindkreat{display:block;}</style>
</b:if>
<div class='loadindkreat'>
<div class='tgl-btn' href='javascript:void(0)' id='tgl-btn' onclick=' var eusi = document.getElementById(&apos;eusi&apos;); var kmn = document.getElementById(&apos;tgl-btn&apos;);  if(eusi .style.display!=&apos;none&apos;){     kmn.innerHTML =&quot;Load Comments&quot;;    eusi.style.display=&apos;none&apos; ; }else{    this.innerHTML =&quot;Hide Comments&quot;;    eusi.style.display=&apos;&apos; ; } '>Load Comments</div>
<div id='eusi' style='display:none'>

3. kemudian cari kode "</b:includable>" dibawah kode tersebut. lalu letakan script(akhir) berikut sebelum kode "</b:includable>"

 </div></div>

Jadi pemasangan kodenya kurang lebih seperti ini:

  <b:includable id='comments' var='post'>
      <script(awal)/>
   <isi kontent komentar blog/>
   <script(akhir)/>
   </b:includable>

Klik simpan template dan lihat hasilnya, jika pemasangannya sudah sama persisis seharusnya tidak akan ada error yang terjadi. Jika terjadi error mungkin karena kamu salah meletakan script pada posisi yang salah.
So Berhatihatilah dan selamat mencoba, sekian Semoga Tutorial kali ini bisa bermanfaat.