mas template

Membuat Simple Tabber di Sidebar

Tabber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.

Nah kali ini saya akan memberikan satu tips untuk Anda semua dalam membuat tabber, sangat sederhana dan tidak memperberat loading blog. Tips ini saya dapat dari Pak Abu Farhan, master blogger Indonesia yang sudah malang melintang di dunia persilatan.. eh dunia perbloggeran. Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.

tabber sidebar maskolis

Untuk hasil akhir tabber ini gambarnya seperti diatas, jika ingin melihat demonya disini. Baiklah, langsung saja pada cara pemasangannya :
  1. Login ke blogger dengan akun anda
  2. Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    .widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:10px;
    }
    
    .widget-tab {
    background:#c9dbdd;
    font-family:Arial,Helvetica,sans-serif;
    padding:5px !important;
    }
    
    .widget-tab  ul {
    margin:0px;
    padding:0px 5px 0 5px;
    }
    .widget-tab  ul li {
    list-style:none;
    border-bottom:1px dotted #a4bddf;
    padding-top:4px;
    padding-bottom:4px;
    font-size:12px;
    }
    .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://3.bp.blogspot.com/-F2JucRkielU/Ty7NHVdzBkI/AAAAAAAAFG8/d4ZqQOFH3Bg/s1600/sidebar.png) repeat-x scroll left bottom !important;
    color:#282E32 !important;        
    }
    
    ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
    }
    
    ul.tab-wrapper li{
    background:url(http://1.bp.blogspot.com/-Tjycy0172Vo/Ty7IS2D7OCI/AAAAAAAAFGc/kx8jg6X9ywE/s1600/menu-m1.png) repeat-x top;
    color:#FFF;
    cursor:pointer;
    display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:700;
    line-height:2em;
    list-style-image:none!important;
    list-style-position:outside!important;
    list-style-type:none!important;
    margin-right:1px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    padding:8px 14px
    }
  5. Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> (jika pada template anda sudah terinstall, langkah ini dilewati saja) :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
  6. Setelah itu, tambahkan kode berikut ini di bawah script jquery diatas
    <script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar&quot;;
    </script>
    <script src='http://yourjavascript.com/229125112341/tabber.js' type='text/javascript'/>
    Keterangan :
    var starttab=0;
    var endtab=3;
    var sidebarname="sidebar";
    Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtab adalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).

    Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  7. Setelah itu Save/Simpan template, sudah selesai.
Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk membuat tabber sederhana dengan jquery, silahkan dimodifikasi sendiri warna serta tampilan lainnya. Sesuaikan dengan komposisi warna blog Anda sehingga tabber ini semakin memperindah tampilan blog dan pengunjung semakin betah berlama-lama di blog Anda. Selamat mencoba dan semoga bermanfaat.....


Script source by : Abu Farhan
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 Creating Website

40 comments:

  1. MAS, BAGAIMANA CARA MEMBUAT TAMPILAN GALLERY PADA POST HALAMAN DEPAN DI TEMPLATE 'JOHNY DARKGAMER'
    TOLONG YA, SEHARIAN SAYA UTAK-ATIK UNTUK TEMPLATE JOHNY DARKGAMER SUPAYA TAMPILAN POST NYA SEPERTI MAS-TEMPLATE.BLOGSPOT.COM
    KIRIM VIA EMAIL YA KE wandhyfals@yahoo.com atau kalau sempat bikin tutorialnya donk, saya menanti-nanti tutorial itu.
    sekali lagi tolong ya............

    ReplyDelete
  2. kalau mau membuat ini tapi di bawah postingan gimana caranya mas?!?!

    ReplyDelete
  3. Nah kalo yg ini mas saya agak bingung dengan tulisan yang ini;
    yang perlu diperhatikan Anda harus mencari id mau tanya nie maksudnya apa ya? saya bikin ini kok gagal terus.
    mohon di perjelas. terima kasih..:)

    ReplyDelete
  4. @R-82:
    id sidebar seperti yang dijelaskan pada no 6 diatas bro.
    Kalo mau ditempatkan di template johny portal 2 sebelah kanan id nya tetap sidebar, yg sebelah kiri id nya sidebarleft kalo yg bawah main wrapper id nya main2

    ReplyDelete
  5. mas kalau di mas template mas peper itu apa ...
    pnya ane ada kehapus kodengya...jadi mau pasang lagi bingung id sedebarnya apa????

    ReplyDelete
  6. bro ada file js yang mati tuh

    http://creatingwebsite.googlecode.com/files/tabber.js

    tolong upload lagi bro, soalnya sudah banyak yg menggunakan file js tabber ini

    ReplyDelete
  7. itu tab menu view milik agan ko ga bisa di klik bro....

    ReplyDelete
  8. @4her4:
    Okay, udah diganti tu diatas, makasih koreksinya


    @Anonymous:
    Coba ganti kode yang lama dengan kode no 5 dan 6 sudah saya update itu.
    Ini gara2 tempat penyimpanan google coe saya kena banned jadi koe script yg saya simpen disana gak bisa dibuka semua

    ReplyDelete
  9. maksud ai menu view yang langsung copas ke widget gan,.. ga edit template sgala.. ane dapat posting agan di tutorialblog yang ada di tab view sidebar agan,. tapi saya mendapati tab view agan jg bgitu,.. sama gan,.. ane juga begitu... ane bingun kesalahannya dimana.. coz semula kan baik-baik aja... sory ngerepoting gan....

    ReplyDelete
  10. @anonymous:
    Ya itu karena tempat penyimpanan google code saya di banneg jadi nggak bisa dibuka.
    Untuk mengatasinya pada tutrial yang ada disini (tutorial sudah diupdates):

    ganti kode dibawah ini :
    <script src="http://creatingwebsite.googlecode.com/files/tab_view.js">
    </script>
    dengan kode berikut :
    <script src="http://johnytemplate.googlecode.com/files/tab_view.js">
    </script>

    ReplyDelete
  11. thanks infonya mas..sangat membantu

    ReplyDelete
  12. @zen:
    tambahkan kode overflow:auto;
    pada .widget-wrapper2 diatas

    ReplyDelete
  13. Ko saya ngga berhasil yah? apanya yang salah? o ya kode yang terahir (yang ada id warna kuning
    maksudnya gimana sih, ditaruhnya dimana? atau harus gimana? thanks

    ReplyDelete
  14. bisa buat template simple ngga mas yang original dr google

    ReplyDelete
  15. @Nur Asiyah:
    Sidebar id template mbak Nur = sidebar-right-1

    ganti langkah nomer 6
    var sidebarname="sidebar"
    dengan
    var sidebarname="sidebar-right-1"

    Template yang asli dari google contohnya seperti apa ya mbak, disini ada yg simple juga tinggal pilih mbak http://mas-template.blogspot.com/

    ReplyDelete
  16. tks mas .... mas kalau cara buat hasil posting jadi list seperti template jhony portal 2 punya mas gimana...

    ReplyDelete
  17. belum faham yang ini....
    Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya.

    tuch maksudnya gimana atau cara masangnya gimana mas??
    maaf blum faham

    ReplyDelete
  18. bookmark dulu ah, buat kapan2, heheh

    Lanjut terus sampe abis nih postingan.. =))

    ReplyDelete
  19. hihi mkh infonya gan .. masih gagal hadeuh malah muncul google 500

    ReplyDelete
  20. bisa dipake di template Johny Backup nga?

    ReplyDelete
  21. wah ini nih yang saya car-cari dari kemarin hehe
    terimakasih :D nice post :D salam

    ReplyDelete
  22. gan, udah ane terapin dan jadi
    tapi seandainya ya, bisa gak ini untuk multi sidebar. Contohnya ane punya sidebar disebelah kanan yang ane pisahkan menjadi dua (sidebar-atas dan sidebar-bawah)
    nah kalo gini bisa gak tabbernya diterpakan di kedua sidebar (atas dan bawah), karena kan id nya berbeda

    ReplyDelete
  23. Itukan 4 tab ..
    kalau menghapus 2 tab lagi gi mna yah ???

    ReplyDelete
  24. mas, mau nanya, saya sudah pasang dan berhasil tetapi muncul masalah baru, slidenya jadi mecet. Apakah ada solusinya mas? mohon pencerahan

    ReplyDelete
  25. Ayuda por favor, quizás esta pregunta no es de este post pero soy un poco nuevo en esto y necesito saber como y a donde poner el javascript de esta plantilla para que ande bien, he descargado los archivo .js son 5 en total pero no se que hacer con ellos, porfavor ayuda amigo!

    ReplyDelete
  26. menentukan id sidebarnya gmna?

    ReplyDelete
  27. Pak'e,, gemana caranya bikin ini kalau blognya pake wordpress?
    aq kebingungan..help me...
    salam: www.trevaholiday.com

    ReplyDelete
  28. Assalam,Maskolis
    Permisi,
    newbie ikutan nyimak di blog Agan

    ReplyDelete
  29. gmana kalu mau buatnya lebih dari 3. aku buat 6 jadi berantakan. bisa bantu?

    ReplyDelete
    Replies
    1. Jawab sendiri :D
      display:inline-block;

      Delete
  30. http://yourjavascript.com/229125112341/tabber.js

    ketika saya menginstal kode yang di bawah dosis kode tidak bekerja dengan baik

    http://yourjavascript.com/222517121138/contentslider.js

    ReplyDelete
  31. silakan tambahkan bahasa untuk menerjemahkan fitur yang dikenal Vietnam, terima kasih.

    "MINHTRIET09IT - VIETNAM/ PLEASE ADD TRANSLATE LANGUAGE WEBSITE --> VIETNAM, THANKS!"

    ReplyDelete
  32. Tab view belm aktip terutama TERBARU dan POPULER,bagaimana solusinya.
    Ini alamatnya >http://alumni-smpsandhyputra.blogspot.com/

    ReplyDelete
  33. Bagaimana Cara Menambah Slideshow di tamplate Johny Kena Banned

    ReplyDelete
  34. ini kan untuk blog ya mas kalo untuk website bagaimana ya mas?
    mohon pencerahannya

    ReplyDelete
  35. Akhirnya,... ketemu juga widget yang saya butuhkan untuk webiste saya.

    Widget ini saya pasang disini:
    http://www.rumahbisnistiketpesawat.blogspot.com

    Namun saya buat sedikit penyesuaian dengan warna website saya. Thanks for Maskolis.

    ReplyDelete
  36. Mas Kolis... Tabber kayak tutorial ini, jika di pakai untuk Wordpress caranya gimana..??

    Tolong bikinin script dan Tutorialnya untuk Wordpress..
    Thanks..

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger