Membuat Tab View Dengan JQuery

Diposkan oleh Hery Prasetyo Wednesday, April 28, 2010
بسم الله الرحمن الرحيم

Membuat Tab View Dengan JQuery. Tab view dengan menggunakan JQuery versi 1.3.2 berguna untuk menghemat ruang. dengan jumlah gadget di sidebar yang banyak bisa membuat sidebar tampak panjang kebawah. dengan tab view dapat memnghemat tempat sehingga sidebar tidak tampak panjang kebawah. dengan Tab view juga membuat blog lebih rapi.
Membuat Tab View Dengan JQuery
Untuk Demo Tab View Dengan JQuery, silahkan klik tombol demo berikut :

Membuat Tab View Dengan JQuery

Cara membuat Tab View Dengan JQuery adalah sebagai berikut :

Cara Membuat Navigasi Stylish di Blog adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

- Letakkan Script Berikut dibawah JQuery 1.3.2 diatas tadi :

<script type='text/javascript'>
$(document).ready(function(){$(&quot;.tab_content&quot;).hide();$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show();$(&quot;.tab_content:first&quot;).show();$(&quot;ul.tabs li&quot;).click(function(){$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;);$(this).addClass(&quot;active&quot;);$(&quot;.tab_content&quot;).hide();var activeTab=$(this).find(&quot;a&quot;).attr(&quot;href&quot;);$(activeTab).fadeIn(1500)})});
</script>

- Kemudian letakkan code CSS berikut diatas ]]></b:skin> :

/* pageTabs */
.pageTabs {width: 300px; height:150px; margin:5px font-size:11px;}
ul.tabs {
margin-left: 5px;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
margin-left: 5px;
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
line-height: 2em;
color: #254588;
}
.tab_content img {
float: left;
margin: 5px 10px 10px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}

- Simpan Template.

- Pergi ke "Elemen Laman".
- Tambah Gadget dan pilih "HTML/JavaScript".
- Copy paste code berikut kedalamnya :

<div class="pageTabs">
<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">

Isi Content Anda Utk Tab 1

</div>

<div id="tab2" class="tab_content">

Isi Content Anda Utk Tab 2

</div>

<div id="tab3" class="tab_content">

Isi Content Anda Utk Tab 3

</div>

<div id="tab4" class="tab_content">

Isi Content Anda Utk Tab 4

</div>
</div>
</div>

- Simpan.

# Nilai 1500 pada fadeIn(1500) pada script diatas adalah kecepatan tampilnya konten tab view.

Untuk tutorial aslinya bisa di cek di How To Add jQuery 3D Tab View Widget to blogger.
Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

22 Responses to Membuat Tab View Dengan JQuery

  1. Rock Says:
  2. Aku simpan dulu sob kodenya.
    Bikin loading jadi tambah berat gak?

     
  3. HAPIA Mesir Says:
  4. Rock@ g terlalu ngefek ma loading blog sob.. enak2 aja.. coba cek blog demonya aja.. seperti apa loadingnya..

     
  5. akhatam Says:
  6. Wah keren HAPIA...
    Kapan2 ane coba yew....Tx!!!

     
  7. aryadevi Says:
  8. salam teman ^__^, seperti biasa...simpan, saya rasa sekarang sudah waktunya nih diaplikasikan

     
  9. Darin Says:
  10. Asik juga nih, bisa menghemat tempat :)

     
  11. achen Says:
  12. wah thanks neh tips tutorialnya... ebat!

     
  13. buwel Says:
  14. satu kata mantab, layak dicoba...

     
  15. Bunglon Blog Says:
  16. asalamualaikum...
    kalo pake jQuery saya belum pernah nyoba nech sob, dari demonya sepertinya simple yach sob...kalo ga dicoba pasti ga akan bisa liat hsilnya hehe..
    Sukses Slalu!

     
  17. Rizky2009 Says:
  18. mau aq pasang tp masihj bingung mau aq isi apaan, masih di fikir dulu isinya kira2 apa yang pas dan g bikin berat soalnya blog q kan udah berat bgt

     
  19. Syam Oby Says:
  20. terima kasih mas hapia...
    sudah mau berbagi =)

    hihihihi
    kalo tab viewnya di pasang iklan boleh gak kak???
    salam
    dari blogger abnormal

     
  21. HAPIA Mesir Says:
  22. Syam Oby@ boleh aja sob.. terserah kita mw masang apa..semoga membantu...

     
  23. attayaya Says:
  24. duuuuuuuuuhh...
    panjang juga ya

     
  25. wah triknya manteb banget.. boleh saya simpen kan ?
    ternyata banyak artikel yang bermanfaat .. sering2 maen kesini insya alloh .. :)

     
  26. sehat-mu Says:
  27. hehehhe...
    kalau yang ini kayaknya untuk masalah loadng blog bisa teratasi ya sob...
    keren sobat..
    sukses juga yah :D

     
  28. Ega-Priatma Says:
  29. tapi bisa memperlambat loading gak?

     
  30. Pak Tani Says:
  31. Artikelnya mantep mantep...

     
  32. yayah Says:
  33. kita bookmark dulu tutor mantab nih nanti kita praktekin

     
  34. yayah Says:
  35. mau tanya sekalian, klo cara buat tambahan widget di sebelum footer untuk wp antum bisa ga ya.. mohon pencerahannya

     
  36. HAPIA Mesir Says:
  37. yayah@ wah maaf sob.. utk WP saya blm terlalu akrab.. jadi blm pernah ngobrak-abrik yg disana..hehe

     
  38. mantebh banget nich kangh hapia

     
  39. yayah Says:
  40. penting tuh sob...

     
  41. yayah Says:
  42. oh iya klo da bisa kasih kabar ya

     

Post a Comment