CARA MEMASANG WIDGET MENU TAB VIEW TIGA KOLOM DI SIDEBAR

C

oba hitung berapa widget yang terpasang di sidebar Blog sobat! Apakah sobat ingin menambah daftar widget yang baru di sidebar Blog, wah tentunya sidebar Blog akan menjadi semakin panjang dan kurang nyaman dilihat. Untuk mengakali masalah ini sobat dapat memanfaatkan widget khusus yang bernama Menu Tab View 3 kolom di sidebar. Dengan Menu Tab view 3 kolom ini sobat dapat menghemat banyak space di sidebar Blog. Sehingga tampilan blog menjadi lebih cantik dan nyaman dipandang.

Membuat menu dengan tab view di sidebar ini memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik–baik tutorial ini sebelum memulainya dan yang paling penting jangan lupa untuk backup template Blog terlebih dahulu.

Mari kita Mulai :

1). Login ke Akun Blogger sobat >> klik Rancangan/Design >> klik Edit HTML, beri tanda contreng pada kotak bertuliskan Expand Template Widget lalu jangan lupa klik terlebih dahulu pada tulisan Download Template Lengkap untuk membackup template blog sobat.

2). Cari kode yang bernama </head> , untuk lebih mudah mendapatkannya gunakan fasilitas search pada internet Browser dengan cara menekan tombol F3 lalu masukan kode yang diinginkan

3). Setelah kode </head> ketemu, kemudian langsung ganti dengan kode di bawah ini:

<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>
</head>

4). Setelah itu cari kode ]]></b:skin> dan langsung ganti dengan kode di bawah ini :

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;
}
]]></b:skin>

5). Kemudian simpan template sobat!

6). Langkah selanjutnya, kembali klik Rancangan/Design >> klik Add Gadget/Tambah Gadget >> pilih yang HTML/Javascript. Berilah judul pada kolom HTML/Javascript sesuai yang diinginkan dan masukan kode di bawah ini ke dalam content HTML/Javascript

<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: 300px;">
<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>

7). Kemudian Simpan Widget yang sudah sobat buat tadi.

NB.

= Kode yang berwarna BIRU silahkan sobat isi dengan judul - judul dari menu
= Berwarna MERAH isi dengan menu. (Sobat bisa menambahkan link, gambar, banner, dll.)

Selamat mencoba