Membuat tabview ala o-om

Makasih pada o-om yang udah mengizinkan para blogger untuk menggunakan tabview miliknya, tabview yang telah dirancang oleh o-om sangat mudah untuk digunakan tampa harus melakukan tambahan kode sebelum </head> , yuk kita lihat cara
membuatnya

ini adalah contoh dari tabview

cara membuatnya Copy seluruh kode di bawah ini pada note pad :

<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #CC0000; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #E6E6E6; overflow: hidden; background-color: #FFFFFF;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #FFCC00; border-right:1px solid #E6E6E6; border-top:1px solid #E6E6E6; border-bottom:0px solid #E6E6E6; float: left;
display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 12px; font-weight: 900; color: #E6E6E6}
</style>


<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 330px;" class="TTs"> <a>tab1>/a> <a>tab2</a> <a><blink>tab3</blink></a> </div>
<div style="width: 330px; height: 250px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
tab1
tab1
</div>
</div>
<div class="Halaman">
<div class="Alas">
tab2
tab2
</div>
</div>
<div class="Halaman">
<div class="Alas">
<div class="Page">
<div class="Pad">
tab3
tab3
</div>
</div>
</div>
</div>
</div></div></form>


<script style="text/javascript" src="http://oom.blog.googlepages.com/o-omdotcom_tabview.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

#CC0000 adalah warna background pada menu utama atas, yaitu warna merah...kamu bisa menggantinya dengan warna yang kamu inginkan.

#E6E6E6 adalah warna border dari kotak tabview yang akan dibuat.

Warna ungu (tab1,tab2,tab3) adalah judul dari menu atas tabview. Untuk mengisi tab tersebut isi pada tab yang sesuai dengan nomornya. Misal Shoutbox pada tab 1, maka masukkan script shoutbox tersebut
contohnya sepeti ini :

<div class="Halaman">
<div class="Alas">
tab 1(ganti dengan script shoutbox)

begitu juga seterusnya...

bila kamu sudah siap dengan tabview yang telah kamu edit, lanjutkan copy paste pada blog kamu dan lihat hasilnya, kode yang paling bawah jangan diedit karena itu janji saya ke o-om :) ...thank's to o-om for the tutorial.

Read this | Baca yang ini

Widget by [ Tips Blogger-Tutorial Blogger Pemula ]