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.

Related Post