Membuat Menu Multi Kolom

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:




Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas

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 #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

Untuk mengetahui kode-kode warna silahkan klik disini

5. Silahkan masukkan kode dibawah ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>


6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:

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

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

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

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


Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil!!!


Postingan yang berhubungan:



Comments :

56 Komentar to “Membuat Menu Multi Kolom”
Surury said...
on 

Baguss bagus...

netanielgiovanni said...
on 

nice post nih

boleh tukeran link ga?
link ke blog ini dah kupasang di blogku
biar gampang kunjungan rutin gitu

rakyatindonesia said...
on 

saya udah coba tetapi kenapa ga bs?
kalo di blog yang pake wordpress, apa bisa di masukin source code di atas...
thank's

rakyatindonesia said...
on 

thank's ya mba blogger.. tapi ko tab nya ga berubah kalo diklik (tab hover)

makasih lagi mba blogger.........

[kurni]Awan_cLIK3rz said...
on 

gyaaa, pusing duluan aku..
hehe, buat yg bikin neh tutorial.
SEMANGAAAT

-salam persaHabatan-
Yup !

anjos said...
on 

apa gak salah kodenya ini da aku coba tapi gak bisa di gunakan tab kolomnya yang lain

Mugi Fitrianto said...
on 

salah tuh kodingnya....hehehe...

Dody FariaL said...
on 

keren tutorialnya..coba ahh..

PTC said...
on 

Makasih Banget Bos, Keeeeeeeeeerrrrrreeeeeeeeeeeeeennnnnnnn

dimaz said...
on 

Salam kenal yo..
aku coba praktekkan ya mas..?
Mudah-mudah gak masalah, bagus tampilannya, aku masih belajar nich

v_yant said...
on 

Makasih Sob.. Salam Kenal ..

M.D. Design said...
on 

Thanks atas infonya mas...........

didik miftakhul arifin said...
on 

selamat pagi..thanks atas semua tutorialnya..
membuat saya semakin tertarik untuk belajar blog..
soalnya saya ini pemula banget..sekali lagi thank's

Zinnu said...
on 

Nice and thanks for this tips Astaga.com lifestyle on the net

M_jumani said...
on 

salam kenal ! info yang sangat berguna !

Rudy said...
on 

wih bagus mbak thank's yach........

vengeance said...
on 

byuuuh kug masih bingung twoq....dahq coba ug gg bisa...hmm

d_cyber said...
on 

tombol munu kolom ( Ebook dan comentator ) gk bisa di klick / sperti gkda linksnya

Qiraba Blogger said...
on 

trims.....

robiul aziz said...
on 

makasih

TeoFiLuS said...
on 

kerennn

VZ.Member said...
on 

cara masukin linknya gimana ?

Jon said...
on 

Mantabz bozz,,,

Blog SEO Drakula said...
on 

Belum ngerti banget masalah ganti linknya gan padahal bagus menghemat tempat di blog..mksih

Cyberz said...
on 

Thanks SOb.

Jangan Lupa berkunjung ke blog ane yah.

:)

Klik aja Nma Commmentator ini klw mau berkunjung :)

Asmara Susanto said...
on 

wah ini bagus untuk kelangsungan blog ane gan, seep lah visitback yah+comment2 jg

Yogie Soo Yeon said...
on 

alhamdulillah akhirnya ada yang mau berbagi ilmu :)

sugeng tigefa said...
on 

file javascriptnya sudah gak berfungsi mas mohon di update kembali

ini filenya

http://superinhost.com/trikblog/tabview.js

irwan bin suanda said...
on 

pusing.he

misikeladi said...
on 

tutorial bagus gan, siap tuk di pasang..
caranya adsense biar dapet duitnya banyak gmn gan?

butuh yang segar" misikeladi.blogspot.com

ink prasasti said...
on 

thx infonya, tar di coba deh,
sekalian nanya y, bagimana pengaturan css dalam pembuatan template blog dari file PSD ( photoshop ) ke file HTML yg pake dreamweaver dalam pembuatan template blog, tlong y, salam dari blogger depok, www.pasirlangit.blogspot.com

asep sutisna said...
on 

MAKASIH ILMU NYA.....
www.kerjamandiri12.blogspot.com

prananda said...
on 

keren banget gan ,,,
makasih banyak,,,

kapan-kapan visit yah gan ,,hihi
http://berau-komputer.blogspot.com/

Rudy Hartono said...
on 

terima kasih sudah berbagi, salam kenal

norman kristiono said...
on 

wahh . mantep nih :D

Roslan Ellank said...
on 

tips yg bagus

maciepunk5 said...
on 

nice info nihh
tpi kyax susah dan ribet...
tpi mau tak coba dulu mudah mudahan berhasil

nuno said...
on 

semoga bermanfaat bang...
jgn lupa mampir di http://posting-nuno.blogspot.com/

Filay Fauzie said...
on 

]]> yang gini gimana saya gak ngerti ??

The7Bloggers said...
on 

Mas blog kamu kan DOFOLLOW, mengapa kok ndak di beri pilihan name/url ?

Kalau tidak di beri itu ya percuma saja mas.....? Yang berkomentar di blog kamu ndak dapat backlink....

Xixixixixi hehehehehe maf ya....
Kasihan dunk para blogger yang banyak komentar di blog kamu, mereka tertipu walaupun ini blog DOFOLLOW tetapi tidak ada fasilitas name/url ya sama ajah mas.......

Ilyaz StreetTeam said...
on 

mantappp, izin sedot gan
mampir ya ke blog ane http://allsoftwareandkey.blogspot.com

Chritis X-Coder's Kupang said...
on 

thanks gan infonya sngat membantu

hit me back

saya mau tukeran link

x-coderscommunitykupang.blogspot.com

Rio Manihuruk said...
on 

kerenn bget mas terimakasih sudah mau berbagi tutorialnya

Misbah Hiday said...
on 

saya coba ya... posting yang sangat bermanfaat

riou hato said...
on 

wow....
ini kolomnya bisa ditambah lagi ga?

Blogspot Tutorial

Felix Malindra Novan said...
on 

wah bagus tuh boleh di coba....

oea gan ane punya referensi buat yang butuh printer, baca di artikel Recommend Printer

mungkin agan juga butuh panduan membeli printer, bisa di baca di artikel yang berjudul How To Buy Printer

Ahmad Rizaldi said...
on 

wahh .. thanks ya sob

jangan lupa visit & follow back

http://ramadhanakurnia.blogspot.com/

Adam Wb said...
on 

keren,,
http://shin-tek.blogspot.com

echocyber said...
on 

Thanks y mbak Artikelnya,Izin coba dulu.

bara xcom said...
on 

numpang tanya broooo.
itu diatas ada saya lihat iklan banyak pemilik blog yang pasang iklan. emang sampai hari ini tiap bulan trima brapa duit yang anda trima.
makasih sebelum nya

Ar royyan Dwi Saputra said...
on 

Langsung ke TKP untuk Uji Coba

Ahmadi Tanjung said...
on 

Beli Followers Twitter Murah & Terpercaya Hanya di JuraganFollowers.com
Beli Followers Twitter Murah & Terpercaya Hanya di JuraganFollowers.com
Beli Followers Twitter Murah & Terpercaya Hanya di JuraganFollowers.com
Beli Followers Twitter Murah & Terpercaya Hanya di JuraganFollowers.com
Beli Followers Twitter Murah & Terpercaya Hanya di JuraganFollowers.com

Akram Berbagi Dan Komputer-Rifai Blog Berisi Info Menarik Dan Teknologi

Mau Bikin Website + Hosting Murah AbizZ? Ke Rajawebhost.com aja!

Ekiosku.com jual beli online aman menyenangkan

Agung XD dan Jakarta-Cyber4art Blog Berisi Informasi Komputer, Software Dan Info Menarik


InfoDariBlogspot



Pasang Iklan Murah di InfoDariBlogspot

Ukuran Banner 125x125
Posisi: Sidebar Kanan
Slot tersedia: 3 Slot
Traffik up to 600 visitor/day
Alexa 313,260
Pagerank 0 {NOL}

Terimakasih...

Administrator said...
on 

http://neutralofskynet.blogspot.com/

rofiq ali said...
on 

baguuuussssssss..... sangat membantu

kunjungi juga http://zofiq.blogspot.com/

Jonny Chan said...
on 

Agen Taruhan
Domino qq
qq Online
Agen Poker
Bandar Bola
Tvonline
Bioskop 21
Tv Indonesia
Film dewasa
Info Bola
Prediksi Togel
Info Togel
Aplikasi Gratis
Foto Bugil
Hasil Bola
Cerita Dewasa
Indo Togel
Rumus Togel
Prediksi Bola
Livescore

Luna Sweet said...
on 

Berita Sepak bola
cerita dewasa
lotere indonesia
nonton bokep
Nonton Movie Online
Film Bioskop Terbaru
berita artis hot

Post a Comment

 

RECENT COMMENT

RECENT POST