Wednesday, May 20, 2009

Hack Tab View

postingan cara membuat tab view mungkin sudah banyak yang membuatnya......seperti pada postingan saya yang sebelumnya yang merupakan postingan salah satu tutor blog saya dan masih banyak lagi yang telah memposting cara membuat tab view  yang harus memnutak atik HTML layout kita....sehingga memakan waktu cukup lama.......baiklah tanpa berpanjang lebar saya kan menjelaskan secara singkat.
hack tab view adalah membuat tab view tanpa harus masuk ke edit HTML layout kita yang perlu kita lakukan yakni ...... masuk pada layout kemudian klik page element


kemuudian pilih add a gadget....seperti pada gambar ini

lalu pilih yang HTML/Java Script seperti gambar di bawah ini.....



setelah itu masukkan code yang ada di bawah ini :

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #77d0ee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #222}
</style>


<form action="tabtampil.html" method="get"><div id="TabTampil" class="TabTampil"><div style="width: 370px;" class="TTs"><a class="Active" href="javascript:tabtampil_ubah('TabTampil', 1);">Tab 1 Name</a> <a class="" href="javascript:tabtampil_ubah('TabTampil', 2);">Tab 2 Name</a> <a class="" href="javascript:tabtampil_ubah('TabTampil', 3);">Tab 3 Name</a></div><div style="width: 350px; height: 300px;" class="Halamans"><div style="overflow: auto; height: 300px; display: block;" class="Halaman"><div class="Alas">Tab 1 content goes here
Tab 1 content goes here
Tab 1 content goes here
</div></div><div style="overflow: auto; height: 300px; display: none;" class="Halaman"><div class="Alas">Your tab 2 content goes here
Your tab 2 content goes here
Your tab 2 content goes here
</div></div><div style="overflow: auto; height: 300px; display: none;" class="Halaman"><div class="Alas">Tab 3 content goes here
Tab 3 content goes here
Tab 3 content goes here
</div></div></div></div></form><script style="" src="http://www.geocities.com/questanoeq/java/newscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

pada "Tab 1 content goes here" isikan code yang ingin anda tampilkan di tab pertama dan begitu juga pada tab 2 dan tab3.......


setelah itu simpan template anda.......

mudah kan cara membuatnya tanpa harus masuk ke edit html template kita.........

semoga bermanfaat bagi teman2 yang ingin membuat tab view......

oh ya ada BONUS nih



Klik untuk Lihat BONUS:
kalau teman2 enggan melakukan cara yang mudah diatas ini aku sudah siapkan tombol  otomatis ke blog anda untuk memasang widget tab view tersebut



untuk melihat hasilnya ada pada blog ku yang ini

25 comments:

Poskan Komentar

 
Labels

Blogumulus by Roy Tanck and Amanda Fazani

Followers

Reccent Comments

© Free News Template Copyright by BLOGGOA | Template by Fanchon0706 | Blog Trick at BLOGGOA