Menambah Sub Tab View

Duaaarrrrr....???!!! Eh, ketemu lagi. Sebenarnya posting hari ini OB sempat-sempatkan, sekedar untuk menghilangkan rasa dahaga. Penyebabnya karena sudah lama OB ngga aktif lagi dalam dunia blogger, baik memposting tentang trik blogger maupun tips seo. Sekarang kesempatan datang, jadi OB sempatkan untuk bikin satu postingan. Nah, kamu mungkin sudah mencoba bagaimana cara membuat tab view? Kalau belum silakan klik link tab view ini. Kadang kita ingin membuat tampilan tab view ada yang menjorok ke dalam dan OB istilahkan disini adalah sub tab view. Maksudnya adalah teks (link) yang menggunakan tanda panah biru dalam tab view blog optimasi blog (sebelah kanan bawah), versi demonya dapat dilihat dalam blog uji coba. Posting ini OB dedikasikan untuk saudara Wanz yang beralamat blog di http://pondok-cerita.blogspot.com, apabila kamu punya waktu senggang please kunjungi sobat yang satu ini.

Sekarang kita mulai trik blogger membuat sub tab view, namun sebelumnya blog kamu harus sudah terinstall tab view :

• Login dulu ke account blogger kamu.
• Pilih tab Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode CSS tab view, seperti di bawah ini :

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;
vertical-align: middle;
border: 1px solid #000000;
border-bottom-width: 0;

text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}

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

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

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

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Tambahkan kode CSS berikut di bawah kode di atas.

div.pad2
{
padding: 3px 5px 3px 10px;
}

• Simpan template kamu.
• Kemudian pilih tab Elemen Halaman --> Klik widget/gadget "tab view" (atau nama apapun yang kamu berikan sebelumnya).
• Kodenya lebih kurang seperti ini.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>

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

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

Tab1.1<br/>

<div class="pad2">
Sub Tab 1.1.1<br/>
Sub Tab 1.1.2<br/>
</div>

Tab1.2<br/>
Tab1.3<br/>

</div>
</div>


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

Tab2.1<br/>
Tab2.2<br/>
Tab2.3<br/>

</div>
</div>


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

Tab3.1<br/>
Tab3.2<br/>
Tab3.3<br/>

</div>
</div>

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

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

Catatan :

1. Kode di atas sudah ditambahkan kode sisipan sub tab view yang ditandai dengan warna merah.
2. Perhatikan cara peletakan kode sisipan yang dimaksud harus berada diantara kode berikut (warna hijau).

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

... dst ...

</div>
</div>

• Sekarang lihat blog kamu.

Selamat membuat sub tab view ...