Cara membuat tab view blogger

Widget tab view sudah banyak digunakan pada blog. Tab view ini sangat berguna, terutama dalam hal menghemat tempat. Karena, pada widget tab view, 1 kotak bisa terdiri dari beberapa tab.

Klo bingung, contoh penggunaan tab view bisa sodara liat dibawah ini.



Trick kali ini adalah cara membuat tab view pada blog. Cara membuat tab view sangat mudah kok. Kita coba yuuk..

Pertama, download dulu template Sodara.

Pada menu 'Layout' - 'Edit HTML', copy kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs {
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px;
padding-top: 3px;
margin-right:2px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
background-color:#fff;
}

div.TabView div.Tabs a:hover {
background-color:#ebebeb;
}


div.TabView div.Tabs a.Active {
color: #fff;
background-color: #000;
}

div.TabView div.Pages{
clear: both;
border: 1px solid #000;
overflow: hidden;
background-color: #fff;
}


div.TabView div.Pages ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

div.TabView div.Pages li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:2px;
padding-$startSide:18px;
line-height:1.5em;
background:url(http://i40.tinypic.com/x26lj9.png) no-repeat ;
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad{
padding: 3px 5px;
}

Selanjutnya, sebelum kode </head>, copy-paste kode berikut :

<script src='http://mezzaluna08.bravehost.com/tab_view.js' type='text/javascript'/>

Simpan template.

Kemudian, pada halaman 'Layout' - 'Page Element', silahkan pilih 'tambah gadget' seperti biasanya Sodara bikin widget baru, kemudian pilih saja yang 'Javascript/HTML'.

Silahkan masukkan kode dibawah untuk tab view sodara :

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a>Tab1</a>

<a>Tab2</a>

</div>

<div style="width: 300px;
height: 207px;" class="Pages">

<div class="Page">

<div class="Pad">

IsiTab1.1<br/>
IsiTab1.2<br/>

</div>

</div>

<div class="Page">

<div class="Pad">

IsiTab2.1<br/>
IsiTab2.2<br/>

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Sodara tinggal mengganti atau menambahkan 'Tab1' - 'Tab2' dengan judul yang akan tampil pada masing2 tab.

Ganti ukuran tab view sodara sesuai dengan ukuran tema blog sodara.

Sedangkan untuk isi tiap2 tab, sodara bisa mengganti atau menambahkan teks berwarna biru.

Kalo sudah, tinggal save, lalu preview.

Selamat mencoba trik membuat tab view di blog Sodara!