widgets
Follow 1 cp
[Tutup]
By Adi Putra Winanto
Follow 2 cp
1. Burung twitter 2.Cusor cp
Buku Tamu cp
View shoutbox
ShoutMix chat widget
cp
Home
Promosikan blog anda
banner exchange
SMS Gratis
Link 5
Link 6
Link 7
Saturday 18 June 2011
Membuat tabview tanpa edit HTML 3
1.Login ke ID blogger anda
2.Click design->add gadget->HTML/Javascript
3.Copas code berikut
<style type="text/css"> #badan {width: 355px;margin: 3px;padding: 5px;background: url(https://lh5.googleusercontent.com/_QeIxO28ukBc/Tb_dEgDHi7I/AAAAAAAAAeU/qs2r9pSkI1s/buku4.png);overflow: hidden; } div.TabView div.Tabs {height: 30px;overflow: hidden;} div.TabView div.Tabs a {float:left; font-size: 11px; display:block; width: 65px; /* lebar menu atas */ text-align:center ; height: 18px; /* tinggi menu atas */ padding-top:6px; padding-left: 2px; padding-right: 2px; border:1px inset #fff290; /* border menu atas */ text-decoration: none; font-family: "tahoma", Serif; /* Font Menu Utama Atas */ font-weight: normal; color: white; /* warna font menu atas */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {color: #000000;background: #fff290; /* background menu atas */ } div.TabView div.Pages {clear:both; overflow:hidden; background:transparent; /* background isi */ } div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden} div.TabView div.Pages div.Page div.Pad {padding: 5px 5px} </style><br /> <script type='text/javascript'> //<![CDATA[ function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions --------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } //]]> </script><br /> <form action="tabview.html" method="get"><div id="badan"><div id="TabView" class="TabView"><div style="width:355px;" class="Tabs"><a>Daftar Isi</a><br /> <a>Recent Post</a><br /> <a>Komentar</a><br /> <a>Link Blog</a><br /> <a>Tukar Link</a><br /> </div><div style="width:355px; height:290px; " class="Pages"><div class="Page"><div class="Pad">Isi menu 1<br /> </div></div><div class="Page"><div class="Pad">Isi menu 2<br /> </div></div><div class="Page"><div class="Pad">Isi menu 3 <br /> </div></div><div class="Page"><div class="Pad">Isi menu 4<br /> </div></div><div class="Page"><div class="Pad">Isi menu 5<br /> </div></div></div></div></div></form><script type="text/javascript"> tabview_initialize('TabView'); </script>
4.Ganti daftar isi, recent post, komentar, link blog, dan tukar link dengan judul yang anda mau.
5.Ganti isi menu 1, isi menu 2, isi menu 3, isi menu 4, isi menu 5, dengan isi menu yang anda inginkan.
6.Save
Selesai!
0 comments:
Post a Comment
Please comment dengan sopan ^.^
Newer Post
Older Post
Home
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Please comment dengan sopan ^.^