52 Membuat Tabber Tab Dengan Jquery #2

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

Postingan sebelumnya saya pernah mengetengahkan cara membuat tabber tab atau tab view dengan bantuan JQuery part 1. Namun tabber tab tersebut memiliki beberapa keterbatasan, diantaranya tidak dapat menambahkan beberapa widget umum seperti arsip blog, label, kecuali dengan memasukkan link Widget Blogger yang saya sebutkan tadi dengan cara manual. Sedangkan tabber tab dengan JQuery part 2 ini, kita dapat menembahkan fitur atau widget tadi dengan mudah, cukup dengan mendrag/ memindahkan widget kesidebar.

Sedang kegunaan tabber tab ini sangat membantu menghemat ruang sidebar blog anda. Karena sobat dapat memberikan fitur lebih pada wilayah tunggal sidebar tidak terbatas sekedar recent post, recent comment, random posts, tapi juga label/ kategori, daftar link, profil dan banyak lagi.


Nah tertarik ingin membuat tabber tab dengan JQuery part 2 ini? Silahkan ikuti tutorial berikut:


Tabber Tab JQuery  

1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;       
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}


 

Cataan CSS diatas masih bisa anda modifikasi lagi sesuaikan dengan blog anda. Untuk mengganti warna silahkan lihat tabel kode warna disini. Image lain yang bisa sobat gunakan tabtopbg tabinactivebg 
3. 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,

4. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt'></script>

Catatan: Tab dari kode diatas terdiri dari 3 tab. Untuk menyesuaikan jumlah tab dengan keinginan sobat, silahkan ganti angka 2 dengan jumlah tab yang sobat inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.

5. Selanjutnya cari kode HTML berikut:


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Sekarang ganti tulisan berwarna merah dengan sidebar id dari tabber tab, yaitu sidebar 1

6. Selesai.

Sekarang anda bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog anda.

Resource: Blogger Tuts

Ingin mencoba membuat tabber tab full widget tanpa menggunakan JQuery seperti screen shoot dibawah ini, bisa lihat disini Tabber Tab

Atau tab view sederhana seperti screen shoot dibawah ini lihat disini.

 


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

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

