Cara Membuat Menu Tab View di Blog

Menu Tab View sangat berguna sekali untuk menghemat space pada Sidebar blog kita. Karena ukurannya yang relative kecil (bisa disesuaikan) dan bisa kita masukkan Link, Gambar atau kode HTML yang panjangnya bisa minta ampun ke dalam menu ini. Bila anda tertarik melakukannya, untuk catatan sekarang atau nanti bila anda ingin melakukan edit template biasakan untuk meng-copy kode template blog anda terlebih dahulu. Ini sangat berguna bila nanti ada kesalahan pada proses pengeditan. Ini dia langkah-langkahnya :

1. Login ke Blogger.
2. Pilih Rancangan.
3. Klik edit HTML.
4. Centang Expand Template Widget.
5. Cari kode </head> (untuk pencarian cepat tekan Ctrl + F)
6. Copy kode di bawah ini, dan letakan diatas kode </head>

<script

type='text/javascript'>

//<![CDATA[

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>

7. Kemudian Cari kode ]]></b:skin>
8. Dan letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

9. Kemudian simpan template
10. Langkah berikutnya klik rancangan/tata letak
11. klik tambah gatget
12. Pilih HTML JavaScript, dan copy/paste kode di bawah ini kedalamnya

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 350px;">
<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>

13. Terakhir simpan, anda tinggal memasukan judul dan isi sesuai dengan keinginan.

Catatan :

· Untuk angka yang dicetak tebal silakan sobat ganti dengan lebar sidebar

· Huruf yang berwarna merah ganti dengan judul postingan anda

· Dan huruf yang berwarna biru adalah isi dari menu, contohnya dengan memasukan link postingan anda.

Tags: cara membuat menu tab view di blog, menu tab view, website, blog