Menambah Sub Tab View

Menambah Sub Tab View

Posted by rike on 0

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.


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