Menambah Tab View di Sidebar Blogspot

Jumat, 14 Mei 2010

Yang dimaksud dengan menambah Tab View di Sidebar bisa anda lihat contohnya klik DISINI, Coba anda perhatikan pada sebelah kanan, Sidebar tengah ada Judul " Shohib Anyar !!! , disitu ada 2 tab yang masingmasing berjudul : Link Nama dan Link Banne, Cara Membuatnya Silakan ikuti langkah-langkah berikut :

Login ke blog anda Klik DISINI, silakan isi nama dan password anda
Pilih ‘TATA LETAK’
Klik "Pilih Edit HTML"
Silakan anda download terlebih dahulu Template anda klik "Download Template Lengkap" sebelah kanan atas ( menjaga jika template anda kacau dan mengembalikan ke template semula)
(gunakan Ctrl + F ) Anda cari kode ]]></b:skin>
Kemudian Copy kode dibawah ini, dan paste diatas kode ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 136px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:1px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid rgb(153, 153, 153); /* warna border menu */
border-bottom-width: 0;
font-family: Arial, Tahoma, Verdana; /* jenis hurup menu */
font-size: 14px; /* besar hurup menu */

letter-spacing: -1px;
background-color: #CEE3F6; /* warna latar menu */
color: #39792e; /* warna hurup menu */
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
div.TabView div.Tabs a.Active {
background-color:#f1f1f1 ; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #E0ECF8; /* warna background menu hover */
color: #ffffff;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid rgb(153, 153, 153); /* warna border kotak utama */

overflow: hidden;
background:#f7f7f7; /* background kotak utama */
border-top-width: 0;
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}
div.TabView div.Pages div.Page div.Pad ul {
padding: 0;
margin: 0;
}
div.TabView div.Pages div.Page div.Pad ul li {
line-height: 16px;
list-style-type: none;
border-bottom: 1px dotted #58ACFA;
/* border-bottom: 1px dashed #031c5d; */
}

Pada Keterangan ( /* ........... */) : bisa anda edit sesuai kemauan

Kemudian letakkan kode dibawah ini diatas kode </head>

<script>
//<![CDATA[
/******************************************
menu tab script
********************************************/
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>

Lalu Klik Simpan temlate

Langkah Selanjutnya :

Klik Tata Letak, Tambah Gadget, Tambah Html/Javascript.
Copy paste kode berikut ini :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 320px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width: 315px; height: 270px;" class="Pages">
<div class="Page">
<div class="Pad">
( isi judul 1)
</div>
</div>
<div class="Page">
<div class="Pad">
(isi judul 2)
</div>
</div>
<div class="Page">
<div class="Pad">
(isi judul 3)
</div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>