Membuat Menu Tab View

Posted By anasku
Menu tabview adalah menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak diapakai untuk menghemat tempat pada blog dengan sistem menampilkan atau menutupi halaman tabel sesuai dengan tabel menu diatasnya. Jadi jika kita mengklik menu diatasnya maka halaman tabel yang muncul adalah halaman tabel yang dibuat sesuai dengan menu tabel diatasnya, dan jika kita mengklik menu tabel lain maka yang muncul adalah halaman tabel yang bersesuain namun tetap pada satu tempat itu.

Coba perhatikan dibawah ini :


Gimana sudah paham belum? mau cara buatnya?

Oke kita pakai teori dari Mas Kendhin saja karena mudah dipahami.

Pertama yang harus kamu lakukan adalah Log In dan masuk menu Layout kemudian masuk bagian Edit HTML

Selanjutnya taruh code CSS dibawah ini diatas code ]]></b:skin>


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}



Perhatikan text yang berwarna merah itu keterangan dari menu tab view yang bisa kamu edit sesuai keinginan kamu, untuk code warna bisa dilihat disini.

kalau sudah pasang script dibawah ini diatas code </head>



<script src='http://sites.google.com/site/anasku2000/tabview.js' type='text/javascript'/>


kalu sudah silahkan "Save Template" Anda.

kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klik Add new gadget kemudian pilih HTML/JavaScript dan taruh Code dibawah ini :



<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>


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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :

  1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
  2. Code yang berwarna hijau adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
  3. Code yang berwarna merah diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.
  4. Dan jika ingin menambah halaman tabel perhatikan code yang berkedip, dan tambah seperti itu dibawahnya.
Kalau sudah tinggal SAVE.

Artikel Terkait untuk "Membuat Menu Tab View"


39 comments:

cAcH_weLEK said...

Ini dia yang aku cari... makasih ya mas..

RAMKUR said...

saya udah blogwalking kemana mana, untuk cari cari tutorial ini, dan udah nanya beberapa kali ke mas, akhirnya muncul juga disini. makasih banyak mas

Anonymous said...

kalau naruhnya deket navbar gmn caranya?
jwab ke Ym saya yah(ozy_tunder@yahoo.com)makasih

Fauzy said...

yang sperti punya bpk yang paling atas gmn?

nadnad said...

thx maz..
saya berhasil ngebuatnya. tapi, spertinya ada yg kurang. ingin tanya kelanjutannya. gimana supaya text yang ada di pagenya bisa di klik sperti yang ada pada menu maz?? stelah di klik, tampil post sesuai dg judul yg di klik.

mohon dijawab ya maz. thx b4
salam knal

Anonymous said...

SIIIP DEHH MAKASIH YA..

SaNtri Blog said...

ini tutor yang saya cari2.... Q mau coba ah.... dah pusing liat blog sndiri kepanjangan

AKOE said...

puas banget..... tp rd binun maklum pertama mas
dan makasih banget semoga allah melimpahkan rahmatnya amin

jabrix said...

horeeeeeeeeeeeeeeeeeeeeeee:M akhirnya dapet juga

donkissotes said...

makasih pencerahanya ,,,
artikel ini yg lama dah aq cari2 ,,
btw mampir friend,
thx be4
donkissotes.blogspot.com

ajadjkt said...

wah yang ini tab viewnya ada 4 biji lebih keren dari punya gw sekarang!!!!!!! cobain ah......

thx infonya n mohon izin menggunakan jurusnya ..........

ajadjkt said...

tapi setelah di coba ternyata cuma 3 tab juga wah sama aja kayak yang uda gw coba!.....



tp BTW thx ya........

Henry Nainggolan said...

saya sudah coba, tapi kenapa ya tab ke-3 ngga muncul dan isi dari tab2nya juga ngga keliatan

Man's Indigenous said...

Thank Brow... Artikelnya keren membantu banget buat para pemula spt gue .....

Unknown said...

agar...submenu itu muncul setelah diletakan kursor di atasnya?

pakar bisnis online said...

nah yang atu ini izin cv ya.....

Nanang Kosim said...

Makasih atas info yg sangat berharga ini.
Dah gk sabar neh pengen nyoba....
Yu.. ah......

Aje Gile Mantab said...

mantab! thanks alot younger brother! ^_~

Hyper Custom said...

keren.. thx por inpona bro.. lam kenal...

Unknown said...

mas saya dah coba nih tips buat menu horizontal tapi kok tidak bisa ya!tolong kasih solusi lain lah soalnya saya sangat butuh banget nih soalnya saya sebentar lagi mau persentase buat blog,,jadi saya masih bingung...tolong ya mazz makasih banyak...

cari duit di internet said...

mas saya dah coba cm saya masih bingung ngisi nya! gmana ya mas?

mzddy said...

http://www.mzddy.blogspot.com visit me

Justsonix said...

@nuke bakoes :

float: left;
display: block; <== ganti jadi display: horizontal;

http://justsonix69.blogspot.com

Anasku said...

Makasih atas tambahanya..

semoga bermanfaat untuk semua

Unknown said...

kalo ada 2 multi kolom da;am 1 blog gabisa ya mas bro?

tangandunia said...

jadi sih jadi tapi sewaktu diklik menu yang di sebelahnya kenapa gak bisa ???mohon dikoreksi lagi
don't forget visit my blog...kritik dan saran penting sekali

Fantastik Band said...

saya sudah jadi tapi ketika di klik tidak bisa
kenapa ya mas

Berbagi ilmu sesama Newbie said...

mantap brooo
keren dari gwa gak ngerti ngambil artikel di t4 orang ,, tapi disini gwa jadi ngerti jempol intuk loe

Berbagi ilmu sesama Newbie said...

gwa izin ambil artikelnya yah untuk blog gwa

Unknown said...

mantap boz..

akariku said...

artikel yang mantap untuk dicoba , thanks..

Unknown said...

salam kenal ya.nyobain ah......
duh....ketinggalan eung.biar lambat asal bisa.
Trim's.

Yusdi Lastutiyanto said...

Masih bingung..tapi akan tetap mencari thanks. apa bisa di lakukan di wordpress?

Unknown said...

wah menarik juga yah mau nyoba ahhhhh

Anonymous said...

perlu dicoba nihhh....... thank's

TUTORIAL BLOGING said...

terima kasih,sukses selalu

SAKE XP said...

nah, ketemu juga tutorial ini

Harga Mobil Bekas said...

Mantap mas ternyata bikin menu tab view gampang banget..

obat kutil kelamin ampuh said...

bagus gan, makasih

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas