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">
</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">
</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); }
Related Article:
- Mengganti Header dan Logo pada Template Blogger seperti TurnOut Magazine
- metode penulisan Teks HTML untuk web kita
- Daftar 53 situs backlink untuk meningkatkan Pagerank Situs kita di Search Engine
- 75 situs Backlink untuk meningkatkan Pagerank Situs kita di Search Engine
- membackup Blog dengan tool dari blogger
- Cara Upload youtube lebih cepat
- Bagaimana Upload Video dengan Youtube
- siapa yang mendaftar di FeedBurner kita
- Edit foto dengan Virtual Plastic Magic Surgery
- Membuat gambar animasi dengan Animated Gif Produser
- backlink dengan domain Pop
- Populerkan web/blog dengan Addthis
- Banner Animasi dg UnFREEz 2.1
- Mengganti Icon Blogger
- Cara mendapatkan Backlink
- Mengetahui Backlink Blog
- Cara Sederhana menaikkan PageRank
- Tukaran Link yang diurut Abjad
- Buat kotak dalam posting
- Klik iklan dapat uang dengan CLIXSENSE
- Membuat ringkasan posting yang ikuti judul posting
- SeoQuake Fitur for Firefox
- Mengganti notepad standar dengan Notepad ++
- Tempat kita upload script javascript kita
0 comments:
Post a Comment