Membuat Menu Multi Kolom DiBlogspot

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

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 id=”TabView”>
<div style=”width: 350px;”>
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>

</div>
<div style=”width: 350px; height: 250px;”>

<div>
<div>
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />

</div>
</div>

<div>
<div>
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />

</div>
</div>

<div>
<div>
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!!!

baca juga artikel lain:

-cara membuat blog
-cara membuat posting
-cara membuat link field di blogger
-free template
-cara mengganti template
-cara membuat photoblog
-membuat readmore pada blogger
-memasang kalender cantik
-posting artikel blogger via email
-situs komunitas blogger
-microblogging
-cara membuat link blogroll bergerak
-cara cepat posting blog lewat via hp handphone
-tutorial cara memasukkan data pdfmicrosoft wordexcel powerpoint di blog kalian
-melihat statistik blogger dengan blogger stats
-10 cara membuat blog anda jadi populer
-bagaimana pengunjung menemukan blog anda
-cara menampilkan kode html pada blog
-membuat back to top pada blog
-merubah new template ke template classic
-pengertian html
-cara mendaftarkan blog ke bing
-cara membuat akun windows live
-penyedia layanan hosting file gratis
-cara memasang flash player di blog
-membuat daftar isi blog agar lebih menarik
-cara membuat link blogroll bergerak
-cara membuat judul blog bergerak pada blogger
-cara memasang musik pada blog
-cara menonaktifkan comment di blogger
-cara membuat recent comments menggunakan java script
-cara setting custom domain di blogspot
-cara membuat related post widget di blogspot
-cara pasang widget top komentator di blogspot
-daftar blog gratis domain umy
-cara membuat kotak chatting tersembunyi
-pasang profil badget facebook di blog kalian
-geovisite pengengunjung blog
-cara membuat related post widget di blogspot

Link Portal Teks TVjapanese instant free backlink Free Plugboard Link Banner ButtonFree Automatic Backlink ServiceFree Promotion LinkFree Smart Automatic BacklinkMalaysia Free Backlink Services MAJLIS LINK: Do Follow Backlink

61 Comments on Membuat Menu Multi Kolom DiBlogspot

      • MANTAP.
        TtpSepertinya ada kode yang salah. view tab-nya tidak bisa di klik alias tidak bisa berpindah.
        bisa tlg di sharing bagaimana cara supaya tab viewnya bisa di klik n berpindah dari title menu 1 ke title menu selanjutnya. thank`s atas infonya.

  1. Makasih bwt postingnya, insyaallah wit coba. Tapi, maaf y, mo nanya, pada keterangan kan ada warna, seperti yg Anda kutip:

    – Angka yang berwarna merah–>lebar kotak menu utama
    – Angka yang berwarna biru–> tinggi kotak menu utama

    tapi, pada tulisan Anda, gak ada yang berwarna,, jd maksud tulisan itu apa?makasih bwt penjelasannya.
    Makasih juga udah mampir ke blog wit..
    salam sobat

  2. Hello! I really love the theme you’re using here. Is this custom coded or can you show me to the location where I can download it for my blog? (: thx Sandra

  3. Greetings I am so delighted I found your blog http://blog.umy.ac.id/tutorialblogging/2010/12/22/membuat-menu-multi-kolom-diblogspot, I really found you by mistake, while I was searching on Askjeeve for something else, Nonetheless I am here now and would just like to say kudos for a remarkable post and an all round thrilling blog (I also love the theme/design), I don’t have time to look over it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the fantastic work.

  4. I am curious to find out what blog system you have been working with? I’m experiencing some minor security issues with my latest blog and I would like to find something more safeguarded. Do you have any suggestions?

Leave a Reply

Your email address will not be published.


*


Skip to toolbar