0 membuat tab view

08 Januari 2011

Tab View merupakan sebuah Widget yang dapat meletakkan link atau gambar atau apapun juga kedalamnya,yang tentu akan memakan Sidebar jika ditampilkan semuanya sampai kebawah,dengan Tab View ini kita dapat menghemat pemakaian Sidebar.dan banyak sekali cara pembuatan Tab View begitupun Bentuknya,seperti pada posting terdahulu cara membuat menu tab view dan ini juga salah satu caranya.

Sebenarnya bukan saya yang membuat Script Tab view ini,saya hanya sebagai penyambung lidah saja dari pembuat aslinya di Ateonsoft.com.

Berikut langkah-langkahnya

1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML


4.Pada Kotak Edit HTML cari Kode ]]></b:skin>

5.Lalu Copy Kode berikut dan Pastekan diatas kode ]]]></b:skin>


div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

6.Lalu letakkan kode berikut dibawah kode <head>  

 <script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/> 


7.Save Template

8.Pergi ke halaman Element Halaman

9.Klik Add Widget Element

10.Pilih Menu HTML/Java Script

11.Lalu Copy kode berikut



<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script> 

 Ok selamat bekerja, Anda bisa mengeditnya sesuka kalian,tuangkan kreatifitas untuk membuat tab view ini lebih bagus.

0 komentar:

Posting Komentar

Welcome to my Blog

Selamat Datsang di blog saya. Anda bebas melakukan apa saja disini, misuh-misuh, corat-coret, apasajalah, asalkan sopan :). semoga anda bisa mendapatkan tambahan ilmu di blog ini, jangan lupa follow my blog and tinggalkan comment. Thankyu.. :))

Sekilas tentang saya

saya gepenk A.K.A Barnacle. Asli orang Solo (spirit of Java). Kuliah di Universitas Negri di Surakata

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
.:69:.