Buat Tab View Menu d Sidebar

Tab View Menu adalah menu yang memiliki beberapa tempat untuk menampatkan menu pada sebuah kategori dalam satu tempat,keuntungan dari View Tab Menu itu sendiri adalah untuk menghemat tempat menaruh daftar-daftar menu blog kita. jadi walawpun kecil Tab View Menu ini sangat berguna sekali untuk menaruh menu yang cukup banyak.selain memperindah penampilan blog, tab view menu juga dapat mengurangi space/ruang yang berlebihan pada blog Sobat. Dan pastinya tidak memberatkan sebuah blog.
Langsung aja ya sob berikut cara membuat tabview :


Masuk blogger > rancangan > edit html > centang expand template widget
cari kode ]]>


Copas kode di bawah ini tepat di atas kode ]]>


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 120px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #F5F9FD;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
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;
}


Keterangan :


width: 120px;= lebar tabs (tab1, tab2, tab3).
background-color: #FFFFFF;= warna latar belakang tabs (tab1,tab2,tab3).


selanjutnya cari kode </head> kemudian Copas script di bawah ini tepat di atas kode </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>


Kemudian Simpan / Save Template.


Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript. copy kode di bawah ini di dalam box atau kotak HTML/Javascript



<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a href="http://www.blogger.com/post-edit.g?blogID=5748627937974122739&postID=8610530417183793982">Judul Tab 1</a>
<a href="http://www.blogger.com/post-edit.g?blogID=5748627937974122739&postID=8610530417183793982">Judul Tab 2</a>
<a href="http://www.blogger.com/post-edit.g?blogID=5748627937974122739&postID=8610530417183793982">Judul Tab 3</a></div>
<div class="Pages" style="height: 250px; width: 350px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>



Keterangan :


width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab.
Judul Tab 1,2,3 itu adalah lah judul tab, ganti judul tab di atas sesuai keinginan anda .
Isi tab 1,2,3 bisa di isikan script html, banner dan script widget lainnya