TabMenu Blogspot

Untuk hal berikut ini,sebenarnya merupakan requestnya dari sahabatku “MINANGKABAU” yang minta saya menampilkan bagaimana sih membuat TAB MENU seperti layaknya yang ada pada Blog yosaadi.blogspot.com ini .kepada semua sahabat yang sudah mengetahui hal ini,saya mohon juga sarannya bila nanti dalam penguraian bagaimana cara membuat TAB MENU ini bila masih kurang ya. saya sebetulnya mendapatkan ilmunya dari pinginbelajar. Namun entah kenapa sobat tersebut ketika saya liat kembali sudah tak mempergunakan SCRIPT tersebut lagi.

Oh ya sekedar info saja bila kita menggunakan Script javascript ini biasanya loading blog kita akan bertambah berat dari biasanya.Coba nanti sobat cek saja loading pagenya sebelum dan sesudah menggunakan TAB MENU ini ya..

Langkah Pertama :
1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head> 

{ sebaiknya bila menggunakan kode script js apapun diletakkan disini juga ya ,spt readmore otomatis,related article dll }
6. Persis sebelum kode tersebut, pastekan script di bawah ini
<script src=’http://h1.ripway.com/rangminang/tabview.js’type='text/javascript'/>

{ atau sobat ganti dengan alamat hosting sobat sendiri,ditakutkan mungkin saja di kemudian hari saya sudah tak menggunakan layanan ini }

7. Cari lagi di dalam template anda kode ]]></b:skin>

8. Persis sebelum kode tersebut, pastekan script di bawah ini

div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }

9. Klik Simpan Template

Langkah Kedua :
1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan ke dalam kolom Konten script di bawah ini

<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 1

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

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 2

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

 

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 3

 

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

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 4

 

</div>
</div>

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

 

7. Klik Simpan

8. Silahkan dilihat ,Apakah berhasil ?? pasti berhasil ya..

nb.

bila sobat ingin menambahkan judul atau mengurangi ,silahkan diubah saja pada

<a>Judul xx</a>

dan

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

masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul  xx 

 

</div>
</div>

bila sobat tak mau menggunakan layanan file hosting seperti yang saya gunakan disini,sobat masih bisa kok langsung memasukkan script berikut ini pada </head>

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); }

Tag Technorati: {grup-tag}tabmenu