Membuat Tab View Menu Sederhana di Blogspot

Assalamu'alaikum Wr. Wb.

Hari ini saya akan membahas tentang membuat Tab View Menu Sederhana. Apa itu Tab View Menu?. Tab View Menu adalah navigasi menu yang memiliki beberapa tab yang berguna untuk menghemat tempat pada tampilan blog. Biasanya diletakkan disidebar sebelah kanan. Berikut contoh Tab View Menu di Blog ini.

Tab View Menu

Bagi sebagian blogger mungkin ini sangat berguna, seperti halnya saya. Untuk membuat Tab View Menu tersebut, berikut langkah-langkahnya.
1. Log In ke blog anda
2. Pada Dasbor pilih Rancangan
3. Klik Tab EditHTML
4. Klik Download Template Lengkap untuk backup apabila terjadi error
5. Centang Expand template Widget untuk pengeditan keseluruhan
6. Cari kode ]]></b:skin>
7. Copy kode dibawah ini dan Pastekan diatas kode ]]></b:skin>

Code:

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 93px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
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: #999999;
}
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;
}

8. Kemudian cari kode </head>
9. Copy kode dibawah ini dan pastekan diatas kode </head>

Code:

<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>

10. Save Template
11. Klik Tab Elemen Laman
12. Klik Tambah Gadget dan Pilih HTML/Javascript
13. Copy kode dibawah ini dan Pastekan pada Gadget HTML/Javascript.

Code:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 290px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 283px; height: 350px;">
<div class="Page">
<div class="Pad">

</div>
</div>
<div class="Page">
<div class="Pad">

</div>
</div>
<div class="Page">
<div class="Pad">

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

14. Edit kode diatas sesuai dengan keinginan anda kemudian tekal Save.

Selamat Mencoba dan Semoga Bermanfaat.
Wassalam.

Artikel Terkait