Membuat Show Hide Comment

Comen show hide, buka tutu7p komen, komen hide 
Membuat Show Hide Comment-Sebuah blog kebanyakan menerapkan kolom berkomentar, namun sangat banyak sekali blog atau web yang memiliki pengunjung banyak dan komentar di blog tersebut pun begitu menumpuk, hal ini mungkin salah satu penyebab loading blog agak lama, karena blog harus menampilkan semua komentar secara bersamaan dengan pembukaan suatu artikel.

Atas dasar itu maka Kolom Tutorial™ pada sore ini akan membahas tentang cara pembuatan Kotak Komentar yang memiliki efek Show Hide alias Terbuka dan tertutup.

VIEW A DEMO

Untuk Tutorialnya Silakan di Simak:-

1. Log in ke Akun Blogger > Template > Edit HTML
2. Masukan kode berikut ini sebelum 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 = "Show Comments",
closePanelText = "Hide Comments",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;

jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('kerenPanel')
            .before('<a class="openpanel" href="#">' + 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>

3. Masih di edit HTML Masukan kode CSS dibawah ini diatas kode ]]></b:skin>
a.openpanel {
  display:block;
  width:100%;
  height:40px;
  padding:0 0;
  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:0;
  height:0;
  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:0;
  -webkit-transition:all .15s ease-in-out;
  -webkit-transform-origin:50% 1px;
}

div.kerenPanel {
  padding:10px 20px 20px;
  margin:0 0 !important;

Note :
Jika ingin seperti pada demo silakan ganti :
Show Comments dengan URL Image
<img src='http://4.bp.blogspot.com/-0-Wb3EfOd7c/UVFY9nAmQ3I/AAAAAAAABrM/GHI6fNa3yfE/s1600/Show+Comment+alexjoen.png'/>
Hide Comments dengan URL Image
<img src='http://3.bp.blogspot.com/-0Sr_uUH1Zgg/UVFY9WexFkI/AAAAAAAABrI/fk2jb8uyAnM/s1600/Hide+Comment+alexjoen.png'/>
Demikian artikel sore ini semoga bermanfaat..............

Berlangganan update artikel terbaru via email:

53 Responses to "Membuat Show Hide Comment"

  1. mantap....................................................

    ReplyDelete
  2. thank sob, terimakasih juga ats kunjungannya

    ReplyDelete
  3. panjang juga nih kodenya .

    ReplyDelete
    Replies
    1. Lumayan miz, panjang hehhehhehehh

      thank atas kunjungannya

      Delete
  4. tutorial2 emang selalu keren.. apa lagi yg berkaitan dengan blog dan pengaturannya ;) keren!

    ReplyDelete
    Replies
    1. Terimakasih banyak mas atas support serta kunjungannya.

      Delete
  5. okee nih bang, tankyu udah berbagi tutorialnya :)

    ReplyDelete
  6. tutorialnya sangat bermanfaat sekali dan bisa membantu saya teman
    terima kasih sudah berbagi

    ReplyDelete
    Replies
    1. Sama2 mas, terimakasih banyak atas suppurt serta kunjungannya.

      Delete
    2. sama sama sobat, saya juga sangat berterima kasih dengan tutorial yang bermanfaat ini

      Delete
  7. Scriptnya bikin loading lemot gak Om ? hehe

    ReplyDelete
    Replies
    1. Script ini gak terlalu berpengaruh terhadap loading mas, soalnya tidak seperti widget lainya yang langsung muncul.
      kurang lebih begitu mas, terimakasih atas kunjungannya.

      Delete
    2. Komentar di blog saya sudah hasil modifikasi Mas, apa gak pengaruh nantinya ? maksutnya apa gak malah error ?

      Delete
    3. saya udah tes di beberapa blog mas, dan hasilnya ok.
      Jika mas ingin menerapkan trik ini untuk menjaga kemungkinan yang tidak diinginkan lebih baik template blog punya mas backup dulu, baru trik ini dijalankan.
      terimakasih banyak mas atas kunjungannya.

      Delete
  8. wah mantap nih bang.... saya coba ya

    ReplyDelete
    Replies
    1. Terimakasih banyak mas atas support serta kunjungannya

      Delete
  9. oya mau minta tolong .. bisa gak yang ini http://4.bp.blogspot.com/-USpj63umlUU/UUP-bS6S2sI/AAAAAAAABk0/R5rhj0HfOTk/s1600/alexjoen-Vertikal+Sosial+Share+With+Animation123.png tapi facebook dan twitternya dihilangkan :) . :D
    maap merepotkan.

    ReplyDelete
    Replies
    1. iya.. ditunggu nih, kalo udah kirim ke blogku ya. makasih sebelumnya.

      Delete
    2. alhamdulillah request terjawab, silakan klik link ini dan download ini versi notepadnya, semuanya ada disana :
      http://joens-tutorial.googlecode.com/files/Script%20sosial%20share%20untuk%20miz%20tia.txt

      Delete
    3. maaf mis lupa supaya berada di pinggir jangan lupa kode dibawah ini disisipkan diatas kode <style type="text/css">
      ini kode nya :
      =========================================================
      <div style="position: fixed; bottom: 179px; left: 4px;">
      =========================================================

      Delete
    4. di ibox kak.. kodenya.. coba di cek e-mailnya.

      Delete
  10. mantap sobat tutorial membuat show dan hide commentnya.

    ReplyDelete
    Replies
    1. terimakasih banyak atas support serta kunjungannya.

      Delete
  11. wah,, kyaknya rumit bgd,
    tapi keren hasilnya, thxs

    ReplyDelete
    Replies
    1. silakan dicoba aja mas, terimakasih banyak atas kunjungannya, gak terlalu sulit ko.

      Delete
  12. keren sob tutorialnya, izin copas kodenya, terima kasih tutorialnya mas

    ReplyDelete
  13. coba...ah...tahnks mas dah berbagi...

    ReplyDelete
    Replies
    1. Silakan mas, terimakasih banyak sudah berkunjung

      Delete
  14. trmksih sob infonya sangat membantu sekali

    ReplyDelete
    Replies
    1. Sama2 gan, terimakasih juga atas kunjungannya.

      Delete
  15. asyik nih sob kayanya buat di coba..trims ya tutor nya :)

    ReplyDelete
  16. waah bagus ya tutornya,show hide commentnya di pake aahh :)

    ReplyDelete
  17. jujur saiia pingin banged pake yg bginian kang.. tapi sayang.. waktunya :( hiks makasii kang buat tutorialnya iia :) pasti bermanfaat banged nii buat banyak orang :)

    ReplyDelete
    Replies
    1. sama2 mas, waduh terkesan banget nih bisa dikunjungi mas,

      Delete
  18. Berguna banget tutorialnya mas! Kapan-kapan bakal saya coba nih. :)

    ReplyDelete
    Replies
    1. silakan mas terimakasih banyak atas kunjungan mas daniel

      Delete
  19. Wah makasih tutorialnya. Btw byk juga tutorial yang laen.. Mantap dah. Bookmark dulu.

    ReplyDelete
    Replies
    1. Silakan mas, terimaksih banyak ats kunjungannya.

      Delete
  20. Izin nyimak aja dulu ya sohib sekalian tak comot buat bekal perbaikan.. Btw, semoga mas sohibnya bisa men-share-kan lagi pencerahan yg lainnya..

    ReplyDelete
    Replies
    1. Silakan mas, terimakasih banyak ats support serta kunjungannya. salam sukses selalu.

      Delete
  21. kunjungan siang mas mau nganterin kopi heheheh

    ReplyDelete
    Replies
    1. Waduh pas banget nih datengnya untuk ane lom nyeduh kopi, terimakasih banyak oleh2nya mas,

      hik.. hik....

      Delete
  22. aku coba dan ternyata berhasil, terima kasih mas

    ReplyDelete
    Replies
    1. sama2 mas, terimakasih banyak atas kunjungannya.

      Delete
  23. mantaap nich tutornya..saya copy dulu scriptnya mas buat praktek nanti.

    ReplyDelete
    Replies
    1. silakan mas, terimakasih banyak sudah berkunjung

      Delete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel