Cara Membuat Tab View Widget di Blogspot

Cara Membuat Tab View Widget di Blogspot. Tab view widget merupakan widget yang dipergunakan dalam rangka melakukan efsisiensi space pada sidebar. Dengan ruang terbatas, informasi yang diberikan kepadan pembaca dapat terpenuhi. Anda bisa melihat contoh Tav view widget pada blognya Om Onny pada sidebar sebelah kanan (3 tab).

Bagi anda yang mencoba melakukan effisiensi ruang pada sidebar, anda bisa menambahkan tab view widget. Adapu cara membuat tab view widget di blogspot sebagai berikut :

1. Login ke blogger

2. Pilih "Rancangan" Klik "Edit HTML" centang"Expand Template Widget"

3. Jangan lupa untuk "download template lengkap" terlebih dahulu, untuk mengantisipasi gagal memasukkan kode scriptnya.

4. Cari kode ]]></b:skin>, pasang di atas kode tersebut

div.TabView div.Tabs<br /> {<br /> height: 30px;<br /> overflow: hidden;<br /> }<br /> div.TabView div.Tabs a<br /> {<br /> float: left;<br /> display: block;<br /> width: 98px; /* Lebar Menu Utama Atas */<br /> <br /> text-align: center;<br /> height: 30px; /* Tinggi Menu Utama Atas */<br /> padding-top: 3px;<br /> vertical-align: middle;<br /> border: 1px solid #BDBDBD; /* Warna border Menu Atas */<br /> border-bottom-width: 0;<br /> text-decoration: none;<br /> font-family: "Verdana", Serif; /* Font Menu Utama Atas */<br /> font-weight: bold;<br /> color: #000; /* Warna Font Menu Utama Atas */<br /> -moz-border-radius-topleft:10px;<br /> -moz-border-radius-topright:10px;<br /> }<br /> div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active<br /> {<br /> background-color: #E6E6E6; /* Warna background Menu Utama Atas */<br /> }<br /> div.TabView div.Pages<br /> {<br /> clear: both;<br /> border: 1px solid #BDBDBD; /* Warna border Kotak Utama */<br /> overflow: hidden;<br /> background-color: #E6E6E6; /* Warna background Kotak Utama */<br /> }<br /> div.TabView div.Pages div.Page<br /> {<br /> height: 100%;<br /> padding: 0px;<br /> overflow: hidden;<br /> }<br /> div.TabView div.Pages div.Page div.Pad<br /> {<br /> padding: 3px 5px;<br /> }<br />

5. Letakkan di atas </head>, kode berikut ini :

<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 />

6. Klik "simpan template"

7. Kemudian klik "Elemen laman" Tambahkan gadget

8. Pilih HTML/Javascript, masukkan kode scriptnya di bawah ini :

<form action="tabview.html" method="get"><div class="TabView" id="TabView"><div class="Tabs" style="width: 300px;"><a>Tab 1</a><br /> <a>Tab 2</a><br /> <a>Tab 3</a><br /> </div><div class="Pages" style="width: 300px; height: 250px;"><br /> <div class="Page"><div class="Pad">Tab 1.1 <br /><br /> Tab 1.2 <br /><br /> Tab 1.3 <br /><br /> </div></div><br /> <div class="Page"><div class="Pad">Tab 2.1 <br /><br /> Tab 2.2 <br /><br /> Tab 2.3 <br /><br /> </div></div><br /> <div class="Page"><div class="Pad">Tab 3.1 <br /><br /> Tab 3.2 <br /><br /> Tab 3.3 <br /><br /> </div></div><br /> </div></div></form><br /> <script type="text/javascript"> tabview_initialize('TabView'); </script><br />

9. Klik "Simpan"

Demikian Cara Membuat Tab View Widget di Blogspot versi Om Onny, semoga bermanfaat.