membuat tab view

Tab view tersebut tampil secara bergantian sehingga boleh juga dikatakan slide show. Dalam arti lain widget tersebut memiliki dua fungsi yaitu sebagai tab view juga sekaligus sebagai slide show. (keyword: cara membuat tab view, tab view, memasang tab view di sidebar
untuk membuat tab view ikuti langkah-langkah berikut

• login, tataletak, edit html


• cari ]]></b:skin> kopi kode ini di atas nya
  
  .TabView .Tabs {<br /> height: 24px;<br /> overflow: hidden;<br /> }<br />.TabView .Tabs a {<br /> float: left;<br /> display: block;<br /> width: 98px; /* lebar kolom judul tab view */<br /> text-align: center;<br /> height: 24px; /*tinggi kolom judul tab view*/<br /> padding-top: 3px;<br /> vertical-align: middle;<br /> border-bottom-width: 0;<br /> text-decoration: none;<br /> font-family: "Times New Roman", Serif; <br /> font-weight: 900;<br /> color: #7c7c7c; <br /> background-color:#dde4ea;<br /> border:1px solid #ccc;<br /> }<br />.TabView .Tabs a:hover {<br /> background-color: #cecece; <br /> } <br />.TabView .Tabs a.Active {<br /> background-color: #fff;<br /> color:#333; <br /> }<br />.TabView .Tabs a:hover {<br /> background-color: #cecece; <br /> } <br />.TabView .Pages {<br /> width: 298px; /*lebar halaman tab view*/<br /> height: 438px; /*tinggi halaman tab view*/<br /> clear: both;<br /> overflow: hidden;<br /> background-color: #fff; <br /> border-left:1px solid #ccc;<br /> border-right:1px solid #ccc;<br /> border-bottom:1px solid #ccc;<br /> }<br />.TabView .Pages .Page {<br /> height: 100%;<br /> padding: 0 0 0;<br /> overflow: hidden;<br /> }<br />.TabView .Pages .Page .Pad {<br /> padding: 10px 5px;<br /> }<br />.TabView .Pages .Page .Pad a,<br />.TabView .Pages .Page .Pad a:visited,<br />.TabView .Pages .Page .Pad a:hover {color:#FBB917;}



• kemudian kode ini tepat dibawahnya
  
  <script type='text/javascript'><br />//<![CDATA[<br />function tabview_aux(TabViewId, id){<br /> var TabView = document.getElementById(TabViewId);<br /> var Tabs = TabView.firstChild;<br /> while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;<br /> var Tab = Tabs.firstChild;<br /> var i = 0;<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 /> 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 />function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }<br />function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }<br />//]]><br /></script>



• jika sudah, simpan template


• tambah gadget baru dengan html gadget kopi kode berikut
  
  <form action="tabview.html" method="get"><br /><div id="TabView" class="TabView"><br /><br /><div class="Tabs"><br /><a>Judul 1</a><br /><a>Judul 2</a><br /><a>Judul 3</a><br /></div><br /><br /><div class="Pages"><br /><br /><div class="Page"><br /><div class="Pad"><br />Terima Kasih Atas Kunjungannya<br />Silahkan kalian masukkan tulisan, gambar, atau kode widget kalian di sini !<br /></div><br /></div><br /><br /><div class="Page"><br /><div class="Pad"><br />Terima Kasih Atas Kunjungannya<br />Silahkan kalian masukkan tulisan, gambar, atau kode widget kalian di sini !<br /></div><br /></div><br /><br /><div class="Page"><br /><div class="Pad"><br />Terima Kasih Atas Kunjungannya<br />Silahkan kalian masukkan tulisan, gambar, atau kode widget kalian di sini !<br /></div><br /></div><br /><br /></div><br /></div><br /></form><br /><script type="text/javascript"><br />tabview_initialize('TabView');<br /></script>

  
  

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