3.29.2010

Membuat menu tab view

Mempersingkat satu elemen halaman menjadi 3 bagian atau lebih yang masih-masing berisi wigget berbeda... itulah pertanyaan yang pernah di lontarkan salah seorang teman pada saya, waktu itu saya jawab...oh itu namanya tabview, klo di blog saya adalah sidebar menu dengan gambar seperti di bawah ini :

Widget tersebut berisi statistic blog, daftar directory dan banner friend. Nah cara membuatnya cukup simpel dan mudah bila anda mempelajarinya secara perlahan, karena menggunakan javascript dan css maka saya sarankan untuk mencobanya dulu pada blog percobaan, silahkan simak tutorial di bawah ini :
Login ke tata letak >> edit html >> chek expand widget template dan cari kode ]]></b:skin>
Pastekan kode CSS berikut di atasnya

div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000000;
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Times New Roman, Serif;
    font-weight: 900;
    color: #000080;
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #BDBDBD;
    }
    div.TabView div.Pages
    {
    clear: both;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
 

Lalu cari kode  </head> dan pastekan javascript berikut di atasnya :
<script type='text/javascript'>
    function tabview_aux(TabViewId, id)
    {
    var TabView = document.getElementById(TabViewId);
    // ----- Tabs -----
    var Tabs = TabView.firstChild;
    while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
    var Tab = Tabs.firstChild;
    var i = 0;
    do
    {
    if (Tab.tagName == "A")
    {
    i++;
    Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
    Tab.className = (i == id) ? "Active" : "";
    Tab.blur();
    }
    }
    while (Tab = Tab.nextSibling);
    // ----- Pages -----
    var Pages = TabView.firstChild;
    while (Pages.className != 'Pages') Pages = Pages.nextSibling;
    var Page = Pages.firstChild;
    var i = 0;
    do
    {
    if (Page.className == 'Page')
    {
    i++;
    if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
    Page.style.overflow = "auto";
    Page.style.display = (i == id) ? 'block' : 'none';
    }
    }
    while (Page = Page.nextSibling);
    }
    // ----- Functions -------------------------------------------------------------
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
    </script>

Simpan template anda dan selesai di sesi ini, kemudian kita masuk ke elemen halaman, kemudian tentukan di mana anda akan meletakan tabview anda sendiri (Mungkin di sidebar kanan/kiri/bawah/atas), klik add gadget atau tambah gadget, pilih javascript/Html lalu pastekan kode di bawah ini :

    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;">
    <a>Judul Tab 1</a>
    <a>Judul Tab 2</a>
    <a>Judul Tab 3</a>
    </div>
    <div class="Pages" style="width: 350px; height: 250px;">
    <div class="Page">
    <div class="Pad">
    Isi tab 1
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi tab 2
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi tab 3
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

Setelah selesai, klik aja simpan/save dan lihat hasilnya. Tab view milik anda sendiri telah selesai di buat.
Keterangan :
Warna merah pada CSS adalah padding, width dan height serta warna dasar dari ini tab view yang harus anda sesuaikan dengan blog anda, maka dari itu coba dulu di blog percobaan yah.....
Warna kuning adalah warna judul dari masing2 tab misal di blog saya (statistic | directori | friend)
Warna Hijau adalah isi dari masing2 tab....pko'e yang berupa script misal script iklan, recent post atau yang lainya, terserah yang ingin anda masukan di situ apa......
Semoga sukses membuat tab view, oh ya di sini hanya di berikan contoh membuat tab view dalam 3 bagian saja, sebenernya bisa di buat menjadi 4 atau 5 bahkan lebih....untuk itu silahkan utak2 bagian CSS nya sendiri...saya yakin pasti bisa asal berusaha, ya ndak hehe.......

55 komentar temen:

Amdhas mengatakan...

benar sob,,ini harus di coba di blog baru dulu

Nyach mengatakan...

soal java script masih was was, gak apalah kucba dulu, tank ilmunya sob

Rock mengatakan...

keren nich... Saya simpan dulu kodenya...

Oiya, ini nanti bikin loading jadi berat ga mas?

ivan kavalera mengatakan...

Mampir sore untuk sedot ilmunya mas Aditya. Makasih juga telah pajang awardnya di postingan sebelumnya.

inuel mengatakan...

tips yang oke, mas pinter deh bikin tutorial kayak gini :D, kapan kapan ku coba di blog yang lain :D

AdityaBlogsphere2 mengatakan...

@ rock n Nyach di jamin ndak berat kok asalkn isi dari tabviewnya ndak mengandung fitur berat juga

Anonim mengatakan...

ajarin mas......hehehe....aq mo buat blog tp bingung bikinya susah.....

Anonim mengatakan...

ni aq andri mas....yang tadi di warnet.......ajarin buat virus juga yah.......tadi seru bgt kompi nya ngeblenk ....

Miawruu mengatakan...

nyaaa... inet mia lemot. mana amsuk blog kamunya buerat load pagenya. sering gagal. makanya jadi jarang kesini. susah load page nya T^T

nuranuraniku.blogspot.com mengatakan...

salam sobat
wah sip mas ADIT,,membuat menu tab viewnya,,
tapi harus di blog percobaan dulu ya,,
ok deh nanti saya akan coba mas.
trims ilmunya.

blogdunia mengatakan...

wah terima kasih mas adit,,
infonya sangat berguna..
munkgkin nanti saya akan coa..
tapi untuk sekarang saya simpan dulu tipsnya

catatan kecilku mengatakan...

Akun FBku : Reni Judhanto.
Tolong aku di add ya..? Thanks..

richo mengatakan...

klo ilmu baru... wajib di coba nihh...

Rizky mengatakan...

cocok ih sob u/ blog q yg cuma 2 kolom, tp masih bingung mau aq isi apa

Rizky mengatakan...

cocok nih sob u. blog q yg masih menggumnakan dua kolom, tp aq masih bingung mau isi apa nantinya

Nirmana mengatakan...

bagusss, kapan2 info ini dong. apa untung co.cc dibanding blogspot

ozym mengatakan...

mantab deh...
thanks mas sharingnya..
siap mempraktekkan lagi..

AdityaBlogsphere2 mengatakan...

@nirmala, kelebihan co.cc adalah gratis dan stabil,tp bila di bandingkn dgn blogspot,aq kira cm masalah tingkat domain yg lebih tinggi! dan bisa di approve bnyk situs ads,jauh lbh mdah d bnding blogspot

Psychosocial mengatakan...

thx infonya, tapi masih belom niat nambah tab view, saya jadiin referensi aja yah...

Fais Wahid mengatakan...

keRen ni tutoR'y....

Evo D mengatakan...

Wa ketinggalan komenni!!Gapapa Mantab banget sob!!Foto profilnya kok ganti

ceritatugu mengatakan...

selamat malam wah ini agak rumit ya, kira-kira bisa ngga ya inyong

Oby Syam mengatakan...

halo mas adit...
kayaknya perneah denger deh trik ni tp pake b. inggris masih

hihih lebih jelasan ini kayaknya
thx yah kak

di tungu kunjungan baliknya
salam kenal

ali afif mengatakan...

saya juga mo nyoba kek buwel... hehehe

buwel mengatakan...

wuih thanks eh mas adith... ntar mo nyoba...

Ibiza mengatakan...

Malam sob, sebenernya udah lama saya mau buat tab menu view, bingung dengan proses pewarnaannya, karena saya pengen disesuaikan dengan warna blog, nah kebetulan di postingan sobat ini ada, trims. Btw sudah saya follow

mas acrom mengatakan...

info menarik kawan ,sangat bermanfaat,salam blogger

Rock mengatakan...

Selamat pagi mas...

U-marr mengatakan...

thanks ilmunya nih sob.
saya coba-coba dulu siapa tau bisa. :D

w.i.d.i. mengatakan...

waw... kereen, harus dicoba nih mas.., coba tolong buatin.. hueheuheuheu... (ampyuuun deh..) ;P'

Ninda Rahadi mengatakan...

males bikin ah mas.. bikinin dong eheheheee :p nih dikasih sedekah klik :p

ina mengatakan...

keren tutornya :D

ellysuryani mengatakan...

Tutorial mantap dit. Selamat pagi sobat.

soewoeng mengatakan...

sayang diriku gaptek bos bos... maaf ya

soewoeng mengatakan...

ngak berani coba coba soalnya gaptek bos

blogdunia mengatakan...

kunjungan rutin neh kang adit,,
fotonya di ganti ia,,
lucu banget

Yudi Kurniawan (a-One) mengatakan...

nice blog,

canting attayaya mengatakan...

wadooooooooooowwww
panjang amat kodenya bro
hihihihi...
ada yang lebih simpel ga?
pengen masang
tapi males ma yg panjang2

TS Frima mengatakan...

selamat malam, kawan. maaf karena saya sudah lama tak berkunjung.
have a nice blogging time ya ^_^

Blogger mengatakan...

waha ketinggalan berita nech sob, mff baru sempet mampir tab view menurut saya sebenrnya perlu itung2 untuk mneghemat tempat biar lebih simpel dan menarik
mantep sob
sukses slalu!

oh y foto profilnya ganti avatar tuch hehe..kren2

Rahad Adjars mengatakan...

trims tutorialnya sob...
tapi apa gak bikin blog berat tuh?

Kang Sugeng mengatakan...

duuuh... skripnya kepanjangen. Bikin pusing dit.

Risal Faqih mengatakan...

thx for info sob

Penghuni 60 mengatakan...

iya nih, aku jg ikut pusing,
musti belajar dulu...
:)

