Bukan berarti Tab View yang sebelumnya kurang bagus,,tapi teknologi terus berkembang, begitupun pimikiran orang.Tentu kita sudah mengetahui Tab View,tapi untuk lebih memahaminya tidak ada salahnya kita ulang membahasnya.
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.
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>
/* tab model 2 ateonsoft.com */6.Lalu letakkan kode berikut dibawah kode <head>
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;}
<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">Ok selamat bekerja, Anda bisa mengeditnya sesuka kalian,tuangkan kreatifitas untuk membuat tab view ini lebih bagus
<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>
Comments
5 komentar to "Cara Membuat Tab View"saya awali dengan bacaan basmalah....
tab baru nih ?
mksh yah info nya.
semakin berkembang kemajuan tab, hihihihii
sama sama sob...
wah bagus tutorialnya...
bagus sob tips nya..,,.,
Post a Comment
Google/Blogger : Khusus yang punya Account Blogger.
Wordpress : Blog dengan account wordpress
Name/URL : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonymous : Jika tidak ingin mempublikasikan profile anda.