Cara Membuat Tab View Tanpa Edit HTML

Mungkin sudah banyak para Sobat Blogger yang menggunakan widget ini (Tab View), salah satunya saya sendiri. Tujuannya apa? kebanyakan para blogger menggunakannya dengan alasan untuk menghemat tempat widget, karena Tab View fungsinya memang untuk menggabungkan beberapa widget sehingga menghemat tempat di blog.

Dalam Tips Blog kali ini saya akan sharing cara membuat widget Tab View tanpa mengubah template blog. Maksudnya kita memasang widget ini tanpa perlu mengedit kode HTML di template. Sobat hanya perlu menambahkan Gadget pada Elemen Laman.

Ok... bagi Sobat blogger yang ingin menggunakan widget tab view ini, silakan ikuti langkah berikut...

---

1. Login terlebih dahulu ke Akun Sobat.


2. Pilih Layout atau Rancangan.


3. Pada Elemen Halaman, tambahkan widget dengan mengeklik Tambah Gagdet.


4. Klik HTML/JavaScript. Berikan judul sesuai keinginan Sobat.


5. Dan Copy Paste kode di bawah ini pada kolom Konten.


<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -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; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 340px;" class="Tabs">
<a>TAB 1 </a>
<a>TAB 2</a>
<a>TAB 3</a>
</div>
<div style="width:340px; height:300px; " class="Pages">
<div class="Page">
<div class="Pad">

ISI WIDGET TAB 1 /* Masukkan Widget */

<div style="text-align:right; font-size:0.75em">
This Blog:
<a href="http://oog-4u.blogspot.com">
i Share
</a>
</div>

</div>
</div>
<div class="Page">
<div class="Pad">

ISI WIDGET TAB 2 /* Masukkan Widget */

</div>
</div>
<div class="Page">
<div class="Pad">

ISI WIDGET TAB 3 /* Masukkan Widget */

</div>
</div>
</div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>


6. Sobat bisa mengatur tinggi, lebar dan warna tab view yang sesuai dengan blog Sobat

Sekian Tips Cara Mudah Membuat Tab View Tanpa Edit HTML.


by ooG_4u

Klik Tombol "SKIP AD" (setelah 5 detik) Untuk Link Download yang Menggunakan Fasilitas AdF.ly

Rabu, 17 November 2010 | |

Recomended Post

Berikan Kritik, Saran atau Tanggapan melalui Komentar Sobat