TIPS MEMBUAT MENU MULTI KOLOM

Untuk menghemat halaman blog yang tentunya semakin lama semakin penuh dengan tampilan widget atau gambar-gambar yang terpasang, pemasangan menu multi kolom tentunya sangat diperlukan. Selain tampilannya juga menarik, dengan menu ini kita tentu bisa mengatur halaman blog dengan rapi.

Okey kalau minat, langsung tarik aja maz..

Silahkan

Pada dasbor pilih

pilih

Centang kotak kecil disamping

Sebaiknya backup dulu template sobat dengan meng-klik

Selanjutnya cari code : ]]></b:skin> Gunakan tombol ctrl+F untuk mempermudah pencarian.

Kalau sudah ketemu, copy code di bawah ini dan letakkan di atas ]]></b:skin>

div.TabView div.Tabs

{

height: 40px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 75px;

text-align: center;

height: 40px;

padding-top: 3px;

-moz-border-radius: 10px;

box-shadow:0 0 10px #111;

-moz-box-shadow:0 0 10px #111;

-webkit-box-shadow:0 0 10px #111;

margin-left:4px;

vertical-align: middle;

border: 2px solid #A50F07;

text-decoration: none;

font-family: "Arial", Times New Roman, Serif;

font-weight: 900;

color: #000080;

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #A50F07;

}

div.TabView div.Pages

{

clear: both;

background-color: #FFFFFF;

-moz-border-radius: 10px;

box-shadow:0 0 10px #111;

-moz-box-shadow:0 0 10px #111;

-webkit-box-shadow:0 0 10px #111;

border: 3px solid # A50F07;

text-align:left;

overflow: hidden;

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

Ket.: Code berwarna merah dan orange dapat dirubah sesuai dengan tampilan blog

Selanjutnya cari code </head>,

lalu copy dan letakan code berikut tepat di atas </head>

<script type='text/javascript'>

function tabview_aux(TabViewId, id)

{

var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;

while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;

var i = 0;

do

{

if (Tab.tagName == &quot;A&quot;)

{

i++;

Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;

Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;

Tab.blur();

}

}

while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;

while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;

var i = 0;

do

{

if (Page.className == &#39;Page&#39;)

{

i++;

if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;

Page.style.overflow = &quot;auto&quot;;

Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;

}

}

while (Page = Page.nextSibling);

}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

</script>

Selanjutnya menuju ke

Klik

Pilih

Lalu copy dan masukkan code berikut :

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 380px;">

<a>Judul Menu 1</a>

<a> Judul Menu 2</a>

<a> Judul Menu 3</a>

</div>

<div class="Pages" style="width: 380px; height: 300px;">

<div class="Page">

<div class="Pad">

ISI MENU 1

</div>

</div>

<div class="Page">

<div class="Pad">

ISI MENU 2

</div>

</div>

<div class="Page">

<div class="Pad">

ISI MENU 3

</div>

</div>

</div>

</div>

</div></form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Ket.:

• Code Warna Biru             = Isi Dengan Judul Menu

• Code Warna Merah        = Isi Menu

• Code Warna Orange       = Sesuaikan dengan ukuran sidebar sobat.

Kalau sudah selesai,jangan lupa disimpan. Semoga bermanfaat..