Ilmu online

Sudah lama sekali saya mencari Cara Membuat Tab View. Akhirnya sekarang saya temukan caranya dari blog keren yg saya temui hasil petunjuk mbah google tentang Cara Membuat Tab View. OK gak pake lama lagi sekarang saya beberkan saja Cara Membuat Tab View yang sangat mudah sekali. Berikut ini adalah langkah - langkah Cara Membuat Tab View :

• Login dulu ke account blogger anda
• Pilih tab Tata Letak kemudian Edit HTML.

Sebelum melakukan edit template, sebaiknya simpan dulu template anda yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, supaya nanti kalau anda gagal Membuat Tab View template lama anda tidak akan hilang.

• Copy kode berikut dan pastekan di atas kode (]]>b:skin)
  

div.TabView div.Tabs<br /> {<br /> height: 24px;<br /> overflow: hidden;<br /> }<br /><br /> div.TabView div.Tabs a<br /> {<br /> float: left;<br /> display: block;<br /><br /> width: 90px;<br /> text-align: center;<br /><br /> height: 24px;<br /> padding-top: 3px;<br /> vertical-align: middle;<br /> border: 1px solid #000000;<br /> border-bottom-width: 0;<br /><br /> text-decoration: none;<br /> font-family: "Arial", Times New Roman, Serif;<br /> font-weight: 900;<br /> color: #000080;<br /> }<br /><br /> div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active<br /> {<br /> background-color: #BDBDBD;<br /> }<br /><br /> div.TabView div.Pages<br /> {<br /> clear: both;<br /> background-color: #FFFFFF;<br /> border: 1px solid #000000;<br /> overflow: hidden;<br /> }<br /><br /> div.TabView div.Pages div.Page<br /> {<br /> height: 100%;<br /> padding: 0px;<br /> overflow: hidden;<br /> }<br /><br /> div.TabView div.Pages div.Page div.Pad<br /> {<br /> padding: 3px 5px;<br /> }

• Copy kembali kode berikut di atas kode ->(/head)

<script type="'text/javascript'"><br />function tabview_aux(TabViewId, id)<br />{<br />var TabView = document.getElementById(TabViewId);<br /><br />// ----- Tabs -----<br /><br />var Tabs = TabView.firstChild;<br />while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;<br /><br />var Tab = Tabs.firstChild;<br />var i = 0;<br /><br />do<br />{<br />if (Tab.tagName == "A")<br />{<br />i++;<br />Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";<br />Tab.className = (i == id) ? "Active" : "";<br />Tab.blur();<br />}<br />}<br />while (Tab = Tab.nextSibling);<br /><br />// ----- Pages -----<br /><br />var Pages = TabView.firstChild;<br />while (Pages.className != 'Pages') Pages = Pages.nextSibling;<br /><br />var Page = Pages.firstChild;<br />var i = 0;<br /><br />do<br />{<br />if (Page.className == 'Page')<br />{<br />i++;<br />if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";<br />Page.style.overflow = "auto";<br />Page.style.display = (i == id) ? 'block' : 'none';<br />}<br />}<br />while (Page = Page.nextSibling);<br />}<br /><br />// ----- Functions -------------------------------------------------------------<br /><br />function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }<br /><br />function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }<br /></script>

• Simpan template anda.
• Kemudian pilih tab Elemen Halaman lalu Tambah Gadget.
• Jendela Tambahkan Gadget akan muncul -> HTML/JavaScript.
• Copy dan paste kode di bawah ini.

<form action="tabview.html" method="get"><br /> <div class="TabView" id="TabView"><br /><br /> <div class="Tabs" style="width: 350px;"><br /> <a>Tab 1</a><br /> <a>Tab 2</a><br /> <a>Tab 3</a><br /> </div><br /><br /> <div class="Pages" style="width: 350px; height: 250px;"><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab1.1<br/><br /> Tab1.2<br/><br /> Tab1.3<br/><br /><br /> </div><br /> </div><br /><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab2.1<br/><br /> Tab2.2<br/><br /> Tab2.3<br/><br /><br /> </div><br /> </div><br /><br /><br /> <div class="Page"><br /> <div class="Pad"><br /><br /> Tab3.1<br/><br /> Tab3.2<br/><br /> Tab3.3<br/><br /><br /> </div><br /> </div><br /><br /> </div><br /> </div><br /> </form><br /><br /> <script type="text/javascript"><br /> tabview_initialize('TabView');<br /> </script>

• Sekarang lihat tab view dalam blog anda.

Petunjuk :

1. Kode yang berwarna merah merupakan teks yang letaknya dalam Tab.
2. Kode yang berwarna hijau adalah tampilan teks yang akan muncul dalam halaman tab view.
3. Kode yang berwarna orange merupakan tampilan lebar dan tinggi halaman tab view