Kali ini saya akan menjelaskan cara membuat Tab Menu. Tab Menu sangat bermanfaat sekali karena kita bisa menghemat ruang yang ada di blog kita dan kita juga bisa meletakan beberapa gadget ataupun beberapa banner ataupun teks didalam halaman yang sama tetapi dipisahkan oleh kolom tersendiri dan kolom inipun hanya bisa dibuka bergantian.
Sebenarnya memang agak rumit dalam pembuatan Tab Menu ini dikarenakan banyaknya script yang harus kita copy dan paste ke template maupun gadget, tapi bagi anda yang suka ngutak-ngatik script, saya pikir bukan hal baru bagi anda. Andapun bisa meedit script tersebut untuk menyesuaikan dengan halaman blog anda. Untuk itu silahkan ikuti langkah-langkah berikut ini :
Langkah Pertama :
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
6. Persis sebelum kode tersebut, pastekan script di bawah ini
7. Cari lagi di dalam template anda kode ]]></b:skin>
8. Persis sebelum kode tersebut, pastekan script di bawah ini
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }
9. Klik Simpan Template
Langkah Kedua :
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan ke dalam kolom Konten script di bawah ini
<form action="tabview.html" method="get">
<div id="TabView">
<div style="width: 100%;">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
<a>Judul 5</a>
</div>
<div style="width: 100%; height: 250px;">
<div>
<div>
Entri data anda di sini yang akan tampil di kolom "Judul 1"
</div>
</div>
<div>
<div>
Entri data anda di sini yang akan tampil di kolom "Judul 2"
</div>
</div>
<div>
<div>
Entri data anda di sini yang akan tampil di kolom "Judul 3"
</div>
</div>
<div>
<div>
Entri data anda di sini yang akan tampil di kolom "Judul 4"
</div>
</div>
<div>
<div>
Entri data anda di sini yang akan tampil di kolom "Judul 5"
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>
7. Klik Simpan
Kode script di atas yang di awali dengan tanda # menyatakan warna, seperti #000000 #FFFFFF #999999 #2E2EFE #E6E6E6 #0B516E #DF0101, silahkan anda ganti dengan warna pilihan anda, untuk mendapatkan variasi kode warna silahkan anda surfing di sini [ html-color-codes ]
Selamat mencoba, semoga bermanfaat
Kamis, 28 Mei 2009
Membuat tab menu blogspot
<script src='http://h1.ripway.com/pinginbelajar/campuran/menu_tab.js' type='text/javascript'/>
div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">
Label:
Tutorial
Langganan:
Posting Komentar (Atom)
Ada sample situs yg pake script kaya' gini gak?
BalasHapusdi blognya kang rohman....bro...
BalasHapusorang yg di tanya wordpress
BalasHapusTerima Kasih ya ... !!! Atas Semua Infonya
BalasHapusTrima kasih mas. aku berhasil. beberapa hari ini aku di pingpong ama mbah google tuk cari scipt membuat tab menu. akhirnya datang juga ha.ha.....
BalasHapusmampir dong di:www.pakdekaryo.blog.spot.com
Saya pemula di internet, sudah buat web dengan benerapa entri. beberapa waktu lalu error/tidak dapat diakses. sekarang sudah diperbaiki tetapi tidak bisa entri karean kode HTML tidak diperkenankan. Ini bagaimana yaa.. tolong jelasin dong.
BalasHapusknapa di blog saya gg bisa dipasang iah scriptnya ???
BalasHapusbaiklaaah.... akan Ku coba.
BalasHapusthanks infonya
BalasHapustx
BalasHapus"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
BalasHapusXML error message: Open quote is expected for attribute "{1}" associated with an element type "src".
haduh....
BalasHapussemuanya sama aja...
nda bisa scriptnya saya pakekan di blog knapa yah, mohon pencerahan.??
BalasHapusTriknya bikin tabnya bgs..ni yg ku cari thnk infonya sob
BalasHapuskasih tau dong posisi kode html-nya, kira -kira posisinya di bagian atas, tengah, atau bawah, biar gak bingung nih nyarinya
BalasHapussngat membantu,,,,,
BalasHapusthank's banyak sob..
BalasHapusdah beberapa kali nyoba, kok ga berhasil2 ya? tiap kali mo nge-save, selalu ada "Kami tidak dapat menyimpan template Anda." i don't know why...
BalasHapuswahh mntaaappp brooo... thnks akn q cba nie scriptnya,,
BalasHapuswah infonya membantu neh...tak coba yah
BalasHapusmas di kasi script yg prtama kok gk bisa??
BalasHapusmhon pnjeLasannya..
tk tnggu
g add sukrin sut nya???
BalasHapusyupzZ...mdh2n dpt aplikasikn, thks.
BalasHapusok gan same same
BalasHapusaaku mau coba... tyhank ya infonya
BalasHapuswww.grosirbajuanaktermurah.com
aku mau cobe...mudah-mudahan bisa ya.
BalasHapuswww.grosirbajuanaktermurah.com
keknya kode hmtl nya salah.
BalasHapuscopas kode nya dengan bener gan...
BalasHapussupaya isi tab nya bs nyusun vertikal gmana gan.....
BalasHapusmhn pencerahan
tenx infonya...tapi kalo buat di wordpress gimana yak??heeee
BalasHapushatur nuhun kang, katampi pisan infona,...
BalasHapusTemplate Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
BalasHapusPesan error XML: Open quote is expected for attribute "{1}" associated with an element type "src".
thanks ya buat info nya,, saya lagi butuh banget soalnya ni info,, untuk mmpercantik blog saya htttp://futsals.blogspot.com/
BalasHapuskapan2 mmpir juga ya kblog saya
OM, FOLLOW balik BLOG aku si, PLEASEE,, aku tunggu lo, awas> klw gx di follow back , hehe
BalasHapusok gan
BalasHapusthanks bro untuk semua trik nya !
BalasHapusthanks atas info and ilmu nya gan,,,,:d
BalasHapus