Tips Trik Blog: Cara Memasang Multi Tab Blogger

Selamat Datang di Fadlypuccino Blogs, Tips Trik Blog | Free Blogger Widgets.
Tips Trik Blog kali ini akan membahas mengenai Cara Memasang Multi Tab Blogger.
Multi Tab blogger adalah sebuah tab menu yang biasanya memuat 2-3 menu sekaligus dalam satu tab menu, selain sebagai pemercantik tampilan pada blog anda, tab ini juga bisa menghemat ruang pada blog anda.

Pertama, yang harus sobat lakukan adalah Login dulu kedalam akun blogspot sobat.
kemudian, masuk ke Menu Rancangan - Pilih elemen halaman - Add Gadget - Pilih yang HTML/ Javascript.
setelah muncul kolom HTML/javascriptnya, sobat copy dan pastekan kode berikut:


<style>
/* Modified By Fadlypuccino */
div.TabView div.Tabs
{
height: 24px;
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: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #D8D8D8; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Tahoma", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
/* Modified By Fadlypuccino */
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
color: #fff;
background-image:url('http://lh3.ggpht.com/_TWC8zfBIdik/S_mtk3GmCTI/AAAAAAAAA0Y/Icb5zF59LTw/h2.gif'); /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #D8D8D8; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #fff; /* Warna background Kotak Utama */
}
/* Modified By Fadlypuccino */
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/* Modified By Fadlypuccino */
</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: 300px;" class="Tabs"> <!-- 450 adalah lebar boks tab -->
<a>Tab 1</a> <!-- Tab 1 adalah judul menu tab 1 -->
<a>Tab 2</a> <!-- Tab 2 adalah judul menu tab 2 -->
<a>Tab 3</a> <!-- Tab 3 adalah judul menu tab 3 -->
</div>
<div style="width: auto; height: 350px;" class="Pages"> <!-- 250 adalah tinggi boks tab -->

<div class="Page">
<div class="Pad">
ini isi tab pertama
</div>
</div>

<div class="Page">
<div class="Pad">
ini isi tab kedua
</div>
</div>

<div class="Page"> <!-- Buat bikin tab baru -->
<div class="Pad"> <!-- CONTENT -->
ini isi tab Ketiga <!-- ISI CONTENT -->
</div> <!-- jangan lupa ditutup -->
</div> <!-- jangan lupa ditutup -->

</div>
</div>
</form>

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

clo sudah, saobat SAVE. dan tinggal sobat kreasikan sendiri sesuai kemauan sobat.
hasilnya akan seperti ini (Multi Tab di Blog saya):

Sekian Tips Trik Blog saya kali ini, terima kasih sudah menyimak, dan jangan lupa untuk memberikan komentar yang positif demi kemajuan blog ini.
Jika ingin melihat lebih banyak Tips Trik Blog lebih banyak lagi, bisa kunjungi Fadlypuccino Blogs, disana juga terdapat Free Blogger Widgets alias widgets blog gratis yang bisa anda terapkan untuk mempercantik tampilan Blog anda