membuat tabview (3)

Sobat, sebetulnya membuat tabview yang ini tidak jauh beda dengan tabview yang sebelumnya hanya sedikit saja berbeda, ini dia:

1. Login ,
   Pilih Tata Letak --> Edit HTML.


2. cari ]]></b:skin> kopi kode berikut di atas nya:
   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 /> }



3. 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>



4. simpan template kamu.
   


5. Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
   Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.


6. 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>



7. jangan lupa ganti tab#.# dengan konten yang ingin di isikan


8. simpan

Tulisan Terkait :

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan