Show/Hide pada Menu komentar dengan jquery

Sobat Blogger Sudah pernah lihat menu bagian dari komentar blog kita buat tambahan Menu show/hide? atau jelasnya seperti menu dengan tombol untuk membuka dan menutup menu yang kita inginkan, dan untuk sekarang saya coba terapkan pada Menu Form Komentar.
Untuk Demonya bisa dilihat >>>> Di Sini

• Login blogger
• Rancangan, Edit Html
• Download Template Lengkap
• Centang menu Expand Template Widgets

Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

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

6. Berikutnya simpan Script berikut diatas kode </head> :

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

7. Cari kode seperti dibawah ini (ctrl+F untuk mempermudah pencarian) :

</b:includable><br /> <b:includable id='comments' var='post'><br /> <br /> 8. Jika sudah ketemu simpan kode berikut dibawah kode yang dicari tadi :<br /> <center><br /> <div class='stylewadah'><br /> <a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br /> <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><br /> </a><br /> </div><br /> </center><br /> <br />

8. Simpan template dan lihat hasilnya. Silahkan dikembangkan sesuai keinginan. Semoga bermanfaat.

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 22.35 and have 1 komentar