Senin, 02 Februari 2009

cara membuat Tab view

pasti uda tau kan tab view itu apa?
ini lho bos:





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



lihat huruf yg berwar merah itu keterangan code yg bisa kamu edit :warna, lebar ETC (ngertikan)

lalu coba cari code </head> dan masukan code dibawah ini diatas nya !!!
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>


lalu save >>> "tataletak(layout)">>>>> "elemen halaman(page elemen)">>>>"Add a Gadget(HTML)"

masukan code dibawah ini:

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



text yg berwarna ungu untuk menambah kan jumlah menu kamu bisa perbanyak
code yg berwarna merah untuk mengubah lebar dan tingginya tab view
text biru untuk menu utama....
sedangkan yg berwarna ijo adalah isi menu itu sendiri kamu bisa masukan link ,gambar ato baner kedalam nya........

0 comments:

Posting Komentar

test

1
´