cara memasang menu tab view di blog

              Contoh gambar menu tab view 

 Dalam posting kali ini saya mau membahas tentang cara memasang menu tab view di blog, Tapi sebelumnya saya akan menjelaskan fungsi dari memasang menu tab view ini terlebih dahulu. Menu tab view ini berfungsi untuk menggabungkan beberapa widget menjadi satu serta dapat berfungsi untuk menghemat space atau ruang dalam blog kita.

Nah untuk cara memasang widget menu tab view di blog, silahkan ikuti langkah - langkah dibawah ini :

1. Login ke Blogger
2. Pilih menu "Rancangan"  >> "Elemen Laman"
3. Klik "add gadget" atau "tambah gadget" >> kemudian pilih "html/javascript"
4. Copy dan pastekan kode dibawah ini kedalamnya

 

<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">
<div style="width: 300px;">
<a>Judul tab 1</a>
<a>Judul tab 2</a>
<a>Judul tab 3</a>
</div>
<div style="width:300px; height:400px; ">
<div>
<div>
<li>Isi dengan script untuk tab 1</li>
</div> </div>
<div>
<div>
<li>Isi dengan script untuk tab 2</li>
</div> </div>
<div>
<div>
<li>Isi dengan script untuk tab 3</li>
</div> </div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :1. ganti tulisan yang berwarna biru dengan judul tab yang anda inginkan

                   2. ganti tulisan yang berwarna merah dengan script widget yang ingin kalian tampilkan di menu 

                       tab  view tsb......!!

5. Setelah itu Klik simpan.save, 

sumber : http://asyariel.blogspot.com/

Tolong dibaca nih gan !

Kamu sedang membaca artikel tentang cara memasang menu tab view di blog dan kamu bisa menemukan artikel cara memasang menu tab view di blog ini dengan url http://zackybee7.blogspot.com/2012/05/cara-memasang-menu-tab-view-di-blog.html, kamu boleh menyebar luaskannya atau mengcopy paste-nya jika artikel cara memasang menu tab view di blog ini sangat bermanfaat bagi banyak orang, namun jangan lupa untuk meletakkan link cara memasang menu tab view di blog sebagai sumbernya.

Artikel terkait :