Cara Membuat Daftar Isi Tab view

Dulu saya sudah pernah memposting tentang cara membuat daftar isi, Nah sekarang ini saya mau posting itu lagi tapi daftar isinya bertab lho jadi tidak banyak tempat untuk meletakkan sesuatu.
Sebelum saya menjelaskan cara pembuatannya, saya akan bertanya kepada anda. Apa itu daftar isi?
ya benar sekali daftar isi merupakan kumpulan dari berbagai isi yang kita buat dan daftar isi sangat penting dalam proses dimana anda ingin menjadi blogger sejati.
Apa itu tab?
Salah! tab adalah... saya juga begitu kurang paham sih, tetapi saya akan menjelaskan apa yang ada dalam pikiran saya. Tab adalah suatu sket dimana satu ruangan dapat diisi oleh beberapa kategori.

jika kurang paham apa itu daftar isi bertab lihatlah gambar dibawah ini.

langsung saja kita kelangkah-langkahnya saja ya!

1. Pastinya masuk ke blogger dot com dulu dengan id anda

2. pilih rancangan dan kemudian pilih edit html

3. Cari kode </head> jika susah klik CTRL+F

4. masukkan kode berikut diatas kode </head>

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

5. Letakkan kode dibawah ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 85px; /*Lebar Menu Utama Atas*/
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 5px ridge #000000; /* 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: #3A37D6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 2px solid #000000; /* Warna border Kotak Utama */
hight:170px;
overflow: hidden;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
padding:8px;
text-align: left;
background-color: #3A37D6; /* 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;
}/*ahmadyusuf138.blogspot.com*/

jika sudah klik simpan

6. pilih rancangan kembali dan kemudian pilih tambah gadget

7. Masukkan script berikut ini

<center><form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 380px;">
<a>Trik Blog</a>
<a>Komputer</a>
<a>Rubik</a>
<a>Kisah Nabi</a>
</div>
<div class="Pages" style="width: 380px; height: 300px;">
<div class="Page">
<div class="Pad">
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://ahmadyusuf138.blogspot.com/2010/12/cara-memasukkan-video-youtube-ke.html">Cara memasukkan video ke posting</a><br />
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://ahmadyusuf138.blogspot.com/2010/12/cara-mengatur-judul-posting-dan-judul.html">Cara Mengatur Judul Sidebar Atau Posting</a>
<br />
</div>
</div>
<div class="Page">
<div class="Pad">
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://ahmadyusuf138.blogspot.com/2010/12/mempercepat-koneksi-internet-yang-lelet.html">Cara Mempercepat Koneksi Internet</a><br />
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://ahmadyusuf138.blogspot.com/2010/12/aplikasi-pembobol-password-wifi.html">Membobol Password Wifi</a>
<br />
</div>
</div>
<div class="Page">
<div class="Pad">
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://ahmadyusuf138.blogspot.com/2010/12/trik-bermain-rubik-pemula.html">Trik Bermain Rubik 3x3</a><br />
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif" /><a href="http://ahmadyusuf138.blogspot.com/2010/12/video-bermain-rubik.html">video Bermain Rubik 3x3</a>
<br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script></center>

Keterangan:
Tulisan yang berwarna merah adalah alamat yang akan dituju
tulisan yang berwarna hijau adalah judul yang akan keluar di daftar isi anda

8. Selesai. daftar isi anda sudah jadi.

jika mempunyai kendala dalam pembuatan ini silahkan bertanya di kotak komentar.

Posted in: trik blog