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