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 LOGIN
Pada dasbor pilihTata Letak/Rancangan
pilih Edit HTML
Centang kotak kecil disamping EXPAND TEMPLATE WIDGET
Sebaiknya backup dulu template sobat dengan meng-klik
DOWNLOAD TEMPLATE LENGKAP
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;
}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 != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
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.. 
Berikut ini Membuat Tombol Follow Twitter di Blog :
