Membuat Tab View Tanpa Edit HTML

Saat sobat memulai ngeblog, langkah awal mencoba memodifikasi blog agar tampak elegant dan enak di pandang mata. Salah satunya dengan cara mengedit HTML, namun sobat takut gagal sehingga bisa merusak template.

AHA.. idblogku mencoba berexsperimen dengan menyatukan semua kode yang ada dan meletakkan kode scrip langsung pada gadget, all hasil sobat tidak perlu susah payah mengedit HTML tempate blog anda lagi.

Berikut cara mengaplikasikan membuat tab view tanpa edit HTML di blogspot.
1. Login ke blogspot anda.
2. Rancangan
3. Elemen Halaman
4. Tambah Gadget
5. Pilih HTML/Javascript

<style type="text/css"> div.TabView div.Tabs{height:30px; overflow:hidden} div.TabView div.Tabs a{float:left; display:block; width:98px; text-align:center; height:30px; padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; border-bottom-width:0; text-decoration:none; font-family:"Verdana",Serif; font-weight:bold; color:#000; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px} div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color:#E6E6E6} div.TabView div.Pages{clear:both; border:1px solid #BDBDBD; overflow:hidden; background-color:#E6E6E6} 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="TabView"class="TabView"> <div style="width:300px; "class="Tabs"> <a>Judul 1</a><br /> <a>Judul 2</a><br /> <a>Judul 3</a><br /> </div> <div style="width:300px; height:250px; "class="Pages"> <div class="Page"> <div class="Pad"> Isi menu tab view 1 <br /> </div> </div> <div class="Page"> <div class="Pad"> Isi menu tab view 2<br /> </div> </div> <div class="Page"> <div class="Pad"> Isi menu tab view 3 <br /> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

6. Simpan

Semoga bermanfaat..
Widget ini telah di uji di lab.idblogku, widget ini baca aturannya disini!
Post by idblogku