cara mudah membuat TAB VIEW di blog

|

postingan kali ini kita akan membahas bagaimana cara membuat tab view di blog
berikut ini kode yang saya terima dari situs mbah nya blogger . hehhehee
silahkan , berikut cara - cara nyaa ,,

1. login ke blog agan dan pilih "Layout --> Edit HTML" 

2. jangan lupa agan expand HTML agan , buat jaga2 kalo agan ada yang salah atau kurang mengerti ,,  dan buat mempermudah mencari kode berikut agan tekan Ctrl + F

3. terus lanjutkan dan cari kode berikut ]]></b:skin>
klo sudah timbul di bagian paling bawah sekarang agan find terus cari kode berikut dan letakan kode 

4. yang banyak di bawah ini sebelum kode ini ]]></b:skin> 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;
}

1. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan anda lihat sendiri di pengaturan warna templeat.. tinggal kalian cari2 kode - kode warne nya ajaa ..
2. Langkah selanjutnya yaitu pasang kode di bawah ini sebelum kode </head
   <script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>
3. terus di "Di save"
    
4. Lalu pergi ke menu "Page Elements"
    
5. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
    

Inilah script yg harus kamu pasang :

<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 dan text yang berwarna biru itu (350px) adalah ukuran tinggi dan lebar tabview.nya
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. agan bisa mengisinya dengan link, gambar,
  banner, script dll.