News Update :
Home » , » Tips Membuat Menu Tab View

Tips Membuat Menu Tab View

Tips Membuat Menu Tab ViewMembuat menu tab view selain menambah kesan beda juga menjadi solusi bagi blog yang mempunyai ruang yang sempit. Karena dengan menambah menu tab view walaupun ruangan blog sobat sempit tapi tetap bisa memasukkan menu yang dianggap sobat penting, misalnya daftar isi, tukar link dll. Dan itu bisa disesuaikan dengan kemauan sobat.

Untuk membuat menu tab view sobat bisa mengikuti langkah berikut :

1. Login ke blog sobat dan cari menu Tata Letak --> Edit HTML
2. Cari kode ]]></b:skin>
3. Letakkan kode berikut di atas kode ]]></b:skin>

Ini kodenya

/* 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: 85px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:5px; /* jarak antarmenu */
vertical-align: middle;
border: 0px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: &quot;Arial&quot;, Times New Roman, Serif; /* jenis hurup menu */
font-size: 14px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #c3771c; /* warna latar menu */
color: #000000; /* warna hurup 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: #c3771c; /* warna background menu aktif */
color: #FFFFFF;
}

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

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 0px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:url(&quot;transparant&quot;); /* 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 hurup kotak utama */
}

4. Kalo sudah letakkan kode berikut di bawah kode ]]></b:skin>

Ini kodenya

&lt;script src='http://sites.google.com/site/ruangsc/enes/tabview.js' type='text/javascript'/&gt;

5. Simpan gawean/perbuatan sobat.
6. Buka menu Tata Letak --> Page Elemen --> Tambah Gadget --> HTML/Javascript
7. Copas kode berikut ke dalam kolom HTML/Javascript.

Ini kodenya

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="">Daftar Isi</a>
<a title="">Top Post</a>
<a title="">Seks&amp;Cinta</a>
<a title="">Tukar Link</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">

Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">

Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">

Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">

Tab 4.1 <br />
Tab 4.2 <br />
Tab 4.3 <br />

</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size: 90%; text-align: right; text-shadow: 2px 2px 2px rgb(173, 173, 173);"><a href="http://ndeso-net.blogspot.com/" target="_blank" title="Tabview Widget">Widget by Tips dan Trik UDIK</a></div>

8. Simpan lagi gawean sobat.

Keterangan :

Kalo sobat mau menyesuaikan kotak tab view dengan mengganti warna atau ukurannya perhatikan teks berwarna merah, dan ganti kode yang ada disamping teks tersebut.

Gimana sobat udah jelas kan tips bloging membuat menu tab view? kalo belum bisa tanya lewat kotak komentar di bawah. Salam sukses.




loading...

Ditulis Oleh : Nadya Hasyim ~ Tips dan Trik Blogspot

Hasyim Sobat sedang membaca artikel tentang Tips Membuat Menu Tab View. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

7 komentar:

http://bayulebond.blogspot.com/ said...

berulang kali...aku mencoba.
tp gak berhasil, gak seperti si dora yg selalu berasil.

http://www.rahad2six.uni.cc/ said...

susah banget buatnya.....
pas udah jadi,tombol tabnya gak fungsi....

HANDIKOM said...

bos aku bingung...sudah kupraktekan di blogku yang lain tapi masih bingung cara ngisi postingannya gimana donk kasih penjelasan

http://akhirnyakutahu.blogspot.com said...

kunjungan balik bos, hidup blogger

www.fahmi-wisatakuliner.blogspot.com said...

Hadir :)

http://click-cartica.blogspot.com/ said...

Berkunjung friend

widnyana said...

tengkyu bro....... seharian gua utak-atik blog gw kaga dpet2... akhirnya berkat low g w bisa.... tenks

Post a Comment

Mohon komentar dengan sopan, SARA atau menaruh LINK Aktif di kotak komentar akan dihapus

 
Support : Copyright © 2011. UDIK-NET - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger