Gratis berlangganan artikel Zykry via mail, join sekarang!

Monday, March 15, 2010

Cara membuat tab view(New Version)


  • Login ke Account Blogger Anda
  • Lalu klik "Layout / Tata letak" dan lalu klik "Edit HTML"
  • Kemudian cari kode ini ]]></b:skin>
  • Lalu Copy-kan kode dibawah ini, dan letakkan sebelum atau diatas kode ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

  • Perhatikan text-text yang dicetak biru, itu adalah keterangan yang ada di Tab View. Ada ukuran, style border dan warna . Silahkan ganti sesukamu.Untuk melihat kode warna klik disini.
    Melihat style border klik disini.
  • Selanjutnya copy kode dibawah ini, letakkan sebelum kode </head>
<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>

  • Kemudian Simpan
Langkah Selanjutnya :

  • Pilih "Page Elements"
  • Trus Pilih "Add a Gadget" --> "HTML/Javascript" untuk meletakkan Tab Menu View ini.
  • Copy script dibawah ini kedalamnya:
<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');

  • Lalu Simpan/Save
Keterangan:

  • Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar Tab View.
  • Kode yang berwarna Ungu text yang muncul di Menu utama (Menu Atas).
  • Kode yang berwarna Hijau adalah isi dari Tab View.
Demikianlah informasi yang bisa Saya berikan dan sudah di coba di blog/website ini, semoga berguna buat Anda semua.




Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com
Thx to :
Jangan lupa add facebook Zykry Dark
print this page Print this page
Cara membuat tab view(New Version)SocialTwist Tell-a-Friend

Comments :

4 comments to “Cara membuat tab view(New Version)”

Nikmaya John said...
on 

mantap nih tipsnya....

odoy said...
on 

mantap gan makasih

nenden said...
on 

nice post mas, salam kenal

AGEN BOLA TERBESAR said...
on 

Terimakasih Atas Infonya Gan.. Sangat Membantu Dan Di Tunggu Artikel Berikutnya Yah ^_^
AGEN PIALA DUNIA
BANDAR BOLA
JUDI ONLINE
BACCARAT ONLINE
PARLAY 2 TIM


Apa pendapat anda?

No spam and no porn yaw!!

Widget By Devils Workshop

Guest Book

Iklan

Pasang iklan anda di Zykry-trick hanya Rp.15.000 /bulan Hubungi : 087 823 177 355 - 085 759 277 896 Facebook : Zykry@programmer.net
 
twitter

Tukeran Link

Tips Dan Trick Blogging

U follow I follow

Statistik


free counters
broadband speed test
Current Events & News Blogs - Blog Rankings Blog Directory
Internet Blogs Web Design & CSS (Graphics) - TOP.ORG
Blogging Blogs - Blog Catalog Blog Directory Online Marketing - OnToplist.com
Web design blogs
The Republic of Indonesian Blogger | Garuda di Dadaku
Top 10 Award