5
Tips Membuat Menu Tab View

Masih banyak orang yang belum tau gimana membuat Menu Horizontal Tab View seperti pada gambar disamping, umumnya orang-orang pengguna blog memanfaatkan fasilitas yang ada pada template gratisan atau ada juga yang berbayar. Nah bagi anda yang punya blog masih biasa-biasa saja namun ingin membuat tampilan Menu Tab View tersebut, disini akan saya coba untuk memberitahukan gimana cara membuatnya secara manual..

Bagi yang belum paham juga, coba perhatikan gambar diatas, dan liat langsung contohnya diblog percobaan saya disini


Berikut cara membuatnya:
1. Masuk ke akun blogger anda
2. Pilih menu "Rancangan --> Edit HTML"
3. Centang dulu pada kotak "Expand Template Widget"
4. Cari kode ini ]]></b:skin>
5. Kemudian masukkan kode berikut ini sebelum kode diatas:

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}


6. Perhatikan text-text yang berwarna merah diatas, itu merupakan keterangan untuk pengaturan Tab View. Untuk mengetahui kode2 warna silahkan lihat DISINI
7. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

Terus di Save.

Lanjutnya:
1. Buka Rancangan >> Elemen Laman
2. PIlih "Tambah Gadget" --> "HTML/Javascript" letakkan dimana mau kamu pasangkan Manu Tab View ini.
3. Masukkan Kode berikut pada Gadget diatas:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div>
</div>


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

<script type="text/javascript">
tabview_initialize('TabView');
</script>


Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

5 komentar :

jaya | Belajar SEO Pemula mengatakan... [Reply to comment]

Heeemmmm cobain deh ntar di wordpress, kira-kira bisa gak ya om... salam kenal om, tukaran link yuk om.... boleh tak??

Ujie Caprone mengatakan... [Reply to comment]

Kalau di WP pake plugin..., tp plugin nya kan bisa di edit juga....
Mari tukeran link

jaya | Belajar SEO Pemula mengatakan... [Reply to comment]

Om Ujie, Link nya dah tak pasang di sini : http://dtutorial.com/tukar-link

Anonim mengatakan... [Reply to comment]

keren blognya, salam kenal

Anonim mengatakan... [Reply to comment]

Hey there! This is my first visit to your blog! We are
a team of volunteers and starting a new project in a community in the same niche.
Your blog provided us useful information to work on. You have done a marvellous
job!

Here is my blog post :: Buy pinterest repins

Posting Komentar

Silahkan tinggalkan komentar anda disini...

 
Ujie Caprone | © 2011 Blogger Template by Ujiecaprone.com