Membuat Widget Multi Tab

Membuat widget multi tab

Dari Sekian banyak tutorial yg saya baca, trik Membuat Multi Tab View yg paling srek di hati saya adalah totorial milik blog angga. Multi tab view ini diMaknakan sebagai widget tab sajian dengan tiga kolom.

Oleh alasannya itu setelah saya praktekkan 3 hari ini, maka pada kesempatan kali ini saya ingin share kepada teman-teman semua perihal gimana Caranya Membuat Tab View Menu 3 Kolom di Blog atau multi tab view.
hasilnya mirip di bawah ini:

Sesuai judulnya Multi Tab View Menu 3 Kolom, berMakna dalam satu tampilan sidebar widget bakal ada 3 buah widget (bisa apa saja, contoh: Buku Tamu, script Top Post atau Komentar, Kumpulan Banner dan sebagainya), trik ini juga bakal menciptakan blog sedikit lebih rapi dan tidak banyak menguras tempat.

Ok, buat teman-teman yg ingin membuat Multi Tab View Menu 3 Kolom ini, silahkan ikuti langkah-langkah di bawah ini:

Caranya pertamax :
1. Login ke akun Blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari arahan berikut: ]]></b:skin>
4. Lalu copy arahan di bawah ini dan taruh persis berada di atas arahan tadi:

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

5. Jika sudah maka lanjutkan dengan mencari arahan ini: </head>
6. Lalu copy arahan di bawah ini dan pastekan di atas arahan tadi:

<script type='text/javascript'>
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>

7. Save templates dan lanjutkan ke langkah selanjutnya,

8. Klik Design/Rancangan >> Page Element >> Add a Gadget >> HTML/Javascript,

9. Copy arahan di bawah ini dan masukkan ke dalam konten HTML/Javascript kemudian atur (edit) sesuai dengan keterangan masing-masing:

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

10. Jika dirasa sudah benar, kemudian Save. (Jika dilakukan dengan benar maka kesudahannya bakal mirip milik saya).

Caranya ke-2 Bagi sobat yg tidak mau otak-atik html, cukup tambah gadget, berikut solusinya :
Caranya Membuat Multi Halaman atau multi tab view tanpa edit html

Pergilah ke Dashboard, kemudian pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript.

Letakkan arahan berikut:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget yg INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget yg INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget yg INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>