Autis World

Hallo sobat blogger..
Pagi-pagi gini udah menyambut para sobat blogger niih,semangat yaaa..
Padahal hari ini hari pertama UAS,tapi gak apa-apa,demi membagi sebuah informasi,saya tetap menyempatkan diri untuk membuat postingan ini..
Oke,sobat blogger sudah pada tau kan apa yang disebuat dengan Menu TabView??
Kalau belum tau,Menu tab view adalah susunan menu yang sering diletakkan pada sidebar dan dalam bentuk bar. Menu tab view digunakan biasanya untuk menyikapi ruang sempit pada layout template. Untuk memasang menu tab view pada sidebar blog, silahkan ikuti tips dan tutorial berikut:

Masuk ke Design > Edit HTML template blog kamu dan cari kode ]]></b:skin>. Seperti biasa tekan Ctrl+F untuk memudahkan pencarian dengan memasukkan kode ]]></b:skin>. Setelah ketemu, letakkan kode berikut diatas kode ]]></b:skin>:

/*----MENU TAB VIEW----*/
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px 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: #BDBDBD;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 1px 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;
}

Dan sekarang kita cari kode </head> , lalu paste kan kode berikut diatasnya .

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

Kalau sudah,simpan template sobat blogger.
Kita pindah ke tempat perancangan Gadget.
Pilih tambah Gadget,lalu pastekan kode berikut didalam HTML/Javascript.

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

Ubah dan modifikasi menu tersebut sesuka hati sobat blogger.Ubah kode ukuran yang sudah tersedia,ubah dengan ukuran sidebar pada template sobat blogger.Oke,semoga berhasil yaa sobat blogger,silahkan berikan komen diblog ini,karna blog ini penganut Dofollow..