Cara membuat menu 3 colom/Tab view

Terkadang banyak nya widget yang kita pasang di blog membuat blog kita keliatan berantakan /tidak tertata rapi nah untuk mengatasi nya kumpulan tutorial akan mencoba membuat menu yang berisi tiga kolom yang sering kita kenal dengan nama Tab view

oke kalau sobat ingin tahu cara membuat nya  ......?
berikut cara nya :

1. Login ke blogger 
2. masuk rancangan edit html 
3. untuk menjaga kemungkinan gagal download lengkap template
4. Cari kode ]]></b:skin> lalu letak kan kode di bawah ini tepat di atas kode ]]></b:skin>
   
div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 84px; /* Lebar Menu Utama Atas */ text-align: center; height: 24px; /* Tinggi Menu Utama Atas */ padding-top: 3px; vertical-align: middle; border: 1px solid #999999; /* Warna border Menu Atas */ border-bottom-width: 0; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; /*membuat effec oval pada box*/ -webkit-box-shadow: #ccc 0 2px 15px; /*membuat effec embos  pada box*/ -moz-box-shadow: green 0 2px 10px; text-decoration: none; font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */ font-weight: 900; color: #1E62B6; /* Warna Font Menu Utama Atas */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #FFFFFF; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #999999; /* Warna border Kotak Utama */ overflow: hidden; background-color: #FFFFFF; /* Warna background Kotak Utama */ -webkit-box-shadow: #ccc 0 2px 15px; -moz-box-shadow: green 0 2px 10px;  /* effec embos pada box*/ -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; /* membuat oval pada box*/ } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
5. Lalu cari kode  </head> lalu letak kan kode di bawah ini tepat diatas kode </haed>
<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>
6. Simpan template
7. Selanjut nya yang akan kita lakukan cara meletak kan kode kode script nya ..>>>masuk Rancangan >>tambah gadget >> pilih html java script  lalu masukan kode script di bawah ini

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

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

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

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 256px; height: 270px;">

<div class="Page">

<div class="Pad">

Tab 1.1 <br />

Tab 1.2 <br />

Tab 1.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 2.1 <br />

Tab 2.2 <br />

Tab 2.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 3.1 <br />

Tab 3.2 <br />

Tab 3.3 <br />

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Ganti teks teks yang berwarna biru sesuai kebutuhan sobat  oke selamat mencoba semoga berhasil