Memasang Multi Tab Menu Blog
Multi Tab Menu adalah sebuah kotak menu yang dapat memuat lebih dari 1 menu dan judul posting sekaligus. Multi tab menu ini juga berfungsi untuk menghemat ruangan pada halaman blog kita. Untuk cara pemasangannya silahkan ikuti langkah-langkah di bawah ini.
1. Login terlebih dahulu ke blog Anda.
2. Klik Menu Rancangan > Elemen Laman > Tambah Gadget
3. Copy paste kode berikut ke kotak konten
<style>
/* --Design by mariozoner.blogspot.com-- */
div.TabView div.Tabs
{
height: 23px;
overflow: hidden;
}
div.TabView div.Tabs a
{
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
float: left;
display: block;
width: 80px; / * -- lebar tab menu utama-- */
text-align: center;
height: 28px; /* -- tinggi tab menu utama-- */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #808000; /* warna border tab menu utama */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Time News Roman; /* font tab menu utama */
font-weight: bold; /* tebal teks : normal, bold, bolder, lighter, 100-900 */
color: #006400; /* warna font menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
color: #000000; /* warna latar background */
background-image:none; /* tambahkan url gambar jika sobat suka */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* warna border kotak tab menu */
overflow: hidden;
background-color: #000000; /* warna background kotak tab menu utama */
}
/* mariozoner.blogspot.com*/
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 350px;" class="Tabs"> <!-- lebar kotak tab -->
<a>Isi Judul Tab Menu 1</a>
<a>Isi Judul Tab Menu 2</a>
<a>Isi Judul Tab Menu 3</a>
<a>Isi Judul Tab Menu 4</a>
</div>
<div style="width: auto; height: 200px;" class="Pages"> <!--tinggi kotak tab -->
<!-- isi tab menu 1 -->
<div class="Page">
<div class="Pad">
<li><a href="gantilah dengan url link postingan kamu">Judul Posting</a></li>
</div>
</div>
<!--isi tab menu 2-->
<div class="Page">
<div class="Pad">
<li><a href="gantilah dengan url link postingan kamu">Judul Posting</a></li>
</div>
</div>
<!--isi tab menu 3 -->
<div class="Page">
<div class="Pad">
<li><a href="gantilah dengan url link postingan kamu">Judul Posting</a></li>
</div>
</div>
<!--isi tab menu 4-->
<div class="Page">
<div class="Pad">
<li><a href="gantilah dengan url link postingan kamu">Judul Posting</a></li>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
4. Klik Simpan. Hasilnya bisa sobat lihat pada kotak tab menu saya yang berada di atas posting.
Semoga bermanfaat.
