Cara membuat kotak komentar menjadi show hide

Cara membuat kotak komentar menjadi show hide  - Kotak komentar sangatlah penting di dalam dunia blogger karena dengan adanya kotak komentar kita dapat menyampaikan kritik dan saran sesama para blogger maupun website. Namun dalam waktu yang lama dan makin banyaknya komentar yang masuk ke blog kita membuat tampilan blog kita sangat ruwet menurut saya. Mengapa demikian sob karena panjangnya scrol bar dari atas sampai bawah apa bila banyak komentar yang masuk. Bayangkan jika dalam 1 posting kita terdapat 1000 komentar seberapa panjangkah scrolbar pada blog kita. Maka dari itu ada tips yang menurut saya sangat jitu untuk mengatasi masalah di atas. Mau tau caraya langsung saja ikuti langka-lankahnya sob :


  • Pertama login ke blog sobat.
  • Selanjutnya download dulu templatenya, hal ini dilakukan untuk mengantisipasi bila terjadi kesalahan
  • Pada menu pilih Rancangan ➨ Edit HTML.
  • Pada Edit Template jangan lupa untuk mencentang  Expand Template Widget,
  • Cari  code ]]></b:skin> 
  • Apa bila sudah ketemu sobat copast kode di bawah ini tepat di atas kode di atas
#comments {
display : none;
}
.tombol-komentar a{
text-align: center;
}
.stylewadah {background: #CCC;
padding: 5px;
}
  • Selanjutnya cari kode </head>
  • Apa bila sudah ketemu sobat copast kode di bawah ini tepat di atas kode di atas 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(&quot;.tombol-komentar&quot;).click(function(){
        $(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        return false;
    });
});
</script>
  •  Cari kode seperti kode yang ada di bawah ini 
</b:includable>
<b:includable id='comments' var='post'>
  • Apa bila sudah ketemu pastekan kode di bawah ini tepat di bawah kode di atas 
 <center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<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>
</a>
</div>
</center>
  • Terakhir simpan dan lihat hasilnya.
Langkah-langkah di atas sudah saya terapkan pada blog Master dan berhasil dengan sempurna. Sekian dulu hasil Master Copast kali ini artikel Tutorial Blog,   yang berjudul Cara membuat kotak komentar menjadi show hide. Semoga bermanfaat Master Copast

4 komentar:

Rudy Hartono mengatakan...

nice share

Admin Andreas mengatakan...

kunjungan balasan, sambil baca2 artikelnya
salam kenal sob

Jingga mengatakan...

Jalan sop,tapi kenapa tampil juga diberanda,mohon pencerahannya kawan.Makasih tipsnya.

Copast Master mengatakan...

@Rudy : Makasih sudah berkunjung sob..

Andreas : Silahkan sob trimakasih sudah berkunjung..


@jingga : kode html yang paling bawah sudah benar blum ente letakin di bawah kode




di teliti kembali sob.. mungkin ada kesalahan. atau kalo gag template sobat yang gag mendukung cara ini

Posting Komentar

◄ Newer Post Older Post ►