Membuat Show Hide Komentar Valid HTML5 dan CSS3

Membuat Show Hide Komentar Valid HTML5 dan CSS3 - Membuat komentar blog dengan tombol show dan hide komentar memang mudah karena blog Ficri Pebriyana akan membagikan tutorial cara membuat tombol show hide komentar blog valid HTML5 dan CSS3. Kode script yang saya bagikan ini sudah valid html5 dan css3 karena sebelumnya sudah pernah saya coba, dengan menggunakan atau memasang tombol show hide pada kotak komentar blog mungkin akan sedikit membuat 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.

Membuat Show Hide Komentar Valid HTML5 dan CSS3 ini 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 komentar pada artikelnya tidak masalah juga untuk mencoba tutorial membuat tombol show hide komentar pada 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 : Kode Warna HTML.

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

Sekian artikel mengenai Membuat Show Hide Komentar Valid HTML5 dan CSS3. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini