You must enable Javascript in your browser to run or open this site.

JQuery Show/Hide pada Komentar Blog

Kembali lagi bersama saya di Blog ini. Disini saya akan menerangkan Bagaimana cara membuat Show/Hide pada Komentar Blog. Sebelum kita bahas bagaimana cara membuatnya, akan lebih baik mengetahui apa itu Show/Hide? Show/Hide atau Tombol Show (mengeluarkan) dan Hide (menyembunyikan) dalam Kode Script adalah Tombol dimana jika di Event-kan (di klik, mouseover, mouseout, dan lain lain) baik akan mengeluarkan maupun menyembunyikan OBJECT.

Nah, disini saya berbicara mengenai Bagaimana cara Show/Hide Object yang Objectnya itu adalah Komentar2 blog dengan bantuan JQuery. Bagaimana sih contoh dari Show/Hide tersebut? Saksikan Review di bawah ini. Contoh untuk Show/Hide pada Object :

Show/hide
Lihat contohnya nih. Tombol Show/Hide bisa di gunakan untuk apa saja seperti ini. Kode tulisan ini bisa di ubah menjadi kode HTML lainnya atau javascript lainnya
Bagaimana cara membuat Show/Hide di komentar? Yuk ikuti cara berikut ini.

• Pertama tama Buka masing masing Account blog kamu!

• Pilih Layout/Design → Edit HTML

• Pastekan kode berikut tepat di bawah kode <head> :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();});});
</script>
• Kemudian Pastekan CSS nya Tepat diatas kode ]]></b:skin> :
.slidingDiv {
background-color:none;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
color:#000;
}
Bisa di Edit Seperlunya.

• Kemudian cari kode yang mirip dengan kode berikut :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:20px;' width='16px'/>
</b:if>
<b:if cond='data:comment.favicon'>
.......
</dl>
• Paste kan kode berikut dan letakan menjadi kode berikut :
<a href="javascript:void(0)" class="show_hide">Show/hide</a>
<div class="slidingDiv"></div>
Dan letakan kode diatas kedalam kode sebelumnya menjadi
<a href="javascript:void(0)" class="show_hide">Show/hide</a>
<div class="slidingDiv">
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:20px;' width='16px'/>
</b:if>
<b:if cond='data:comment.favicon'>
.......
</dl>
</div>
Kode TITIK2 merah adalah kode SKIP karna kode yang banyak itu terlalu panjang.

• Kemudian Save dan Walaaaa, Jadi!
Sekian dulu ya dari posting ini, semoga memberikan yang terbaik :) Jika ada keluhan silahkan berkomentar di bawah ini :)

62 comments

  1. contohnya kaya punya mas ini ya...?

    cara buat Font bershadow / berbayangan gmn mas ?

    jawab di Blog saya ya :D

    BalasHapus
  2. To Mbah Qopet : Sip pertamaxnya! iya koemntar disini bro. udah saya tulis disana ya :)

    BalasHapus
  3. kalau saya dulu pasang juga, tp dah nggak lagi..trus pakek tab buat 3 komentar sekaligus tp dah enggak lagi juga...
    sekarang mah normal lagi ajah :> wekekekkkk :D
    tinggal pasang lagi sajah kalo mau lagi mah...mayes :P
    good good...blognya good bos :)

    BalasHapus
  4. aaahhh dah hampir semua saya lihat isi postingannya...MANTAP BOS

    BalasHapus
  5. tapi kalo buat yang gag paham, apa gag ngebingungin nantinya?
    btw, kok gag dijelsin sekalian manfaatnya buat apa, nge-show-hide komeng..?

    BalasHapus
  6. keren sobb... !!
    yg tertutup sama kotak comment nya bisa nggak sobb ???? :)

    BalasHapus
  7. Tombol Show/Hide nya bisa di modifikasi g sob :D ??

    BalasHapus
  8. wahhh keren bgt tuh sob show hide pakai jquery,, coba ahhh,, thx ats tutornya sob,,

    BalasHapus
  9. To Beben koben : Kalau pakai tap sepertinya bisa juga tuh sob, tapi lebih ribet tentunya :D, Thanks ya om sudah mampir2 hehehe
    To Dokter Gigi : Ntar juga lama lama terbiasa hheeh asal jgn kotak yang untuk komentarnya di sembunyikan, ntar gak bisa baca lagi :D
    To Shinobi : Bisa bisa saja itu sob, tapi saya takut untuk orang awam yang ingin berkomentar, malah kabur ntar haha
    To Rama88 : Silahkan di coba :) hehehe Thanks all for coming

    BalasHapus
  10. Tutorial Blog yang sangat keren sob......
    Lanjutkan. :D

    BalasHapus
  11. saya hampir melupakan pelajaran ini,
    terima kasih sudah mengingatkan saya kembali

    BalasHapus
  12. To TejaHtc : Seperti orangnya gak? :))
    To ditha7: Saya telah mengingatkan? waw luar binasa :D heahaha

    BalasHapus
  13. Sebenarnya guna hide/show itu untuk menyembunyikan...
    tapi kalo untuk kolom komentar lebih baik jangan pakek, soalnya orang jd males buat baca2 komentar yg sudah ada...
    coba pakek autoscrol trus dibatasin tingginya saja...saran saja sih ;;)

    BalasHapus
  14. To Beben : Iya bagaimana caranya awan melayang itu. kok malah tabbed interface sih? :D hahaha
    Cuman untuk sementara doang kok hehe

    BalasHapus
  15. Kunjungan sob ! ! !
    infonya bagus sob,
    aq coba dlu d blog q ,hehe :D

    BalasHapus
  16. To Naufal : Ya sob! makasih ya sob :D silahkan dicoba dan nikmatilah :D

    BalasHapus
  17. mungkin sangkin tertegun akan keindahan blog sayah sob brwowsingan entenya :Love :D

    BalasHapus
  18. ente mah gak dibaca yak postingannya???
    dah ada links menuju kesana juga...zzzz
    Awan melayang

    Blah pret deh ah ... +_+

    BalasHapus
  19. To Beben : wkwkwkwwkwk aya aya wae kau. Saya sebelumnya udah tau postingan yang tabbed interface, masa harus baca dua kali :)) hehe okedeh langsung TKPnya hehe

    BalasHapus
  20. Nih mantep tapi kalo kebanyakan script jquery entar blognya bisa jadi berat nih mas,tapi gk papa lah saya praktekin :D

    BalasHapus
  21. To Musa : iya juga sih hehehe :D tapi gak apa apa,

    BalasHapus
  22. To Farixsan Quilicuor (Faris Hardiyanto 177) : maksud saya kasih postingan itu, ada link menuju ke sana kan!!!...yeee...gimana sih dikasih elmu ganda malah gak mau...zzzz

    BalasHapus
  23. To Beben : yadeh yayayayayayaa.... =)) wkwk
    To camp : Thanks ya bro :)

    BalasHapus
  24. masa iyya kabur sobb ????
    yg penting tulisan show nya jelas .... !! :)

    BalasHapus
  25. To Shinobi : Yakan menurut orang yang baru melihat Blog atau gak tau cara shownya :)) hahaha

    BalasHapus
  26. uDAH Coba-coba masih belum bisa ada kesalahan dimana ya... ??

    BalasHapus
  27. To LaNo : Mungkin yang kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'> coz temen temenku pada bisa koq sob. Tuh si Mbah Qopet (komentator diatas) bisa gan.

    BalasHapus
  28. bagus Nih. . . . trik nya, tapi punya saya, pake yg model chatbox wkwkwkwkwk

    BalasHapus
  29. To Zh!nTho : Iya bro untuk Chatbox juga bisa, tingal di ganti aja kode OBJECTnya

    BalasHapus
  30. ane bagi Award buat ente sorry baru kasih tau :D

    BalasHapus
  31. To Mbah Kopet : Thanks ya bro udah ngasih awardnya kepada saya :)

    BalasHapus
  32. mau ikut sob ?? serius nih ?

    add FB saya -> www.facebook.com/squdtz.artcrime

    BalasHapus
  33. To Mbah Kopet : kalau boleh ya saya mau, kalau gak boleh ya gpp :) Just 4 Fun

    BalasHapus
  34. boleh jg tp ini ngeberatin blog gk?

    BalasHapus
  35. To Cek and ReCek Info : Belom tau kalau gak di coba :P

    BalasHapus
  36. Pena hadir dan absen siang gan...
    Alhamdulillah berhasil diterapkan gan tipsnya..Makasih gan

    BalasHapus
  37. bagi blog yang komennya banyak, aku kira tips ini sangat bermanfaat sekali.. thanks gan.. :D oiya, tooltipsnya ini kalo di browser IE ga jalan ya Sob?

    BalasHapus
  38. wah keren gan, show hide di kotak comment ada jg ya
    nice info :D

    BalasHapus
  39. wah promosi ni :p wkakakak

    BalasHapus
  40. To Tautanpena : saya udah lihat hasilnya gan, keren :D
    To Laptop Tablet : Memang sangat bermanfaat :D Makanya JANGAN PAKAI IE!!! :-L
    To Hafiz Andriansyah : Memang ada, sebenernya tinggal di edit edit aja :D
    Ti Cek Info : wkwokwokokw :))

    BalasHapus
  41. wow , ribet juga ya gann, ane coba dulu dehh.. :D

    BalasHapus
  42. wowh, keren nih, boleh dicoba om, , ,

    BalasHapus
  43. To Tituitbom : gak ribet kok :)
    To Belajar Forex : thanks sob :)
    To Babblemint : silahkan dicoba cobi :)

    BalasHapus
  44. kayaknya kudu dicobain ini buat kotak komentar saya sob..thanks infonya..

    BalasHapus
  45. wah......sudah mondar-mandir....cari trutorial pasang show/hide......gak dapat2......
    ternyata disini ada, dan lengkap sama tips2nya......
    trimakasih infonya boss.....slm kenal....

    BalasHapus
  46. To Soni : hehehhee akhirnya ketemua ya? alhamdulilah :) Salam kenal juga ya sobat :)

    BalasHapus
  47. Akhir dari sebuah oencarian, dicoba dulu gan.... Salam sukses.

    BalasHapus
  48. To Sumcara : alhamdulillah ya sob sesuatu banget :))

    BalasHapus
  49. belajar lagii.. dapet ilmuuu.. ;)

    BalasHapus
  50. mantap nih pake jquery tapi taku beratin blognya hehe

    BalasHapus
  51. To Alam Perwira: silahkan di pelajari sob :)
    To sampeweweh : asal jangan kebanykan jquery enggak kok sob :)

    BalasHapus