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">
<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 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 by rike
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">
<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 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 ...
