Membuat Tab View pada Blog

27 September 2008

Membuat Tab View pada Blog

Tab View adalah kotak konten yang sangat berguna. kita dapat menghemat halaman dengan menggunakan Tab View. (lihat gambar di bawah ini)

Berikut ini adalah tutorial membuat Tab View:

1. Login ke blogger anda, masuk ke "Layout --> Edit HTML"
2. Kemudian temukan kode ]]></b:skin>
3. Masukkan kode dibawah ini sebelum kode ]]></b:skin> atau dalah tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content 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;
}

4. Anda dapat mengubah kode yang berwarna merah di atas.
5. Langkah selanjutnya, masukkan kode di bawah ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian "Simpan".
7. Masuk ke menu "Page Elements"
8. Pilih "Add Page Element" --> "HTML/Javascript" untuk meletakkan Tab View.
9. Masukkan kode 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>

Catatan :
- Nomor yang berwarna biru (350px) adalah ukuran tab view.
- Kode warna biru adalah Menu Utama Tab View
- Kode warna Merah adalah isi tab view. anda bisa mengisinya banner, link, widget, comment atau konten yang lainya.

Semoga berhasil.

Cetak