Cara Memasang Show Hide Comment Dengan Efek Slide Out

Artikel ini sebenarnya saya post untuk sahabat Blogger Bang Dayat yang meminta cara pemasangan dari Show Hide Comment pada UnlimitSoft ini (silakan cek show hidenya).
Padahal Show Hide ini juga baru-baru saja saya dapat, dan meurut saya ini memanga terlihat dinamis dengan template yang saya 'Hack' ini.. hehehe..(dasar template kok pake acara hack hack-an segala). Selain membuat lebih minimal, gaya slide out nya juga saya suka, dan ringan sekali, bahkan menurut saya tidak mengubah kecepatan blog saya..
Nah, mari kita menuju tempat kejadian.. bagaimana cara pemasangannya dan kode-kodenya.

1. Pertama-tama ambil kabel, colokin kabel komputernya kemana ya..?? ya ke colokan.. hehe, ah lama nih admin, cepet dikit donk bro.. iya bro sabar dikit..
 Masuk ke Template > Edit HMTL > Expand Widget Template.


2. Masukan CSSnya : diatas "]]></b:skin>"

#comments {</p><p>display : none;</p><p>}</p><p>.tombol-komentar a{</p><p>text-align: center;</p><p>}</p><p>.stylewadah {background: #000;</p><p>padding: 5px;</p>} 

3. Letakan kode ini diatas "</head>"

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/></p><p><script type='text/javascript'></p><p>$(document).ready(function(){</p><p>    $(&quot;.tombol-komentar&quot;).click(function(){</p><p>        $(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);</p><p>        $(this).toggleClass(&quot;active&quot;);</p><p>        return false;</p><p>    });</p><p>});</p></script> 

4. Terakhir letakan kode ini dibawah "<b:includable id='comments' var='post'>"

<center></p><p><div class='stylewadah'></p><p><a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'></p><p><b:if cond='data:post.numComments == 0'>No Comments be the first<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if></p><p></a></p><p></div></p></center> 

Terakhir, Save Template!

Demikianlah tutorial memasang Show Hide Comment Slide Out-nya.. mohon maaf apabila ada kesalahan pada ketikannya, atau ada hal yang menyinggung.


NOTE : 
- gantilah warna background pada CSS sesuai tampilan Blog sahabat.
- edit dan sesuaikan denga karakteristik Blog sahabat.
-ada baiknya sahabat lakukan "BackUp" template sebelum melakukannya.
- agar tidak memakan ukuran copy dan konversi CSS diatas (hanya CSS saja).

Posting Terkait: tutorial