sobat blogger pada postingan kali ini saya akan memberikan tips cara membuat Tab View.
meskipun ini sudah banyak di internet tapi saya akan memberikan tips ini buat sobat blogger.
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 ]]>
5.Lalu Copy Kode berikut dan Pastekan diatas kode ]]>
/* 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>
ini kodenya:
<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"><br>
<div class="Tabateonsoft" id="Tabateonsoft"><br>
<div class="TFs"><br>
<a>tab1</a><br>
<a>tab2</a><br>
<a>tab3</a><br>
<a>tab4</a><br>
</div><br>
<div class="Pages"><br>
<div class="Page"><!-- Tab --><br>
<div class="floor"><br>
Disini letakkan kode untuk tab 1 anda<br>
</div><br>
</div><!-- end Tab --><br>
<div class="Page"><!-- Tab --><br>
Disini letakkan kode untuk tab 2 anda<br>
</div><!-- end Tab --><br>
<div class="Page"><!-- Tab --><br>
<div class="floor"><br>
Disini letakkan kode untuk tab 3 anda<br>
</div><br>
</div><!-- end Tab --><br>
<div class="Page"><!-- Tab --><br>
<div class="floor"><br>
Disini letakkan kode untuk tab 4 anda<br>
</div><br>
</div><!-- end Tab --><br>
</div><br>
</div><br>
</form><br>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>
12.Simpan,selesai deh
Cara Mudah Membuat Tab View
/ On : 2:06 PM/ Thank you for visiting my small blog here. If you wanted to discuss or have the question around this article, please contact me e-mail at herdiansyah hamzah@yahoo.com.
Subscribe to:
Post Comments (Atom)
Advertise
0 comments:
Post a Comment