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
