Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3

Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3 - Untuk membuat tombol show dan hide pada komentar blog memang sangat mudah ANDIKNET akan membagikan tutorial Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3. Untuk Kode script yang akan saya bagikan ini sudah valid html5 dan css3 karena sebelumnya sudah pernah saya coba, dengan memasang tombol show hide pada kotak komentar blog mungkin bisa sedikit membuat loding blog menjadi lebih ringan, apalagi jika banyak komentar pada blog kita tentunya ini akan membuat halaman postingan terlalu panjang kebawah sehingga menjadikan loading blog lebih lama, untuk menjadikan lebih singkat dan loading yang cepat maka gunakanlah show hide komentar ini pada blog Anda. 

 Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3 tidak ada pengaruhnya terhadap SEO dengan membuat efek show hide atau tampilkan dan sembunyikan pada kotak atau kolom komentar blog akan sedikit lebih cantik dan hemat, cara ini memang sangat cocok digunakan untuk Blogger yang selalu dibanjiri dengan komentar setiap harinya, namun bagi blogger yang memang masih sedikit komentarnya (seperti blog ini) tidak masalah juga untuk mencoba menambah Show Hide pada Komentar blog. Langsung saja bagi Anda yang ingin menggunakan show hide komentar blog valid html5 dan css3 silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>

/*Show Hide*/
a.openpanel {display:block;border:1px solid #2AAADC;text-align:center;font-weight:bold;line-height:30px;background:#161616;transition: all .15s ease-in-out;transform-origin: 50% 1px;position:relative;
}a.openpanel em {display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#161616;border:1px solid #2AAADC}a.openpanel.active em {top:6px}div.paneline {height:0px;transition: all .15s ease-in-out}div.kerenPanel {padding:10px 20px 20px;margin:0px 0px !important}

Catatan :
Warna garis 2AAADC.
Warna background 161616.
Untuk mengganti warnanya silahkan cari kode warnanya disini

5. Cari kode </head>
6. Copy kode jQuery dibawah ini, lalu Paste diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Show Comments",
closePanelText = "Hide Comments",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
jQuery(function() {
jQuery(panelSelector).hide()
.addClass('kerenPanel')
.before('<a class="openpanel" href="#" title="Comments">' + openPanelText + '<em></em></a>')
.after('<div class="paneline"></div>');
jQuery('a.openpanel').toggle(function() {
jQuery(this).addClass('active').html(closePanelText + '<em></em>');
jQuery('div.kerenPanel').slideDown(slideDownPanelSpeed);
return false;
}, function() {
jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
jQuery('div.kerenPanel').slideUp(slideUpPanelSpeed);
return false;});
});
//]]>
</script>

Catatan :
Show Comments bisa diganti dengan Tampilkan Komentar (atau text lainnya).
Hide Comments bisa diganti dengan Sembunyikan Komentar (atau text lainnya).
600 dan 400 bisa Anda ganti sesuai selera Anda.

7. Klik Simpan Template