Membuat Menu Tab View Pada Blogger

Menu Tab View bisa menghemat tempat di sidebar karena dalam satu widget bisa menyimpan beberapa menu sesuai kehendak kita , bukan itu saja tampilannyapun tampak cantik dan terkesan profesional, seperti tampilan di pada blog saya yang lain, klik di sini.
Cara Membuat Menu Tab View ini adalah sbb. :

• Masuk ke Dashboard , Pilih Layout , lalu klik Edit HTML
• Backup template dulu dengan  Download Full Template
• Kemudian cari kode ini ]]></b:skin>
• Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
• Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>

    /* Menu Tab View
    ----------------------------------------------- */
    div.TabView div.Tabs {widht:100%;
    padding-top: 0px;
    height: 24px;
    overflow: hidden;
    }
    /* Menu Utama */
    div.TabView div.Tabs a {
    float: left;
    display: block;
    width: 110px; /* ukuran lebar menu */
    text-align: center;
    height: 30px; /* ukuran tinggi menu */
    padding-top: 7px;
    margin-right:4px; /* jarak antar menu */
    vertical-align: middle;
    border: 1px solid #ccc; /* warna border menu */
    border-bottom-width: 0;
    margin:0px;
    padding: 5px 0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;; /* besar hurup menu */
    background-color: #4c4c4c; /* warna latar menu */
    color: #FFFFFF; /* warna hurup menu */
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -webkit-border-top-left-radius:15px;
    -webkit-border-top-right-radius:15px;
    }
    div.TabView div.Tabs a.Active {
    background-color: #FFFFFF; /* warna background menu aktif */
    color: #000000;
    }
    div.TabView div.Tabs a:hover {
    background-color: #999999; /* warna background menu hover */
    color: #FFFFCC;
    font-weight: bold;
    }
    /* Kotak Utama */
    div.TabView div.Pages {
    clear: both;
    border: 1px solid #CCC; /* warna border kotak utama */
    overflow: hidden;
    background:#FFFFFF; /* background kotak utama */
    }
    div.TabView div.Pages div.Page {
    height: 100%;
    padding: 7px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad {
    padding: 5px 0px;
    font-size: 12px; /* besar hurup kotak utama */
    }

    /* tabview css end */ 

• Perhatikan text-text yang berwarna merah, silahkan disesuaikan ya. 
• Selanjutnya pasang kode berikut ini sebelum kode </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

• Jika sudah tinggal Save Templates
• Selesai …  untuk langkah pertama,
• Langkah ke dua Silahkan masuk kemenu "Page Elements"
• Klik  "Add a Gadget" ,  pilih "HTML/Javascript"  ,
• Kemudian copy paste kode dibawah ini :

    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 260px;">

    <a>Menu 1</a>
    <a>Menu 2</a>
    <a>Menu 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>

Catatan :

• Angka warna pink adalah tinggi dan lebar tab view, silahkan disesuaikan
• Kode yang berwarna Biru Adalah text Menu utama
• Kode yang berwarna merah adalah isi dari tab view tsb.
• Saya juga pernah posting Membuat Dropdown Navigation Menu atau Tutorial Blog lainnya .

Nah bagaimana ??, apakah sobat juga mau Tampil Cantik Dengan Menu Tab View ??.

.::Related Posts: