Jquery Tab View Scroll Show Hide Widget

Viyan Pradita Sabtu, Juni 25, 2011 , ,

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery, back to tutorial blog, maaf neh sudah dua hari tidak mengUpdate blog, lagi sok sibuk di offline soalnya. Dan kebetulan juga ada sobat blogger yang request untuk membuatkan tabview ini, tp saya lupa siapa namanya. jadi pada kesempatan kali ini saya akan membahas lagi tentang cara membuat menu tab view, yang sebelumnya sudah saya share juga untuk Membuat Tab View/Widget Multi halaman Di blog, pada cara yang kedua ini pastinya akan lebih bagus, menarik dankeren tentunya, karena ditambah dengan sentuhan JQuery didalamnya. Sebagai contoh anda bisa melihatnya di sidebar sebelah kiri blog saya ini.
Dan bila belum jelas juga anda bia melihatnya pada screenshot dibawah ini:

Demo/Sceenshot

Gimana masbro, keren kan tab view widgetnya?? selain itu tabview ini juga bisa membuat blog kita terkesan rapih. Yowes, ayo mulai saja cara membuatnya.

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}

6. Setelah itu,carilah kode </head> setelah ketemu letakkan kode javascript dan jQuery berikut tepat diatasnya:

<script language='javascript' src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>

8. Simpan tempalate, dan masih lanjut neh sob... masuk ke Tata Letak/Rancangan, klik Add New Widget/Tambah Widget, lalu pilih HTML/Javascript. Kemudian letakan kode dibawah ini:

<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Tiga
</div>

9. Sampai disini anda sudah bisa membuat jquery tab view scroll show hide widget. dan jangan lupa simpan.


Keterangan:
Kode bercetak tebal gantilah/isilah dengan widget yang sobat inginkan.
dan untuk kode CSS, silahkan diedit dan sesuaikan dengan template sobat. dan bila tampilannya mau mirip sepeti blog saya, jgn lupa tinggalkan komentar, sebisa mungkin akan saya bantu.
Dan lagi, bila ditemplate anda sudah ada jquery-1.3.2.min.js?? berarti untuk file.js'nya tidak perlu ditambahkan lagi.

Begitulah kiranya Cara Membuat Tab View dengan Efek Animasi Gulung Jquery, selamat mencoba, semoga bermanfaat.

Article Information:
Description: Jquery Tab View Scroll Show Hide Widget
Reviewer: Viyan Pradita - Itemreviewed: Jquery Tab View Scroll Show Hide Widget - Rating: 4.5

Ditulis Oleh :

Artikel Jquery Tab View Scroll Show Hide Widget ini dipublish pada hari: Sabtu, Juni 25, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

