Membuat Tab View

Apaan ntuh Tab View?
Mm,,, tab view tuh gimana ea jelasinnya,, hehehe,, aku jga bingung ngomongnya gimana.
Mm,, liat aja contohnya langsung deh biar kagak bingung,
"Mana contohnya???"
Nih contohnya:

DEMO

Nah cara bikinnya?

Bahan-bahan:
- CSS 200 Gram
- HTML 1 Kg
- JavaScript 2 Sendok Teh

Cara Membuat:
(Hahahahay,, kayak mo bikin adonan,, maklum, nyokap w khan masternya bikin makanan, jadi nular ke anknya,, hehehehe,,)

Pertama, ne kode CSSnya, masuk ke Tata Letak, Edit HTML ,

letakkan kode ini diatas kode ]]></b:skin>
div.TabView div.Tabs{
height: 24px;overflow: hidden;
}
div.TabView div.Tabs a{
float: left;display: block;
width: 90px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #00FFFF;
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif;
font-weight: 900;
color: #FF0000;
}
div.TabView div.Pages div.Page{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad{
padding: 3px 5px;
}
div.TabView div.Pages{
clear: both;
border: 1px solid #00FF00;
overflow: hidden;
background-color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{
background-color: #4E4E4E;
}

Nah trus opsinya yang warna BIRU tuh:
Width: 90px; Ne Lebar Menu Utama.
Height: 24px; Ne Tinggi Menu Utama.
border: 1px solid #00FFFF; Ne warna Border menu Utama
font-family: "Verdana", Serif; Ne jenis font Menu Utama, yang ada tanda kutipnya berarti sebagai default.
color: #FFFFFF; Ne warna font menu Utama.

border: 1px solid #00FF00; Ne warna border kotaknya (Kotak dari content)
background-color: #000000; Ne warna background kotaknya
background-color: #4E4E4E; Ne warna background buat menu utamanya

Trus ne Code HTMLnya ama Javascriptnya, Paste di Tambah Gadget, pilih HTML/JavaScript:
<form>
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab1</a>
<a>Tab2</a>
<a>Tab3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

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

<!--Content Tab 1-->
</div>
</div>

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

<!--Content Tab 2-->
</div>
</div>

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

<!--Content Tab 3-->
</div>
</div>

</div>
</div>
</form>
<script type="text/javascript" src="http://dickelodeonjs.googlecode.com/files/DADtabview.txt"> </script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Ganti aja isinya, yang harus kamu edit, yang bagian diwarna BIRU

Udah sgini aja postingnya,, w mo makan dulu, laper,,, (T_T)
Comments

No comments:

Related posts
Guestbook
Author


© 2008 - 2016 DickeyMaru
Blogger Template Win 8 design by Dark Ard from DeezClan | All rights reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other