Membuat Tab View

Mau tau cara bikin Tab View kayak di atas??
Langsung aja oke tapi sebelumnya backup dulu tamplate bloggernya..

Cara bikin Tab View :

1. Pertama Login di blogger trus pilih Layout = Edit HTML "centang Expand Widget Templates"
2. Nah kalo udah terus cari kode ]]></b:skin>
3. Kalo udah ketemu, sekarang copy code dibawah ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* lebar menu utama yang di atas */ text-align: center;
height: 24px; /* tinggi menu utama yang di atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #F4F4F4; /* warna border atau garis menu yang di atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* jenis font menu utama yang ada di atas */
font-weight: 900;
color: #F4F4F4; /* warna font menu utama yang ada di atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF;/* warna background menu utama yang ada di atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #F4F4F4; /* warna garis atau border di kotak bawah atau utama */
overflow: hidden;
background-color: #FFFFFF; /* warna background di kotak bawah atau 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. Untuk merubah warna dan jenis font pada tab view, perhatikan tulisan yang di beri warna biru
5. Kemudian pasang kode dibawah ini tepat sebelum kode </head>

<script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript">

6. Kemudian save
7. Selanjutnya pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" = "HTML/Javascript" Terus pilih tempat dimana anda akan menyimpan tab view
9. Kemudian isi HTMLnya dengan script di bawah ini

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">

<a>Tab ke 1</a>

<a>Tab ke 2</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">

Isi tab 0.1 <br />

Isi tab 0.2 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Isi tab 1.1 <br />
Isi tab 1.1 <br />
</div>
</div>

</div></div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Penjelasan :

• Angka yang berwarna hijau 350px dan 250px adalah ukuran tinggi dan lebar pada tabview
  
• Kode yang berwarna merah adalah text untuk menu yang ada di atas
• Kode yang berwarna biru adalah isi dari tabview. Anda dapat mengisinya dengan Shotmix, link, Feedjit, gambar, script atau yang lainnya
  
• Untuk menambahkan jumlah menu yang ada di atas, perhatikanlah text yang berkedip2 kemudian kode yang berkaitan tersebut dibawahnya
  

..Selamat Mencoba..