39 komentar
Terjun Ke Kolom Komentar

  1. Keren Bro.. siap psng :D

    BalasHapus
  2. Setelah tadi saya coba ternyta berhasil.. thanks yaw gan..

    BalasHapus
  3. @Exitoos: Ok, silahkan masbro :)

    @Blogging With Me: Whehe.. sipp, thank ya :D

    BalasHapus
  4. Ini yang ane tunggu-tunggu, Gan! Mantafff dah! :D.

    BalasHapus
  5. Banyak AMat Kodenya.........

    BalasHapus
  6. @na2ngismail: Sip bro :D

    @Pertamax: Kode CSS di kompres lagi sob, biar gak kelihatan banyak :D

    BalasHapus
  7. waduh, posting baru sob. Langsung aj k TKP

    BalasHapus
  8. gan, cara masukkan label dan archives blog di tab menu tu gimana ?

    BalasHapus
  9. @Ridho Fikri Almi: itu caranya manual sob... :)

    BalasHapus
  10. Thnk's bnget info'y, tpi kok di blog saya gak terlihat seperti yang di atas tolong di cek yach.. makasih...

    BalasHapus
  11. @Recha Seprina: Iya soalnya udah saya edit untuk tampilan diblog saya. sedangkan untuk tutor diatas itu tampilannya standart. jadi perlu diedit lagi agar sesuai dengan tampilan di blog sobat. :)

    BalasHapus
  12. Kenapa setelah di klik susah banget tampil isinya....???

    BalasHapus
  13. @Recha Seprina: Coba cek file.js nya, ada yang duoble nda ?? blognya keren eue :D

    BalasHapus
  14. gampang dan bermanfaat buat saya nue artikelnya,,,
    salam kenal gan,,,
    mampir ya,,,,

    http://search4ll.wordpress.com

    BalasHapus
  15. gan ngatur besar menunya gimana ,gan??

    n thank's bua inpo'nya

    BalasHapus
  16. @sunep: Sip, salam kenal juga, makasih dah berkunjung mas :)

    @donie_radageloo: editnya dibagian CSS'nya sob, yg ada pada langkah no 5.

    BalasHapus
  17. mas kalau buat kode scrol tpi gak kelihtan sma sekali yg didlam sblm di klik gmn? bingung nih

    BalasHapus
  18. @Kunci Kord Gitar: Bisa kasih contoh screenshot'nya sob, biar jelas apa yg sobat maksud. atau yang seperti ini (cari saja di blog ini "Cara Membuat Floating Spoiler Menu Di Blog"

    BalasHapus
  19. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  20. di tempat ane kok jadinya tab1-3 ke bawah yak mas bro

    tab 1
    tab 2
    tab 3

    yang di blog mas bro kan ke samping

    tab 1 tab 2 tab 3

    BalasHapus
  21. gan kok si sharing sama saya sama ya masalahnya..apa ada yng salah ya waktu edit html nya..padahalkan cuman copas aja...pecerahannya ga...

    BalasHapus
  22. gan.,, gmn yya cara add html "Join this site" n "about me" ke dalam menu tab ini.

    kalo dilihat hasil akhir'a kira2 kaya gambar ini gan;

    http://goo.gl/ZWXPB

    thanks before.

    BalasHapus
  23. @Sharing And Download Center: Weleh :D
    kalau sesuai tutorial diatas seharusnya ya gak gitu sob, coba cek jg untuk file.js-nya barangkali ada yang dobel, coz bisa error kalau sampai ada file.js yang sama.

    @Tuyulz: lebar kolom di CSS coba diedit sesuai lebar sidebarnya.
    penempatan file.js nya.
    blm saya review jd kurang tw jg deh.

    @ihsan : joint this site (pakasi saja google friend connect) untuk profile, bisa diedit sediri masbro.

    BalasHapus
  24. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  25. btw kok diblog saya ga ada kotak'a yya [pembatas].,,
    coba cek digambar ini., apa yg ketinggal yya.. prasaan ga ada. hhe

    coba cek digambar ni:
    http://i399.photobucket.com/albums/pp80/ihsan_saidi/gaadapembatas.jpg

    mohon bantuan'a.,,

    BalasHapus
  26. @ihsan: Iya, itu sebenarnya tinggal di setting di kode CSS na mas :)
    Atau silahkan dicoba lagi, ganti kode CSS'nya (langkah no 5). KOde di atas sudah saya samakan dengan kode di blog saya ini. dan hasilnya pasti sama :)
    selanjutnya tinggal diatur untuk warnanya saja.

    BalasHapus
  27. cara ngatur lebarnya gmn gan, bingung..???

    BalasHapus
  28. @AHNE: Pastinya di kode CSS-nya mas, pada langkah no 5.

    BalasHapus
  29. ko aneh..pas loading browser awal...gx optimal tampilannya (isi dari semua tab pada ke bawah dulu,ada solusi kang apa karena css-nya?,tapi keren juga bang ! thx

    BalasHapus
  30. @vir0e5: Yup, betul sob, bisa juga karena koneksi yang lambat, istilahnya perlu loading, karena butuh waktu untuk memanggil javascriptnya, jadi kalo koneksi rada lambat, pasti kaya gitu sob.
    Tp hasil akhir sukses kan :D

    BalasHapus
  31. sukses ;) ... bener juga sich sob emang koneksi rada lambat disini..hehe..

    BalasHapus
  32. mksudnya gmn sih,, cara masukin HTML Terbaru,komentar,terkait sperti itu?

    BalasHapus
  33. Sayangnya fungsi Jquery diblog ane tidak bisa diimplementasikan gan..!! sebenernya ingin sekali, disamping memperkecil ruangan fungsi gadget & keren juga pastinya. Sukses selalu untuk artikelnya sahabat. Salam Sahabat Blogger "Berbagi Kreativitas"

    BalasHapus
  34. Salam kenal Sob...
    saya ijin pakek template sobat y...
    saya juga nambahin tab view scrool ini, tapi ada masalah dikit neh sob...

    posisi menunya sebelah kiri, saya pengennya sih center...
    trus, di dalamnya saya tambahin widget recent post menggunakan java dari postingan sobat sebelumnya... Tapi, tulisannya nggak nampak sob, kalo mouse diarahkan ke menu itu linknya ada....

    mohon bantuaanya ya Sob...
    silahkan lihat dulu k blog saya...
    thanz....

    :)

    BalasHapus
  35. Gan ane mau nanya ni untuk kode
    1 : Taruhlah kode HTML/Javascript anda di Tab Satu
    2 : Taruhlah kode HTML/Javascript anda di Tab Dua
    3 : Taruhlah kode HTML/Javascript anda di Tab Tiga
    itu gima gan hohon bantuanya...
    http://dhekaphe.blogspot.com/
    ;)

    BalasHapus
  36. salam knal gan,,aku masih baru nih nyoba" blog...

    -sudah sukses terpasang,,cuma antara judul yang satu sama yang lainya kok gak ada garis pemisahnya ya??
    -minta bantuanya gan...~x

    thanks:D

    BalasHapus
  37. mau tanya niy suhu hehe
    Code diatas dah berhasil jalan sempurna :))
    tapi hehe kok nav bar saya jadi tidak bisa keluar childrennya ya?
    alias drop downnya jadi ga aktif. mohon pencerahannya :((
    blog saya http://industrialengineerindonesia.blogspot.com

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers