Membuat Tab Menu

Sahabat Sasak Blogger semua jumpa lagi dengan saya nih. Dalam postingan kali ini saya akan membahas masih dalam seputar tips dan cara membuat tampilan blog kita lebih cantik dan more fleksibel. Dalam postingan kali ini saya akan membahas tentanh CARA MEMBUAT TAB MENU. Apa fungsi tab menu tersebut?. Tab menu tidak berbeda dengan bentuk menu-menu pada widget lainnya yang ditampilkan dalam sidebar tetapi fungsi tab menu ini lebih lebih kepada efesiensi penempatan widget sehingga dalam satu tempat kita bisa menempatkan beberapa konten judul dalam satu tempat.


Tanpa basa basi lagi yuk kita mulai.
1. Login ke blogger anda dengan ID anda tentunya
2. Click LAYOUT
3. Click EDIT HTML
4. Cari kode ]]></b:skin>
5. Tempatkan kode html di bawah ini berikut sebelum kode ]]></b:skin>


div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Width Main Menu Top */

text-align: center;
height: 30px; /* High Main Menu Top */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Top Menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Main Menu Top Fonts */
font-weight: bold;
color: #000; /* Main Menu Top Font Colors */
-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; /* Background colors on Main Menu */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Main Box border color */
overflow: hidden;
background-color: #E6E6E6; /* Main Box background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}



Lalu cari kode </head>

dan tempatkan kode berikut di atas kode </head>


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

Click SAVE


Untuk memastikan dan membuat tab menu click Page Element pada Desaign/ Layout
Lalu Click ADD GADGET
Pilih HTML/ JAVASCRIPT
Copy paste kode dibawah ini dan tempatkan pada kotak isian HTML/Javasript tersebut


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">



<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>


</div>
<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page">
<div class="Pad">



Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />



</div>
</div>

<div class="Page">
<div class="Pad">

Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />


</div>
</div>

<div class="Page">
<div class="Pad">



Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />


</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Click SAVE, So Jadi dah

NB :

1. <a>Tab 1</a> digunakan untuk penulisan judul
2. Tab 1.1 <br /> digunakan untuk isian (boleh dengan kode html/ script lainnya)
3. Anda bisa merubah ukuran tab menu anda dengan merubah angka 300px dengan angka lainnya yang sesuai dengan ukuran tempat anda akan menaruh/ menempatkan tab menu tersebut

Tertarik dengan postingan ini?, Saya akan sangat berterima kasih apabila anda berkenan mereview postingan ini di

Postingan Terkait