rss

Selasa, September 1

Tab Menu untuk Blogger

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.jstype='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}

Related Article:

Related Website

2 comments:

Belly on Selasa, September 01, 2009 10:43:00 AM mengatakan...

Tips yang menarik boss. Pengen buat sama yang ada di blog ini takutnya di anggap copy paste. :D Lagi pula aku terlalu malas untuk ngedit2 template lagi. Habis kemarin sempat hilang sebelum di back up. hik..Salam Kenal.

Yos on Sabtu, Oktober 17, 2009 10:46:00 AM mengatakan...

saya beralih tempat hostingnya ke http://belajarblog.googlecode.com/files/tabview.js


Posting Komentar

Silahkan berkomentar ya..saya berharap sobat dapat memberikan saran dan komentarnya disini..Terimakasih.

Cari Blog Ini

Yahoo bot last visit powered by  Ybotvisit.comMsn bot last visit powered by MyPagerank.Net Page Rank Add to Technorati Favorites Add to Technorati Favoritesblogarama - the blog directory Webmaster-Resources.com.ru Subscribe with Bloglines Literature Top Blogs Blog Directory Directory of Science Blogs Blog Directory ReadABlog.com Blog Search Engine Top 10 Bertuah Join My Community at MyBloglog! ngeblog,internet,software,hardware,laptop,komputer,hacking cracking,tips dan trik serta program Bisnis online Personal Blogs - BlogCatalog Blog Directory RSSMicro FeedRank Results Find broken links on your website for free with LinkTiger.com My Ping in TotalPing.com

Free Blog Counter

Direktori Indonesia - Indonesian free listing directory, SEO friendly free link directory, a comprehensive directory of Indonesian website. blogarama.com TopOfBlogs Add to Technorati Favorites

Dofollow Backlinks

free counters

KampungBlog.com - Kumpulan Blog-Blog Indonesiablog-indonesia.com
 

Masukkan Alamat e-mail kamu untuk mendapatkan Postingan Terbaru langsung di email kamu GRATIS:

Dikirim by FeedBurner

Pengikut

Gadget

Konten ini belum tersedia melalui sambungan terenkripsi.