Menambah Sub Tab View

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 saya 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 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.
• Tambahkan kode berikut tepat di bawah kode CSS Tab View.

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

• 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">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>

<div class="Pages">

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

<ul>
<li>Tab1.1</li>

<div class="pad2">

Sub Tab 1.1.2<br />

<ul>

<li>Sub Tab 1.1.2</li>

</ul>

Sub Tab 1.1.3<br />

</div>

<li>Tab1.2</li>
<li>Tab1.3</li>
</ul>

</div>
</div>

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

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

<div class="pad2">

Sub Tab 2.2.1<br />

Sub Tab 2.2.2<br />

Sub Tab 2.2.3<br />

</div>

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 :
Kode di atas sudah ditambahkan kode sisipan sub tab view yang ditandai dengan warna merah.

• Sekarang lihat blog kamu.

Selamat membuat sub tab view ...

Posted in: