49 Membuat Tabber Tab Menu Dengan JQuery #1

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Saat ini tabber tab mulai banyak terkenal dalam dunia desain web. Banyak situs yang menggunakan tabber tab dan mengisinya dengan berbagai konten untuk menghemat ruang halaman web site. Diantara yang banyak saya lihat menggunakan tabber tab untuk kategori recent posts, recent comments dan random posts adalah template atau theme wordpress.
InsyaAllah kali ini saya ingin mengetengahkan cara membuat tabber tab dengan JQuery untuk template blogger. Diantara ragam tabber tab satu diantara yang akan kita pelajari cara pembuatannya sekarang, adalah tabber tab dengan struktur menu menggunakan icons seperti screenshot berikut atau silahkan lihat dulu demox

View Demo

Intervace Tabber Tab

Oke langsung pada tutorial pembuatan tabber tab menu atau tab view dengan JQuery:
Langkah Pertama:
1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag atau kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
catatan: Bagi anda yang pernah menambahkan atau ditemplate anda sudah terdapat script JQuery maka langkah kedua abaikan saja,

3. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:
<script type='text/javascript'>
$(document).ready(function() {  
  //Get all the LI from the #tabMenu UL
  $(&#39;#tabMenu &gt; li&#39;).click(function(){
    //perform the actions when it&#39;s not selected
    if (!$(this).hasClass(&#39;selected&#39;)) {  
    //remove the selected class from all LI  
    $(&#39;#tabMenu &gt; li&#39;).removeClass(&#39;selected&#39;);
    //Reassign the LI
    $(this).addClass(&#39;selected&#39;);
    //Hide all the DIV in .boxBody
    $(&#39;.boxBody div&#39;).slideUp(&#39;1500&#39;);
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $(&#39;.boxBody div:eq(&#39; + $(&#39;#tabMenu &gt; li&#39;).index(this) + &#39;)&#39;).slideDown(&#39;1500&#39;);
  }
  }).mouseover(function() {
    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest  
    $(this).addClass(&#39;mouseover&#39;);
    $(this).removeClass(&#39;mouseout&#39;); 
  }).mouseout(function() {
    //Add and remove class
    $(this).addClass(&#39;mouseout&#39;);
    $(this).removeClass(&#39;mouseover&#39;);  
  });
    //Mouseover with animate Effect for Category menu list
  $(&#39;.boxBody #category li&#39;).click(function(){
    //Get the Anchor tag href under the LI
    window.location = $(this).children().attr(&#39;href&#39;);
  }).mouseover(function() {
    //Change background color and animate the padding
    $(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
    $(this).children().animate({paddingLeft:&quot;20px&quot;}, {queue:false, duration:300});
  }).mouseout(function() {
    //Change background color and animate the padding
    $(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
    $(this).children().animate({paddingLeft:&quot;0&quot;}, {queue:false, duration:300});
  });
    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $(&#39;#.boxBody li&#39;).click(function(){
    window.location = $(this).children().attr(&#39;href&#39;);
  }).mouseover(function() {
    $(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);
  }).mouseout(function() {
    $(this).css(&#39;backgroundColor&#39;,&#39;&#39;);
  });    
});
</script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>
#tabMenu {margin:0;    padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
/* this is the button images http://amatullah83.blogspot.com*/
li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}
li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
.box {width:227px}
.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;
    height:11px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block}
/* styling for the content*/
.boxBody div ul {    margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div li span {    font-size:8px;color:#9F9F9F;}
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

Catatan kode CSS diatas masih bisa anda modifikasi untuk menyesuaikan dengan template anda untuk membantu mengenali property CSS diatas lihat screenshot berikut:
Intervace Tabber Tab
imageIcons image lain yang bisa sobat gunakan:
Untuk background bodynya, cari aja sendiri ya!
5. Simpan Template
Langkah kedua:
  • Masih pada menu tata letak>>> klik elemen laman>>> tambah gadget>>> Pilih HTML/JavaScript
image image image
  • Pada kolom konten isi dengan kode HTML berikut:
<div class="box">
  <ul id="tabMenu">
    <li class="posts selected"></li> <!-- default button-->
    <li class="comments"></li>
    <li class="category"></li>
    <li class="famous"></li>
    <li class="random"></li>
  </ul>
  <div class="boxTop"></div>
  <div class="boxBody">
      <!-- default page-->
    <div id="posts" class="show">
      <ul>
        <li>Post 1</li>
        <li>Post 2</li>
        <li class="last">Post 3</li>
      </ul> 
    </div> 
    <div id="comments">
      <ul>
        <li>Comment 1</li>
        <li>Comment 2</li>
        <li class="last">Comment 3</li>
      </ul>
    </div>
     <div id="category">
         <ul>
           <li>Category 1</li>
           <li>Category 2</li>
        <li class="last">Category 3</li>
         </ul> 
       </div>
      <div id="famous">
      <ul>
        <li>Famous post 1</li>
        <li>Famous post 2</li>
        <li class="last">Famous post 3</li>
      </ul> 
    </div>
    <div id="random">
      <ul>
        <li>Random post 1</li>
        <li>Random post 2</li>
        <li class="last">Random post 3</li>
         </ul>   
    </div>       
  </div>
  <div class="boxBottom"></div>
</div>
  • Silahkan isi tabber tab menu dengan konten yang anda inginkan kemudian simpan dan simpan lagi. Lihat hasilnya diblog anda.
Semoga berhasil dan bermanfaat. Jangan lupa lihat demo hasil pekerjaan saya disini.

Resource: queness

Cek Out tutorial membuat tabber tab JQuery 2 disini
Tabber Tab JQuery 2

Ingin mencoba membuat tabber tab full widget tanpa menggunakan JQuery bisa lihat disini
Tabber Tab Styles

atau tab view sederhana lihat disini
Tab View Sederhana


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

49 komentar :

  1. Wah..tutorial baru lagi nih,... yang paling saya suka dari Tip-2 yang Ukhti tulis adalah selalu menampilkan life demo sehingga sebelum mempraktekan tutorial tersebut terlebih dahulu saya selalu melihat demonya, kalau tertarik baru saya coba dan sampai saat ini tip-2 dari ukhti sangat menarik setidaknya bagi saya pribadi.

    O ya, sepertinya enak banget ya Mbak kalau ngerti Program JQuery?, kalau tidak keberatan situs mana yang dapat saya kunjungi untuk belajar dasar-dasar JQuery untuk newbiew selain blog "Indahnya Berbagi"?.

    Terima kasih.

    BalasHapus
  2. @ Yuda: Saya cantumkan live demo selain untuk membuat pembaca yakin tutorial ini bisa diterapkan, script yg ada bekerja juga agar lebih profesional.

    untuk belajar JQuery secara umum, sy kira resource dari tutorial diatas fanatik banget dgn JQuery (queness) yg lain Sohtanaka.

    Kalau penerapan JQuery untuk template blogger selain blog ini adanya jg blog choen wlu dia dah berhenti ngeblog tp blogx g' ditutup. Sedangkan beben, dia jg menulis tutorial selain tema yg lain entah apakah disana bnyk tutorial JQuery jg sy tdk tahu hnya krn blogx bnyk memakai widget dgn JQuery mngkn dia bisa memberi referensi lain bg anda?

    BalasHapus
  3. Ok Mab,k saya menuju TKP dulu, Nyobain satu-satu. Terima kasih banyak.

    BalasHapus
  4. makasih mba tutorialnya...
    makin bingung, pusing lihat kode-kodenya...hehe....

    BalasHapus
  5. disini saya banyak sekali belajar...terimakasih sekali kepada "Indahnya berbagi" tentunya ini sangat bermanfaat untuk semua....

    BalasHapus
  6. كنت على ما يرام الى الحب لتقاسم معنا المواطن العادي قد منح الله سبحانه وتعالى كل خير لكم وبعزيز

    BalasHapus
  7. Mbak... Saya coba ko ga jalan ya d blog saya???
    dimana ya kesalahannya? Mf baru belajar.. ga taw apa apa... :D

    blogya Paperbooklife.blogspot.com

    BalasHapus
  8. wah keren banget nie mbak tab menu nya
    btw nie ngeberatin blog gak ?...

    BalasHapus
  9. salam sobat
    tutorial menarik nih,
    membuat tabber tab menu dengan Jquery.
    trims sudah berbagi ilmu,
    saya nanti bisa mencobanya.

    BalasHapus
  10. Blog ini Memeng Sip...Terimakasih Atas Infonya

    BalasHapus
  11. Tutorialnya mantap banget nih...
    makasih banyak...

    BalasHapus
  12. Hampir setahun baru bisa mampir disini lagi,..
    maaf.

    BalasHapus
  13. @ PaperBookLife: sy sudah lihat blog anda, mslhnya sidebar anda terllu sempit, coba pindahkan widget tabx di bgn main (ats posting) atau ganti template yg mendukung, pastikan jg anda tepat memasukkan scriptx

    @ Gudang IIlmu: Lihat demonya, sy rasa tidak jg
    @ Setiawan: Sy jg minta maaf jarang blogwalking, terimakasih apresiasi semuax.

    BalasHapus
  14. Wah ilmu baru nih buat saya mba, kaya di template mystique ya, langsung dicoba, makasih telah berbagi, semoga kebaikanya dibalas berlipat ganda.

    BalasHapus
  15. @ sepwawan: Iya benar, gambar tabber tab kedua sy ambil dari theme wordpress mystique. Smg berhasil. Amiin. Terimakasih apresiasinya

    BalasHapus
  16. MAKASI YA UDAH MAU berbagi..;)

    BalasHapus
  17. Aku save dulu kawan.penting iki

    BalasHapus
  18. Aku baru mengetahuinya sob.aku coba dulu y

    BalasHapus
  19. Wih kerennn gan... Tx tutorialnya...!!!

    BalasHapus
  20. Info yang sangat berguna sobat... terima kasih. Maaf baru bisa berkunjung

    BalasHapus
  21. Tanya diLuar posting:
    Gimana caranya membuat header dari template yang tidak ada headernya? artinya mengembalikan header seperti template minima.

    BalasHapus
  22. good blog and good post...nice can be visite this blog. thanks

    BalasHapus
  23. Nice info mbk, mksh pncerahnnya....

    BalasHapus
  24. @ Masphe: Tidak apa tanya diluar postingan slama msh menyangkut tema blog.

    Maaf kurang ngerti dgn pertanyaan anda? Baru tau klu ada template yg tdk ada headernya? Atau klu ingin headernya seperti template minima pd bagian edit HTML lihat aja semua CSS header pd template minima dan Kode HTMLx yg dimulai dgn div id.

    Moga dpt membantu

    BalasHapus
  25. Wah mantaaaaap! :D
    Saya suka banget tutorialnya. Oke deh nanti saya coba ya, soalnya saya juga ingin mengirit tempat di blog saya :)
    Makasiiiih.

    BalasHapus
  26. wah mantap tutornya,,saya bookmark dulu,,izin follow..minta tambah lagi sob tutornya buat modifikasi template zinmag,,soalnya saya pake zinmag javanya belum di hosting hehehe..bisa nambahin speed buat glitternya ga sob??mohon bimbingannya

    BalasHapus
  27. mantap nih artikel ilmu nya..semangat terus mbak u/ saling berbagi ilmu tentang web..

    BalasHapus
  28. mbak hebat.. subahanallah.. terima kasih untuk semua infonya..

    BalasHapus
  29. Wah keren juga ya Sob....tp aku belum niat bikin tab....nanti klo aku udah niat aku tak ikutan bikin he.....Izin aku save dulu kwan....!!!

    BalasHapus
  30. Queness bngts ya mba.. xixixixi..

    sbnrnya pngn publikasiin ini dh lama bt para blogger..
    tp tkut dimarahin ma mas Kevin Liew mba.. hehe..
    tp skrng dh keduluan dech..

    sukses mba..

    BalasHapus
  31. @ Girant_31: Sy khn JQuery lovers jd senang aja sm Queness yg fanatiq jg ma JQuery.

    Kita kn cantumin jg url resource, download lengkap script dan image jg dari link yg mrk sediakn, wlu msh harus sdkt ngedit imagex, jd sy rasa g' bakalan marah deh si kevin.

    Makasih apresiasinya. Sukses trs jg tuk anda.

    BalasHapus
  32. saya salut...
    bY : zAii_d'Leader

    BalasHapus
  33. mba,aq dah coba.bagus c,tapi widget aq lebarnya 200,sedangkan disitu 227.jadi kepotong.tolong postkan gambar bckgroundya donk mba biar bisa milih dan ngukur sendiri.coba mba liat blog aq.widget sebelah kanannya jadi ga match.he
    barangkali dengan berkunjung mba bisa ngasih saran dan masukkan lain untk saya dan blog ini.makasih ya mba..dan mohon banget pencerahannya

    BalasHapus
  34. satu lagi mba..he(maklum newbie)
    klo memasukkan code widget (misal widget tab)untuk ditampilin di tabnya di copy sehabis code apa?dan yang di copy dari code mana
    thx before.maf ngerepotin

    BalasHapus
  35. @ Ati: anda bisa sesuaikan lebar widget dgn sidebar dgn cara mensetting lebar menggunakan angka resolusi dlm prsen (exp: 100%).

    Untuk background sy sdh cantumkan semua linkx pd kode CSS diatas, klu ingin mengedit bgx silahkan gunakan photoshop tuk mengganti ukuran atau warna. klu tak hendak ribet silahkan gunakan sj kode warna.

    Untuk memasukkan kode pd tab, lihat contoh HTML diatas, masukkan kode setelah id tab, ekp: setelah id kategory. jika kode link yg ingin dimasukkan tgl anda ganti kode yg diapit oleh tag li

    smg dpt membantu. jgn sungkan tuk bertanya klu msh menemukan kendala!

    BalasHapus
  36. kunjungan siang, salam kenal. saya baru belajar buat blog. mohon izin pasang link blognya di tempat saya www.putrasangpejuang.blogspot.com

    BalasHapus
  37. mba, minta coding yang buat ukuran widget 198 donk.udah saya coba edit sendiri seharian lebih malah,tapi berhubung pengetahuanku tentang coding ini masih kurang,yang ada malah rusak gambar backgroundnya.haha
    tolong ya mba,paling tidak mba update postingan untuk mengecilkan ukuran tab view menunya.bagiku itu sangat membantu..thx b4

    BalasHapus
  38. Kak, tiada bentuk love yang kakak buat itu. Saya sudah meletakkan code ditempatnya. Tapi hasilnya kosong. Tiada gambar atau bergerak seperti yang kakak buat. Adakah salah di mana mana ?

    -

    BalasHapus
  39. @ m-candra: silahkn, trmksh
    @ ati-zone: gunakn aha with 100%
    @ nr cafe: dicoba sekali lg dgn teliti ya!

    BalasHapus
  40. harus kuakui, blog antum berisi tutorial2 terkeren slama saia menjelajah google. ahlan wa sahlan. wasi'un gofar.

    BalasHapus
  41. untuksementara saya pelajari dulu widget Jquery ini...semoga lain waktu bisa saya gunakan

    BalasHapus
  42. makasih banyak nich infonya...

    saya mau donk trik di wp

    saya sudah terlanjur pake wp

    BalasHapus
  43. makasih banyak gan. tutorialnya bermanfaat semua. salam kenal.

    BalasHapus
  44. pusing kakaakkk :'( kallo suruh edit html maklum masih awam :'(

    BalasHapus
  45. keren gan tutorialnya, bisa nih buat praktek

    BalasHapus
  46. cara edit menu/link nya gmna ,,

    BalasHapus
  47. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!