Membuat Show Hide Komentar Valid HTML5 dan CSS3

Membuat Show Hide Komentar Valid HTML5 dan CSS3 - Ficri Pebriyana
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...

17 Komentar untuk "Membuat Show Hide Komentar Valid HTML5 dan CSS3"

  1. Saya coba dulu ya sob.. Keren tutorialnya...

    http://gamesandroidasik.blogspot.com/2014/04/games-android-cristiano-ronaldo-footy.html

    BalasHapus
  2. Keren nih biar sidebar widget gak panjang (y)

    BalasHapus
  3. Waah pasti mantap nih,, biar tidak terlalu panjang,,!! hehe

    BalasHapus
  4. cara buat efek menu melayang gimana mas?

    BalasHapus
    Balasan
    1. silahkan baca disin mas...
      http://ficripebriyana.blogspot.com/2014/04/cara-membuat-menu-navigasi-melayang.html

      Hapus
  5. kok tidak work ya gan? atau karena beda template ??

    BalasHapus
  6. boleh juga nih, biar rapi commen nya, makasih sob

    BalasHapus
    Balasan
    1. sudah berhasil saya pasang di blog saya, terimakasih banyak gan

      Hapus
  7. Kalau tidak ada yang komen bisa coba cara ini juga gak? ^_^

    BalasHapus
  8. Makasih Boss
    Script Hide Open goood

    BalasHapus
  9. thanks gan. langsung d pramtekin

    BalasHapus
  10. makasih ya bro.. ada khusus untuk button ga hiden show nya

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting