Beranda > Tips and Trik, Unggulan > Cara Membuat Menu Multi Kolom Di Blog

Cara Membuat Menu Multi Kolom Di Blog


Cara Membuat Menu Multi Kolom Di Blog ini tujuanya adalh untuk menghemat area pada sidebar

Karna memanfa’atkan menu ini, bisa menjadikan tiga atau lebih fungsi dalam satu gadget. cara membuatnya adalah sebagai 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;
}

 

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

<script src=’http://superinhost.com/trikblog/tabview.js&#8217; 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>

Silahkan anda Modif kode-kode diatas sesuai lebar templat dan kebutuhan anda.

Semoga bermanfa’at.

Admin:Zona Info Blog

Iklan
  1. LPKI JATENG
    9 Mei 2012 pukul 00:42

    salam kenal 😀

  2. 9 Mei 2012 pukul 05:02

    Salam kenal kembali… Terimakasih sudah berkunjung.

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: