Membuat Tab View Tanpa EDIT HTML

Langsung saja tanpa basa-basi, Just Read

1. Masuk ke akun Blogger Anda.

2. Klik Tata Letak.

3. Klik Tambah Gadget.

4. Pilih HTML/JavaScript.

 

<style type="text/css">
/*------------TabView--------*/
div.TabView div.Tabs {
height : 20px;
overflow : hidden;
}
div.TabView div.Tabs a {
float : left;
display : block;
width : 100px;
text-align : center;
height : 20px;
padding-top : 0px;
vertical-align : middle;
border-top : 1px solid #999999;
border-left : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
font-family : "verdana", Serif;
font-weight : 90px;
color : #1e62b6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
background-color : #f2f2f2;
}
div.TabView div.Pages {
clear : both;
border-left : 1px solid #999999;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
overflow : hidden;
background-color : #f2f2f2;
}
div.TabView div.Pages div.Page {
height : 100%;
padding : 0;
overflow : hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding : 3px 5px;
}
</style>



<script src="http://andi8lumut.googlepages.com/tabview.js" type="text/javascript">
</script>


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 310px;" class="Tabs">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>

<div style="width:310px; height:275px; " class="Pages">


<div class="Page">
<div class="Pad">

Isi teks tab 1

</div>
</div>


<div class="Page">
<div class="Pad">

Isi teks tab 2

</div>
</div>

<div class="Page">
<div class="Pad">

Isi teks tab 3

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

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