Saring-Sharing: Membuat Menu Tab View

Dah lama gak berkunjung ke blog si Senior ternyata ada menu baru di Blognya yang membuat Saya berkata "Waaw, Kereeennn..." Mungkin bagi teman2 ini sudah biasa, tapi bagi Saya ini adalah lebih dari biasa meskipun bukan suatu hal yang luar biasa (Maklum Saya kan Pemula :)). Sesuatu yang Saya maksud adalah adanya menu Tab View di Side Kanan blog tersebut.

Bagi teman-teman yang belum tau apa itu Tab View, silahkan lihat pada gambar di bawah...

Karena Senior Saya adalah orang yang baik hati, maka tanpa ragu dia menuliskan tutorial di blognya. Setelah Saya pasang di blog Saya ternyata ada beberapa hal yang membuat Saya kebingungan yaitu cara menyetel ukuran kotak Tab View tersebut agar sesuai dengan template yang Saya gunakan. Tapi teman-teman gak usah khawatir, karena disini akan Saya tunjukkan mana saja yang perlu di setel.

Oke deh, langsung aja kita ikuti tutorialnya.

1. Seperti biasa langsung aja Login di blogger.com langsung masuk ke Dashbor > Rancangan > Edit HTML.

2. Letakkan kode dibawah ini diatas kode ]]></b:skin>

/* Menu Tab View

----------------------------------------------- */

div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */

div.TabView div.Tabs a {
float: left;
display: block;
width: 94px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antar menu */
vertical-align: middle;
border: 1px solid #2D8AF6; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis huruf menu */
font-size: 12px; /* besar huruf menu */
letter-spacing: -1px;
background-color: #E3E4F9; /* warna latar menu */
color: #000000; /* warna huruf menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #B5A574; /* warna background menu aktif */
color: #823210;
}

div.TabView div.Tabs a:hover {
background-color: #B5A574; /* warna background menu hover */
color: #000000;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #2D8AF6; /* warna border kotak utama */
overflow: hidden;
background:url("http://i817.photobucket.com/albums/zz91/hansem_x/Blog/BG-view.png"); /* 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;
font-size: 12px; /* besar huruf kotak utama */
}

3. Lalu letakkan kode ini diatas kode </head>

4. Simpan.
5. Habis tu langsung aja meluncur ke Elemen Halaman > Tambah Gadget (HTML/Java Script).
6.Letakkan Kode dibawah ini kedalam Gadget tersebut.

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a>Bloging Tips</a>

<a>Rubik Cube</a>

<a>Club Cooee</a>

</div>

<div style="width: 300px;
height: 207px;" class="Pages">

<div class="Page">

<div class="Pad">

<span style="font-weight:bold;"><span style="font-style:italic;">Bloging tips</span></span>
<br />
1. <a href="http://komud.blogspot.com/2010/04/membuat-button-share-di-setiap.html">Membuat Button Share di setiap postingan</a>
<br />
2. <a href="http://komud.blogspot.com/2009/06/cara-pasang-info-cuaca-di-blog.html">Cara pasang info Cuaca di blog</a>
<br />
3. <a href="http://komud.blogspot.com/2009/06/membuat-link-warna-warni-rainbow-link.html">Membuat Link warna-warni</a>
<br />
4. <a href="http://komud.blogspot.com/2009/06/membuat-read-more-otomatis-blog.html">Membuat Read more otomatis blog</a>
<br />
5. <a href="http://komud.blogspot.com/2010/06/mengganti-icon-address-bar-vaf-icon.html">Mengganti ikon address bar</a>
<br />
6. <a href="hhttp://komud.blogspot.com/2010/06/membuat-tulisan-judul-blog-berjalan.html">Membuat tulisan judul berjalan pada address bar</a>
<br />
7. <a href="http://komud.blogspot.com/2009/06/cara-membuat-tulisan-berkedip-kedip.html">Membuat tulisan berkedip-kedip</a>
<br />

</div>

</div>

<div class="Page">

<div class="Pad">

<span style="font-weight:bold;"><span style="font-style:italic;">Rubik Cube</span></span>
<br />
1. <a href="http://komud.blogspot.com/2010/05/rubiks-cube-adalah-sebuah-3-d-teka-teki.html">Rubik Cube?..</a>
<br />
2. <a href="http://komud.blogspot.com/2010/05/harga-rubiks-cube.html">Harga Rubik Cube </a>
<br />
3. <a href="http://komud.blogspot.com/2010/05/tutorial-cube.html">Tutorial Cube</a>
<br />
4. <a href="http://www.ziddu.com/download/9946544/RubikTimer.rar.html" target="_blank"">RubikTimer (download)</a>
<br />
5. <a href="http://www.ziddu.com/download/9946999/rubik-setup.exe.html" target="_blank"">Rubik Game PC (download)</a>
<br />

</div>

</div>

<div class="Page">

<div class="Pad">

<span style="font-weight:bold;"><span style="font-style:italic;">Club Cooee</span></span>
<br />
1. <a href="http://komud.blogspot.com/2010/05/club-cooee.html">Club Cooee?..</a>
<br />
2. <a href="http://komud.blogspot.com/2010/05/cara-dapat-poin-di-cooee.html">Cara dapar poin di Cooee</a>
<br />
3. <a href="http://komud.blogspot.com/2010/05/cara-curang-dapat-poin-di-cooee.html">Cara curang dapat poin di Cooee</a>
<br />
4. <a href="http://komud.blogspot.com/2010/05/cara-dapatin-cc-cooee-cash.html">Cara dapatin CC (Cooee Cash)</a>
<br />

</div>

</div>

</div>
</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Selamat Mencoba ! ! !

Info Tambahan:
Teks Cokelat muda merupakan judul Menu
Teks Kuning merupakan ukuran Kotak Utama
Teks Biru merupakan Link Tujuan
Teks Aqua merupakan Judul Link Tujuan.

Kalo Bingung silahkan di koment, kita kan sama-sama belajar.... :)

Saring-Sharing

Membuat Menu Tab View

Related Post :

3 komentar: