CARA MEMBUAT KOLOM KOMENTAR BLOG AUTO HIDE TERBARU

CARA MEMBUAT KOLOM KOMENTAR BLOG AUTO HIDE TERBARU

Cara Membuat Kolom Komentar Blog Auto Hide | Blog Ic Creem update lagi nih  Sebenarnya saya sudah beberapa kali memposting tentang komentar pada blog yaitu Cara Menggabungkan 3 Kotak Komentar Blogger, Facebook dan Twitter , dan Cara Menggabungkan 2 Kotak Komentar Blogger Dan Facebook . Sekarang saya akan mmemposting tentang komentar blog juga yaitu Cara Membuat Kolom Komentar Blog Auto Hide ( Kotak komentar ini bisa sembunyi dan muncul secara otomatis ). Tahukan sobat tentang auto hide kotak komentar ? pastinya sudah tidak asing lagi ditelinga sobat blogger yang sudah lama malang melintang didunia blogger .

Screenshot sebelum dibuka 

Screenshot sesudah dibuka 

Cara Membuat Kolom Komentar Blog Auto Hide adalah membuat kolom komentar pada blog yang nantinya akan dibuat dengan menampilan sebuah tombol dimana fungsi dari tombol itu untuk memunculkan dan menyembunyikan form komentar yang ada pada blog, dan bentuk dari kolom komentar tersebut seperti halnya dengan tombol spoiler.

Jika di tekan tombol tersebut maka akan muncul form komentar dan jika di tekan lagi tombol tersebut maka akan menyembunyikan form komentar yang tadi telah terbuka. cara membuat auto hide kotak komentar atau membuat show hide komentar caranya cukup mudah,langkahnya hanya menambahkan kode java script dibawah ini yang nantinya akan berfungsi sebagai perintah untuk menyebunyikan kotak komentar blog.

Membuat Kolom Komentar Blog Auto Hide berguna untuk membuat blog menjadi lebih simple jika nantinya artikel yang terdapat pada postingan blog telah ramai dan banyak dengan komentar dimana komentar tersebut sebelumnya telah memanjang kebawah postingan sampai jumlah akhir dari komentar yang membanjiri blog tersebut. Bisa anda bayangkan jika postingan artikel anda telah ramai dikunjungi dan di banjiri komentar sampai ratusan bahkan ribuan maka akan seperti apa nantinya. Untuk Cara Membuat Kolom Komentar Blog Auto Hide tidaklah sulit, karena hanya dengan membuka template editor dan menambahkan sedikit kode saja maka form kolom komentar pada blog tersebut sudah bisa menjadi auto hide yang layaknya seperti tombol spoiler. 

Berikut Cara Membuat Kolom Komentar Blog Auto Hide :

1. Login ke blogger, Klik Template > Edit Html.

2. Copy kode berikut ini dan letakan tepat diatas kode </head> pada template blog anda.

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

3. Kemudian letakan kode berikut ini tepat diatas kode ]]></b:skin>

#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}
#comments {
display : none;
}
.stylewadah {background: #none;
padding: 5px;
}
a.tombol-komentar{background: #f9f9f9 url(http://i1327.photobucket.com/albums/u677/Andes_Rizky/down-arrow_zps19d8ad93.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000}
a.tombol-komentar:hover{background: #B580FE url(http://i1327.photobucket.com/albums/u677/Andes_Rizky/down-arrow_zps19d8ad93.gif) 85% 55% no-repeat;display:block;padding:15px 40px 15px 15px;border:1px solid #000000;}
a.active.tombol-komentar{background: #ccc url(http://i1327.photobucket.com/albums/u677/Andes_Rizky/up-arrow_zps79d542b5.gif) 85% 55% no-repeat;border:1px solid #000000}

4. Lalu taruh kode berikut ini, tepat di bawah kode <b:includable id='comments' var='post'>

<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'>Buka Komentar<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>

5. Klik "Simpan Template" dan lihat hasilnya.

Catatan : Ganti kode yang berwarna Merah dengan URL gambar sobat