CARA MEMBUAT TAB VIEW

POSTING_ POSTING _POSTING LAGI HEHEHE SEPERTI BIASA MASIH DALAM SEPUTAR TIPS N'TRIK BLOG..X INI GW PENGEN SDIKIT BERBAGI PENGETAHUAN BAGAI MANA CARA PASANG TAB VIEW DI BLOG.MUNGKIN BUAT PARA BLOGER PROFESIONAL,HAL INI MUDAH ATAU CETEK ATAU APAAA GETTOH .TAPI GA ADA SALAHNYA JG KAN SEDIKIT BERBAGI SAPA TAU AJA BISA BERMANFAAT BAGI PARA BLOGER PEMULA SEPERTI GW..(JUJUR EUY) AHAHAY..

=============================
PENTING
GW POSTING GA SEMBARANG POSTING TAPI SUDAH GW UJI DULU SEBELUMNYA, SETELAH BERHASIL BARUU DWEH GW POSTING..NAAAH DEMIKIAN LAH AWAL KISAHNYA. NAH LHO !!!!!! GW NGOMONG APAAN SEEH HAHAHA
=============================

OK LANSUNG AJA DEH GW BAHAS,CHEKIDOOOOOOT !!!!!!!!!!

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 xan dapat menghemat pemakaian Sidebar.dan banyak sekali cara pembuatan Tab View begitupun Bentuknya,supaya jelas niy gw kasih screenshootnya

hellcyber

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

BERIKUT LANGKAH2 NYA

1.Login ke blogger dengan ID xan

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 */
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">
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div>
<div class="Page">
Disini letakkan kode untuk tab 2 anda
</div>
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div>
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

catatan

TULISAN YANG MERAH ISI DENGAN KODE XAN SENDIRI,OK !!!!!!!!!!!

BLOGS CYBERS

Jumat, 22 April 2011

CARA MEMBUAT TAB VIEW

Tidak ada komentar:

Posting Komentar

STATISTIK BLOGZ

Laman