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
Post a Comment