52 komentar :

  1. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  2. @ Anonim: Maaf disini bukan ajang promosi produk bisnis online anda!

    BalasHapus
  3. Mas thanks atas tutorialnya selama ini,
    Mas kok ngak bisa dipakai ya padahal udah aku coba terutama skrip no 4

    BalasHapus
  4. @ GS2: Pertama maaf keliru dgn sapaan masx, silahkan lihat profil.

    Kedua: Terimakasih sudah mengingatkan, tadi memang pada point yg anda sebutkan url scriptx sy lupa menutup dgn tanda ' sudah sy update smg bisa membantu.

    Terimakasih apresiasinya.

    BalasHapus
  5. memang widget ini bagus sekali yaaa sangat cocok sekali di pasang di setiap blog
    tapi yang jadi masalah saya saya membutuhkan 4 colom yang ini kan 3 pada saat di tambahkan kog jadi aneh yaa. mohon solusinya...?....

    dan kalau bisa agak di kecilin dikit widget nya yaa karena template saya nie memang tidak memiliki banyak tempat

    maaf nie bawel dan banyak permintaan maklun masih nubi

    BalasHapus
  6. Tiga kali saya praktekan semua tutorial di atas, dua kali gagal tapi Alhamdulillah yang ke tiga sudah berhasil. Tampilannya sangat bagus dan keren apalagi saat saya click setiap tab yang berbeda. Satu menutup yang lain muncul. Mantap!

    Terma kasih ukhti.

    BalasHapus
  7. @ Gudang Ilmu: Kalau ingin nambah jumlah tabnya perhatiin jg lebar sidebarx, mendukung apa g'? Biar tampilannya g' aneh.

    Klu msh pingin menggunakan 4 tab/ kolom, edit lebar sidebar, mengedit lebar sidebar tentu harus ngedit jg lebar header, outer wrapper, dan footer.

    Klu ada yg blm ngerti lg, gpp silahkan ditanyakan. Terimakasih ats apresiasix.

    @ Yuda: Klu praktek mmg butuh ketelitian dan jg kesabaran. Sy sekali aja alhamdulillah langsung berhasil tu.

    Terimakasih ats apresiasix.

    BalasHapus
  8. ok sobat sudah diterapkan...
    dan hasilnya bagus :OK
    terimaksih banyak sobat :D

    BalasHapus
  9. aku juga pengen nyoba nambahin tab, biar mempermudah yang pgn nyari artikel. cuma baru mikirin kira2 mo nambahin tab apa.... :)

    BalasHapus
  10. waah.. mbak subhanallah ya.. teknologi memang hebat.. oh iya.. numpang nanya nih mbak.. gimana caranya biar di bawah kata
    "poskan komentar" ada beberapa teks yang bisa di buat sendiri.. makasih ya.. sekalian mau minta tips yang mudah dimengerti karena saya masih pemula..

    BalasHapus
  11. @ Syifa: Untuk menampilkan pesan dibawah poskan komentar. Stlh sig in pada dasbor, klik pengaturan, klik komentar cari yang bertuliskan pesan formulir komentar... isi kolom kosong disamping kanan tulisan td. Terus simpan perubahan, lihat hasilnya diblog syifa!

    Smg mudah dimengerti dan dapat membantu.
    Makasih apresiasinya syif!

    BalasHapus
  12. selamat sore amatullah..
    makasih sekali atas tipsnya seputar js query, [ppunya saya juga telah pasang js query sebagai tab view tapi itu saya menggabungkan antara php,jsquery,css dan html

    saya tertarik dengan minat kamu seputaer webdezigned, jika berkenan maukah kamu jadi guest post di blog saya seputar webdezigned, karena saya lagi mencari guestblogger untuk postingan kaya punya ama ini, karena saya sibuk dengan postingan SEO Series tutorial karena bagi saya SEO adalah makanan saya, jika anda berminat jadi guest blogger saya, silahkan send sms atau telpun ke 085 72 9999 120
    atas namab Gus Ikhwan

    terima kasih, saya tunggu konfirmasinya

    BalasHapus
  13. mantab kawan... JQuery lovers... banyak inovasi...agar load blog lebih cepat...upload scriptnya di situs hosting yang bagus servernya...

    BalasHapus
  14. bagus ya. tapi saya pakai accordion. terima kasih sharingnya. salam kenal.

    BalasHapus
  15. Mampir belajar ilmu baru lagi...
    Makasih banyak Dinda...

    BalasHapus
  16. wahh
    makasih yaw
    tutorialnya
    :D

    BalasHapus
  17. wah
    ijin amankan kode css nya dulu yaw
    hehhehe
    :D

    BalasHapus
  18. Thanks infonya, langsung aplikasinya. emang variasi blogger sedikit banget

    BalasHapus
  19. @ Gus Ikhwan: Butuh waktu untuk mempertimbangkan. Terimakasih ats pnghargaan dan apresiasinya.

    @ HAPIA Mesir: Iya bnr, saat ini msh pakai hosting gratisan

    @ Artikel Islami: Accordion jg menarik

    @ All: Makasih apresiasix

    BalasHapus
  20. kelihatannya bagus juga ...
    nanti pak liek pelajari lagi ....
    mungkin butuh 1 atau 2 kali untuk memahami kode2 diatas ....

    BalasHapus
  21. makasih mbak :D alhamdulillah masih ada yang membantu saya.. berguna sekali mba :)

    BalasHapus
  22. mbak.... kenapa ya... postingan maupun comment di blog saya nggak bisa melakukan enter??

    BalasHapus
  23. @ Stifa: Mksdx widgetx g' mau tampil ya? Mngkn de syifa blm mmskn url feed blog ade?

    BalasHapus
  24. pengen nyoba tapi aku tak sanggup...
    hikz....

    BalasHapus
  25. gimana cara membuat image bergerak seperti untuk google translate?

    BalasHapus
  26. @ Buy Cameras: Klu tidak pernah mencoba mk slamax mmg tak akn bs. Harus berani sdkt bereksperimen.

    @ Syifa: Image itu mmg dah bergerak de' krn image animasi. Ade bisa jg membuat image non animasi bergerak dgn bantuan marquee :)

    BalasHapus
  27. keren banget nih..

    tapi kok jadinya ancur yah..

    semua sidebar di jadiin seperti ini..


    aku mo nya jgn semua sidebar(hanya yg dipilih saja)

    thanks..

    BalasHapus
  28. @ Isnan: Ya mkx diatur berapa tab yang dibutuhkan, lihat point no 4!

    Makasih

    BalasHapus
  29. follow balik ya.. artikel sobat sengat menarik ni

    BalasHapus
  30. makasih mba Admin atas pencerahannya :)

    BalasHapus
  31. thank's... sehari ini belajar banyak dari blog ini. maju terus ya... jangan pernah brenti bagi-bagi ilmu. biar tambah pinter...!!!

    BalasHapus
  32. Salam. javascript udah corrupt?
    saya ngak dpt buka

    BalasHapus
  33. @ Affan Ruslam: Wa'alaikumussalam, JSx dari library JQuery kok dibilang corrupt? Lihat dulu dong demox masih kerja dan berfungsi bk tuh!

    Makasih

    BalasHapus
  34. Maaf. Saya cuma test, tak dapat bukak.
    Tak berjaya buat tutor ini.
    Sudah ikut semua step?
    Gimana?

    BalasHapus
  35. Jika tidak keberatan bisa cekkan utk saya?
    mohon email di ruslan [at] mcmaster.ca.

    Jazakillah

    BalasHapus
  36. @ Affan Ruslan: Apax yg tak dpt dibuka? Apa isi psn error yg anda temukan? Mngkn dgn memahamix bisa dapat membantu.

    Oh ya tutorial ini saat klik pratinjau (preview) mmg tdk terlihat hasilx, save dl stlh itu edit pd elemen halaman (page element) kmdn save lg. Lihat hslx diblog anda!

    BalasHapus
  37. Alhamdulillah, hampir berjaya.
    Tapi ada masalah lainnya.
    Lihat sini:
    http://dl.dropbox.com/u/1024578/Template/problem-temp.png

    BalasHapus
  38. Mohon balasannya.
    Jazakillah

    BalasHapus
  39. terima kasih dengan tutorialnya, akhirnya blog aku jadi semua berkat dari tutorial yang aku baca di sini.

    BalasHapus
  40. trimakasih atas postingan ini berguna bgt buat aq...plis lihat hasilnya.di blog aq... se-x trims

    BalasHapus
  41. Bro mo naya kalo mo ngatur Width dari widgetnya gimana ? terus mengatur letak tab nya gimana ?

    BalasHapus
  42. langkah ke 5 nya ga bisa gan ..soalnya ga nemu kode itu
    mohon pencerahannya :)

    BalasHapus
  43. bagus sih gan,,tapi yg di dalam tab view nya gak bisa di atur ya? gadget yang di atas doank ya?

    BalasHapus
  44. langkah no 5 gag ada ukhti, ganti ny gmn donk ?
    tambah apa ganti apa gthu ?
    :(

    BalasHapus
  45. wah templet ane ko ga ada kode ini gan?
    div id='sidebar-wrapper'
    b:section class='sidebar' id='sidebar' preferred='yes'
    ane jd bingung
    agan mungqn bs bntu ane, jika berknan.
    thanks :)

    BalasHapus
  46. ini kalo di buat 2 bagaimana bu? misalnya satu di sidebar kiri, dan satu lagi di kanan

    BalasHapus
  47. Kode tidak Valid

    Apa ada pengaruh dari template blog !

    BalasHapus
  48. Terima kasih atas tuorialnya. Tapi, Ane mengalami permasalahan yg sama seperti agan NuBlogger diatas. ane tidak dapat menemukan kode HTML:

    div id='sidebar-wrapper'
    b:section class='sidebar' id='sidebar' preferred='yes'

    Mohon petunjuknya agar saya dapat menggunakan widget seperti yg agan/sist admin gunakan :)

    BalasHapus
  49. Karena susah ngotak ngatik template, kudownload dan make yg dah ada tabbertabx :) tp keren sharex

    BalasHapus
  50. keren artikelnya izin sedot yaaa

    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!