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

<br /> <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><br /> <form action="tabtampil.html" method="get"><div id="TabTampil" class="TabTampil"><div style="width: 370px;" class="TTs"><a>Tab 1 Name</a> <a>Tab 2 Name</a> <a>Tab 3 Name</a></div><div style="width: 350px; height: 300px;" class="Halamans"><div class="Halaman"><div class="Alas">Tab 1 content goes here<br /> Tab 1 content goes here<br /> Tab 1 content goes here<br /> </div></div><div class="Halaman"><div class="Alas">Your tab 2 content goes here<br /> Your tab 2 content goes here<br /> Your tab 2 content goes here<br /> </div></div><div class="Halaman"><div class="Alas">Tab 3 content goes here<br /> Tab 3 content goes here<br /> Tab 3 content goes here<br /> </div></div></div></div></form><script style="text/javascript" src="http://www.geocities.com/questanoeq/java/newscriptab.js"></script><br /> <script type="text/javascript">tabtampil_inisial('TabTampil');</script><br /> <input value="http://buzz.blogger.com" name="infoUrl" type="hidden">

untuk melihat hasilnya ada pada blog ku yang ini