Pada kesempatan kali ini saya akan berbicara mengenai salah satu widget sidebar yaitu Tab Vieuw besrta cara pemasangannya. Tabvieuw dengan tombol-tombol kliknya memang membuat tampilan sidebar blog jadi unik dan yang lebih penting lagi menu-menu di sidebar jadi lebih ringkas dan hemat karena dengan tabvieuw kita bisa mengamas beberapa widget kedalamnya seperti popular post, lebel, arsip, dan lain-lain. Sebenarnya informasi seperti ini sudah lama dan banyak bertebaran di internet hanya saja barangkali masih ada yang belum paham, tidak berhasil atau bahkan putus asa maka di bawah ini kembali saya uraikan beberapa langkah pemasangan tab vieuw sebagaimana yang pernah di paparkan oleh para master template serta berdasakan praktek, pemahaman dan pengalaman saya. Bagi yang belum tau memang akan terasa rumit terutama pada bagian memasukkan widget atau url kedalam menu namun bagi yang sudah paham akan terasa mudah sekali meskipun Tab Vieuw ini menyangkut kode html yang panjang pada masing-masing tabnya.
Cara memasang tab vieuw
Sebagaimana informasi yang sempat saya temukan di internet, pemasangan tab vieuw adalah sebagai berikut:
1. Tentunya anda sudah login blogger, selanjutnya klik “Template” kemudian klik “Edit Html”
2. Demi menjaga keamanan jangan lupa backup template terlebih, anda copas saja kode html template anda kemudin simpan di notepat
3. Selanjutnya letakkan kode berikut di atas kode ]]</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;
}
4. Berikutnya letakkan kode javascript dibawah ini di atas/ sebelum 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>
5. Kemudian Simpan Template
6. Langkah selanjutnya klik Tata Letak, Tambahkan Gadget dan pilih yang HTML / Javascript, kemudian masukkan dan simpan kode berikut kedalamnya ( Alangkah lebih baiknya jika judul dan menu sudah di isi atau di edit terlebih dahulu melalui ms word atau notepad ).
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Popular </a>
<a>Arsip </a>
<a>Lebel </a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Kode Html Popular Post atau url lainnya
</div>
</div>
<div class="Page">
<div class="Pad">
Kode Html Arsip atau url lainnya
</div>
</div>
<div class="Page">
<div class="Pad">
Kode Html Label atau url lainnya
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan anda sesuaikan sesuka anda.
Kode yang berwarna biru silahkan anda isi dengan judul sesua widget yang anda masukkan..
Dan yang berwarna ungu adalah isi dari menu. ( Menurut pemahaman dan penerapan saya sehingga berhasil adalah kode html dari dari widget atau menu yang hendak kita pasang, misalnya arsip, popular post, follower atau yang lainnya ). Anda juga bisa menambahkan link, gambar, banner, dll.
Sebatas inilah apa yang bisa saya paparkan tanpa bermaksud menggurui, lebih tau atau bahkan hendak bersaing. Mohon maaf, sekian dan terimakasih...
Refrensi : http://www.maskolis.com, dll