q ingin bisa mengatakan...

kunjung malam kang adit seng ganteng dewe!!!hehehe...!!!yang tak tunggu datang juga yuah,izin kopas dulu yuah kang!!!matur sembah nuwun sadayanipun

phonank mengatakan...

Wah keren...

bisa lebih ringkas dan hemat tempat widget nih,, jadi gak perlu numpuk2 di side wrapper,,

Berita 15 mengatakan...

Untuk sahabt ku ada award untukmu,lanjutkan seluruh langkahmu untuk memajukan blog indonesia

Unknown mengatakan...

Tampilan menjadi lebih menarik, simpel, tidak memakan tempat, dan tentunya lebih ringan blognya. Trims tutorialnya tentang cara membuat menu tab view.

Yulia Rahmawati mengatakan...

wah,,,
klo udah masalah teknik2 blog beginian
saya gak ngerti,,,,
heheh

Eka Sapri Alvyanto mengatakan...

wah thank's banget bro,infonya sangat bermanfaat bagi blogger pemula seperti saya, teruskan kreasi kamu bro, sekali lagi thank's...

pandi mengatakan...

ilmu baru.. bungkus.. teriamkasih mas aditya.. salam kenal..

Hanna Pertiwi mengatakan...

ilmu baru nih sobat, trims udah berbagi, salam kenal sobat

hybrid car mengatakan...

ini untuk blogspot ya mas ?Kalau untuk wordpress bisa enggak ?

armed mengatakan...

thanks mas aku coba tapi kurang sempurna, judulnya udah muncul tapi kok isi ga ada ya. mohon beritahu cara buat isinya???

armed mengatakan...

thanks mas aku coba tapi kurang sempurna, judulnya udah muncul tapi kok isi ga ada ya. mohon beritahu cara buat isinya???