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 :
• Pertama tama Buka masing masing Account blog kamu!
• Pilih Layout/Design → Edit HTML
• Pastekan kode berikut tepat di bawah kode <head> :
• Kemudian cari kode yang mirip dengan kode berikut :
• Kemudian Save dan Walaaaa, Jadi!
Sekian dulu ya dari posting ini, semoga memberikan yang terbaik :) Jika ada keluhan silahkan berkomentar di bawah ini :)
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 :
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>• Kemudian Pastekan CSS nya Tepat diatas kode ]]></b:skin> :
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();});});
</script>
.slidingDiv {Bisa di Edit Seperlunya.
background-color:none;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
color:#000;
}
• Kemudian cari kode yang mirip dengan kode berikut :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>• Paste kan kode berikut dan letakan menjadi kode berikut :
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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>
<a href="javascript:void(0)" class="show_hide">Show/hide</a>Dan letakan kode diatas kedalam kode sebelumnya menjadi
<div class="slidingDiv"></div>
<a href="javascript:void(0)" class="show_hide">Show/hide</a>Kode TITIK2 merah adalah kode SKIP karna kode yang banyak itu terlalu panjang.
<div class="slidingDiv">
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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>
• Kemudian Save dan Walaaaa, Jadi!
Sekian dulu ya dari posting ini, semoga memberikan yang terbaik :) Jika ada keluhan silahkan berkomentar di bawah ini :)
pertamaX dulu
BalasHapuscontohnya kaya punya mas ini ya...?
BalasHapuscara buat Font bershadow / berbayangan gmn mas ?
jawab di Blog saya ya :D
To Mbah Qopet : Sip pertamaxnya! iya koemntar disini bro. udah saya tulis disana ya :)
BalasHapuskalau saya dulu pasang juga, tp dah nggak lagi..trus pakek tab buat 3 komentar sekaligus tp dah enggak lagi juga...
BalasHapussekarang mah normal lagi ajah :> wekekekkkk :D
tinggal pasang lagi sajah kalo mau lagi mah...mayes :P
good good...blognya good bos :)
test
Hapustest
Hapusaaahhh dah hampir semua saya lihat isi postingannya...MANTAP BOS
BalasHapustapi kalo buat yang gag paham, apa gag ngebingungin nantinya?
BalasHapusbtw, kok gag dijelsin sekalian manfaatnya buat apa, nge-show-hide komeng..?
keren sobb... !!
BalasHapusyg tertutup sama kotak comment nya bisa nggak sobb ???? :)
Tombol Show/Hide nya bisa di modifikasi g sob :D ??
BalasHapuswahhh keren bgt tuh sob show hide pakai jquery,, coba ahhh,, thx ats tutornya sob,,
BalasHapusTo Beben koben : Kalau pakai tap sepertinya bisa juga tuh sob, tapi lebih ribet tentunya :D, Thanks ya om sudah mampir2 hehehe
BalasHapusTo 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
Tutorial Blog yang sangat keren sob......
BalasHapusLanjutkan. :D
saya hampir melupakan pelajaran ini,
BalasHapusterima kasih sudah mengingatkan saya kembali
To TejaHtc : Seperti orangnya gak? :))
BalasHapusTo ditha7: Saya telah mengingatkan? waw luar binasa :D heahaha
awan melayang :D
BalasHapusSebenarnya guna hide/show itu untuk menyembunyikan...
BalasHapustapi 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 ;;)
To Beben : Iya bagaimana caranya awan melayang itu. kok malah tabbed interface sih? :D hahaha
BalasHapusCuman untuk sementara doang kok hehe
Kunjungan sob ! ! !
BalasHapusinfonya bagus sob,
aq coba dlu d blog q ,hehe :D
To Naufal : Ya sob! makasih ya sob :D silahkan dicoba dan nikmatilah :D
BalasHapusmungkin sangkin tertegun akan keindahan blog sayah sob brwowsingan entenya :Love :D
BalasHapusente mah gak dibaca yak postingannya???
BalasHapusdah ada links menuju kesana juga...zzzz
Awan melayang
Blah pret deh ah ... +_+
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
BalasHapusNih mantep tapi kalo kebanyakan script jquery entar blognya bisa jadi berat nih mas,tapi gk papa lah saya praktekin :D
BalasHapusTo Musa : iya juga sih hehehe :D tapi gak apa apa,
BalasHapusTo 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
BalasHapusmantap nih
BalasHapusTo Beben : yadeh yayayayayayaa.... =)) wkwk
BalasHapusTo camp : Thanks ya bro :)
masa iyya kabur sobb ????
BalasHapusyg penting tulisan show nya jelas .... !! :)
To Shinobi : Yakan menurut orang yang baru melihat Blog atau gak tau cara shownya :)) hahaha
BalasHapusuDAH Coba-coba masih belum bisa ada kesalahan dimana ya... ??
BalasHapusTo 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.
BalasHapuslive demo nya ada nga..? Polskahackrew was here
BalasHapuskeren..udan ketemu hehe
BalasHapusTo polskahackrew : hahahaha aneh deh sobat :))
BalasHapusbagus Nih. . . . trik nya, tapi punya saya, pake yg model chatbox wkwkwkwkwk
BalasHapusTo Zh!nTho : Iya bro untuk Chatbox juga bisa, tingal di ganti aja kode OBJECTnya
BalasHapusane bagi Award buat ente sorry baru kasih tau :D
BalasHapusTo Mbah Kopet : Thanks ya bro udah ngasih awardnya kepada saya :)
BalasHapusmau ikut sob ?? serius nih ?
BalasHapusadd FB saya -> www.facebook.com/squdtz.artcrime
klo berminat join -> Disini
BalasHapusTo Mbah Kopet : kalau boleh ya saya mau, kalau gak boleh ya gpp :) Just 4 Fun
BalasHapusboleh jg tp ini ngeberatin blog gk?
BalasHapusTo Cek and ReCek Info : Belom tau kalau gak di coba :P
BalasHapusPena hadir dan absen siang gan...
BalasHapusAlhamdulillah berhasil diterapkan gan tipsnya..Makasih gan
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?
BalasHapuswah keren gan, show hide di kotak comment ada jg ya
BalasHapusnice info :D
wah promosi ni :p wkakakak
BalasHapusTo Tautanpena : saya udah lihat hasilnya gan, keren :D
BalasHapusTo 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 :))
wow , ribet juga ya gann, ane coba dulu dehh.. :D
BalasHapustips yang bagus tw,,, ;)
BalasHapuswowh, keren nih, boleh dicoba om, , ,
BalasHapusTo Tituitbom : gak ribet kok :)
BalasHapusTo Belajar Forex : thanks sob :)
To Babblemint : silahkan dicoba cobi :)
kayaknya kudu dicobain ini buat kotak komentar saya sob..thanks infonya..
BalasHapusTo Ageboy : hehehehe boleh banget sob :) hihihi
BalasHapuswah......sudah mondar-mandir....cari trutorial pasang show/hide......gak dapat2......
BalasHapusternyata disini ada, dan lengkap sama tips2nya......
trimakasih infonya boss.....slm kenal....
To Soni : hehehhee akhirnya ketemua ya? alhamdulilah :) Salam kenal juga ya sobat :)
BalasHapusAkhir dari sebuah oencarian, dicoba dulu gan.... Salam sukses.
BalasHapusTo Sumcara : alhamdulillah ya sob sesuatu banget :))
BalasHapusbelajar lagii.. dapet ilmuuu.. ;)
BalasHapusmantap nih pake jquery tapi taku beratin blognya hehe
BalasHapusTo Alam Perwira: silahkan di pelajari sob :)
BalasHapusTo sampeweweh : asal jangan kebanykan jquery enggak kok sob :)