Selasa, 28 Oktober 2008

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.


Ingin mendapat artikel seperti artikel di atas langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.

Ayo gabung dengan internet marketer atau blogger lainnya di facebook dan twitter. Silahkan klik link di bawah ini...

[Facebook] - [Twitter]

Read this | Baca yang ini



Widget by [ Tips Blogger-Tutorial Blogger Pemula ]

4 comments:

putra83.blogspot.com mengatakan...

tips2nya menarik.....membuat saya semakin semangat untuk belajar....:)

arie mengatakan...

makasih mas...semoga tips yang ada bermanfaat

Hendri A.M mengatakan...

good mas!....numpang copy paste ya?

a mengatakan...

@Hendi : Silahkan mas hendri..

Posting Komentar

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Untuk menggunakan emotion copy paste kodenya saja, budayakan berkomentar setelah membaca ya .

Note : Harap gunakan nama anda dan jangan menggunakan keyword-keyword tertentu atau komentar anda tidak akan dipublish...