Cara Membuat Menu Tab View Cantik

Mau buat Tab view kayak punyaq gak? Hayo.....

Itu tuh yang ada disebelah kanan... Lumayan kan buat hemat tempat di blog qm yang udah mulai penuh sesak dengan hal2 yag pengen qm tambahin iya kan? Nih q kasi caranya... Mungkin jadinya masih sederhana, soalnya aq juga masih belajar juga... Sambil lalu aja, oke? Ntar klo ada cara yang buat lebih bagus lagi q kasi tau deh... hehehe...

Alhamdulilah setelah searching dan berlatih Html aq bisa buat mwnu tab view yang cantik seperti punya q disamping. Alhamdulilah buaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaanget.... Thx God. Thank you very much... InsyaAllah di bawah ini aq uraikan gmn cara buatnya. InsyaAllah jadinya persis kayak punyaq. Amien....

Nih caranya buat, semangat ya!!!! Klo ada trouble isi aja dikomentar... OKe?

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin&gt; atau kedalam tag 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: 3px;
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: 3px 5px;
}

kode ini adalah pengaturan utama penampilan menu tab view kita yang akan ditampilkan. Jadi aturlah sebaik mungkin, mainkan animasimu disini supaya menu tab viewmu menarik. Oke? Pelan2 aja yang buat, yang pentingkan bagus hasinya. Iya kn?

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna cari aja di google, banyak kok yang nyediain kode warna ini. Bis link yang dikasi mas kendhin gak jalan e, gak muncul kode warna2nya. Mendingan searching di google deh. Hehehe.

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

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

Nah kode ini berfungsi supaya menu tab view kita berjalan, atau klo aku istilahin “ngetab” supaya jendela2 tab view kita. Kode diatas bisa digonta ganti seandainya jika kode diatas macet alias menu tab view kita gak bisa ngetab. Nih pilihan lainnya,

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

atau

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

atau

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

atau

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

Yang saya pakai adalah pilihan yang ke tiga, karena yang pertama tab view jadi gak jalan e. Ya dicoba aja yang lainnya. Kan ada 3 pilihan tuh? Hehehe. Klo yang terakhir juga saya pasang soalnya itu yang bikin tampilannya jadi cantik sih. hehehe...

Atau waktu searching di google trus ada tutorial kayak gini juga, trus ada kode yang harus di tanam sesudah kode berarti kode itu fungsinya adalah buat supaya menu tab view kita bisa ngetab. Ganti aja gak pa2 sama kode di tutorial lainnya seandainya klo pilihan yang aku sodorin ternyata bikin gak jalan menu tab viewnya.

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

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

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

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

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 350px; 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>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

- Tulisan Tab 1.1, Tab 1.2,Tab 1.3 itu adalah isi dari Tab 1
Klo yang ini berfungsi sebagai apa yang akan kita taruh nantinya disini. Terserah mau diisi kita, tapi menu ini sepertinya cuman bisa buat gadget yang ada kode scriptnya aja, jadi gadget yang dari blogger gak bisa dimasukin kesini. Sori yah… hehehe….

Posted in: blog,Tutorial blog