Senin, 09 Mei 2011

Cara Membuat Menu Tab View

Menu tab view adalah solusi cermat dalam menghemat tampilan blog, dengan paduan css dan html tentunya  menu tab viewakan tampil dengan cantik di blog anda.

kira2 begini tampilan menu tab view:



Beginilah cara untuk membuat menu tab tersebut



1. Login ke blogger trus pilih menu "Layout --> Edit HTML"


2. Kemudian cari kode ini ]]>

3. Kemudian masukkan kode berikut ini sebelum kode ]]> atau kedalam tag CSS.

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




4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan tab view. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat di kode warna dengan photoshop



5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode



- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

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.

0 komentar:

:10 :11 :12 :13 :14 :15 :16 :17
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39

Posting Komentar

Related Posts Plugin for WordPress, Blogger...