Buat Tab View

Ingin buat tab menu seperti di blog saya?
Begini caranya,

1. Login ke Blogger
2. Ke Layout > Edit HTML
3. Cari kode ]]></b:skin>
4. Masukkan kode ini diatas kode ]]></b:skin>
   
   
   

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Width Main Menu Top */

text-align: center;
height: 30px; /* High Main Menu Top */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Top Menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Main Menu Top Fonts */
font-weight: bold;
color: #000; /* Main Menu Top Font Colors */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px}
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Background colors on Main Menu */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Main Box border color */
overflow: hidden;
background-color: #E6E6E6; /* Main Box background color  */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


Masukkan kode berikut diatas kode
<script src=' http://miskahiper.fileave.com/tabview.js' type='text/javascript'/>


SAVE





Ke Layout > Add Gadget > HTML/JAVASCRIPT > Masukkan kode berikut


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>


</div>
<div class="Pages" style="width: 300px; 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>


Apa yang harus diedit??

1. Tab 1
   Tab 2
   Tab 3 (ganti nama tab 1, dan seterusnya dengan nama judul tab anda)
2. Tab 1.1
   
   Tab 1.2
   
   Tab 1.3
   (ini adalah isi dari tab 1. ganti dengan isi sesuka anda)
3. Tab 2.1
   
   Tab 2.2
   
   
   Tab 2.3
   ( ini adalah isi dari tab 2, silahkan diganti juga)
4. Tab 3.1
   
   Tab 3.2
   
   Tab 3.3
   (ini adalah isi dari tab 3, silahkan diganti juga)
5. 
   Info ini berasal dari mindauthor
    

Artikel Terkait: