MEMBUAT MENU BLOG YANG BERISI TIGA WIDGET (TAB VIEW)

Duh... karena jaringan di daerahku ngadat, yagh baru sempat degh memposting artikel... Ini pun dibuatnya jam 2 subuh... ^^. Oh iya, Bagi sobat atau agan-agan pasti dah sering melihat menu blog bukan? Tapi, coba liat dulu menu blogku, gimana beda kan?
Soalnya dalam satu menu tersebut saya bisa memasukkan tiga macam widget atau script yang berbeda ataupun postingan dan sebagainya. Gimana keren khan? hehehehe.... Selain itu, dengan tampilan menu seperti ini membuat tampilan blog sobat gak amburadul serta menghemat space. karena yang seharusnya tiga widget, kita bisa jadikan satu. Menu seperti ini namanya menu tab view

Kalau sobat mau coba ini saya berikan caranya, OK... Silakan simak gan:

1. Login dulu ke blogger sobat selanjutnya pilih menu "Layout --> Edit HTML"

2. Kemudian cari kode ini ]]></b:skin> (copy aja, lalu Ctrl F)

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 84px; /* Lebar Menu Utama Atas */

text-align: center;

height: 24px; /* Tinggi Menu Utama Atas */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #999999; /* Warna border Menu Atas */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */

font-weight: 900;

color: #1E62B6; /* Warna Font Menu Utama Atas */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FFFFFF; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #999999; /* Warna border Kotak Utama */

overflow: hidden;

background-color: #FFFFFF; /* 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: 3px 5px;

}

4. Perhatikan text-text yang berwarna hijau, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran, warna, huruf, background... kalau mau merubah warna, silakan pakai kode warna yang lain. Masuk aja di photoshop kalian, terus copy code warna yang agan inginkan

5. Langkah berikutnya yaitu pasang kode berikut ini sebelum kode </head> 

<script type='text/javascript'>

function tabview_aux(TabViewId, id)

{

var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;

while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;

var i = 0;

do

{

if (Tab.tagName == &quot;A&quot;)

{

i++;

Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;

Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;

Tab.blur();

}

}

while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;

while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;

var i = 0;

do

{

if (Page.className == &#39;Page&#39;)

{

i++;

if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;

Page.style.overflow = &quot;auto&quot;;

Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;

}

}

while (Page = Page.nextSibling);

}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

</script>

6. Setelah itu, "Di save"

7. Lalu klik menu "Page Elements" atau elemen laman

8. Pilih "Add a Gadget" --> "HTML/Javascript" pada tempat yang agan ingin letakkan Menu Tab View ini.

9. Inilah script yg harus di pasang :

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 260px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 256px; height: 270px;">

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

Keterangan :

- Angka2 atau text yang berwarna merah (260px atau 270 px) adalah ukuran tinggi dan lebar tabview dalam pixel

- Kode yang berwarna orange Adalah text yang di Menu utama (Menu Atas) atau judul dari menu sobat yang pertama, kedua, dan ketiga.

- Kode yang berwarna kuning adalah isi dari menu tab view tersebut. Agan bisa mengisinya dengan link, gambar, banner, script dan lain-lain. tapi, sesuaikan dengan judul menu yang agan buat

## SEMOGA BERHASIL ##

Posted in: Tips Blog