Home » » Cara Membuat Menu Tab View pada Blog

Cara Membuat Menu Tab View pada Blog

Bagi anda yang ingin menghemat widget dan ingin tetap mantab bisa menggunakan Menu Tab View, bagi yang berminat bisa mencobanya dengan cara berikut ini :




1. Login terlebih dahuli ke blogger.com
2. Klik Rancangan --> Edit HTML --> Tambah Gadget --> HTML/Javascript
3. Salin kode berikut ini, dan taruh didalamnya




<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 90px;/* Lebar Menu Utama Atas */
text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #555555; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */
font-weight:bold; color:#fff; /* 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" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Tab View 1</a>
<a>Tab View 2</a>
<a>Tab View 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>


4. Atur tinggi, lebar, warna, dan sesuaikan dengan templates blog kamu,

5. Klik Simpan, selesai dech...





Comments
2 Comments

2 komentar:

  1. Gan Maksudnya Isi Tab View Menu Gimana Yach
    Dan Giamana Caranya Masukin Pengikut Blog Di Menu Yang Mirip kayak Agan Punya Di Isi Tab View Menu

    Kunjungi Blog ku
    http://rolannuansyah.blogspot.com

    BalasHapus
    Balasan
    1. Saya ngambil kodenya di template yg nyediain Pengikut blog nya :D

      Hapus

Silahkan berkomentar dengan menggunakan kata yang Sopan...
Trims...

Languange

English German Russian Japanese Arabic Chinese Simplified