Cara Membuat Tab View

Kalau Anda seorang penulis blog yang produktif, dan bingung mau mengelompokkan tulisan di blog Anda, coba pakai Tab View. Dimana tab view dapat berfungsi untuk mengelompokkan artikel-artikel yang Anda tulis, contohnya seperti ini:


Kalau sudah ada gambaran, dan ingin mencobanya!! Ikuti Tutorial ini:

1. Masuk ke Tata Letak
2. Klik 'Edit HTML'
3. Cari kode

]]><b:skin>

4. Kemudian letakkan kode berikut diatas 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: &quot;Times New Roman&quot;, 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;
}

5. Cari kode

</head>

6. Dan letakkan script berikut di atas kode </head>

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

7. Save Template

Setelah itu pergi ke Elemen Halaman

- Klik Add Gadget di sidebar Anda
- Dan masukan kode berikut:

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

{NB:
-Silahkan ganti tulisan Tab1 & Tab2 (merah) dengan judul Tab Artikel Anda, dan Anda dapat memperbanyak Judul Tab yang dibarengi dengan penyesuaian size table.
-Dan Untuk membuat link pada isi Tab (hijau) Anda dapat membuat perintahnya seperti ini
<a href="URL ARTIKEL">JUDUL ARTIKEL</a><br/>}

Selamat Mencoba.......

Cara Membuat Tab View