Cara Membuat Tombol Show Hide Komentar Pada kotak komentar

Post oleh : Unknown | Rilis : 06.10 | Series : Tutorial

Ruang/blog kita sangat terbatas, nah jika anda ingin membuat loading kotak komentar pada blog anda lebih ringan dan cepat, anda bisa menggunakan tombol show/hide komentar ini sperti yang saya gunakan ini... Cara ini berguna untuk mempersimpel kotak komentar sobat , dan cukup mengklik tombol lihat komentar pengunjung blog sobat bisa berkomentar dan melihat komentar yang ada dan jika mereka klik sembunyikan maka semua komentar akan tersembunyikan ...

Cara membuat tombol show hide komentar pada blog ; 
1. Login ke blogger
2. Pilih template
3. Pilih edit html
4.Klik lanjutkan >> centang expand template widget
5. Cari kode </head> , untuk mempermudah pecarian tekan ctrl + f
6.  Lalu copas kode berikut , tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHOTWBk4gCFBGeiSiefvYkTAOOe0TTT1QYE3DOx4d9W-AvoBoH8uXVOUprm89NYealWB4N4NP2StFgM2pdPvUk-9l9A1yNKj-a5lDAML-_RgvhOAsb8CALvPSkLtOT68gsVKopnTs25dx/s1600/View+Comment.png'/></a></center>",
closePanelText = "<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBh-fbYOcJNYXsjlvgxoXoEe8ZQFdesMV7n2Oj6CpYf5mMLTFKcjlxmY1nNyUUsGQoWTR9kzFTZZl-JM1j7GAHzJc4Udc8eNKRKmTrzROb0oGBkgcZqdBfX7tIeIzL05oqx_CFM87WMafi/s1600/Hide+Comment.png'/></a></center>",
slideDownPanelSpeed = 800,
slideUpPanelSpeed = 300;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://misbahudin-dcaesga.googlecode.com/files/show-hide.js' type='text/javascript'/> 

7. Cari kode  ]]></b:skin>
 8. Lalu copas kode berikut, tepat di atas kode  ]]></b:skin>

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}  

 9. Lalu klik simpan template dan lihat hasilnya


Referensi : http://www.adityareinaldo.com/2012/12/cara-membuat-auto-hide-komentar-di-blog.html

facebook

twitter

Tweet

google+

linkedin