Cara Membuat Tab View Terbaru

Tutorial kali ini membahas tentang cara membuat tab view, mungkin sebagian dari kalian sudah pernah mencoba nya, tapi tidak ada salahnya saya share kan kembali disni. Tab view kali ini merupakan tab view versi ke 2, kalian bisa mengubahnya sesuai dengan selera.



    * Login ke Blogger.com
    * Kemudian Tata Letak
    * Pilih Edit HTML
    * Centang Expand Widget
    * Copas kode berikut dibawah kode "</head>"


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

Setelah itu, Cari kode ]]></b:skin>
kemudian paste script berikut diatas kode tadi

/* 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:1.5px solid #CCCCCC;
border-right:1.5px solid #999999;
border-bottom:1.5px solid #999999;
border-left:1.5px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #FFFFFF;
border-top:1.5px solid #999999;
border-right:1.5px solid #cccccc;
border-bottom:1.5px solid #cccccc;
border-left:1.5px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #FFFFFF;
color: #bf0afa;
border-top:1.5px solid #999999;
border-right:1.5px solid #cccccc;
border-bottom:1.5px solid #cccccc;
border-left:1.5px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:280px; border:2px solid #EFF0F1; padding:4px;background: transparent; -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: 5px 5px; text-align:left;}

SAVE Template

Selanjutnya, masuk ke Edit Laman
klik Add  gadget

Copy Paste script berikut :


<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>Traffic</a>
<a>Blog worth</a>
<a>Alexa</a>
<a>backlink</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">

Tulis isi Tab 1 Disini

</div>
</div><!-- end Tab -->

<div class="Page"><!-- Tab -->
<div class="floor">

Tulis isi Tab 2 Disini

</div>
</div><!-- end Tab -->

<div class="Page"><!-- Tab -->
<div class="floor">

Tulis isi Tab 3 Disini

</div>
</div><!-- end Tab -->

<div class="Page"><!-- Tab -->
<div class="floor">

Tulis isi Tab 4 Disini

</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>


Setelah selesai tinggal di SAVE

ket.
      - Ubah Ukuran dan Warna Sesuai dengan keinginan kalian.
      - Ganti Tulisan berwarna Merah dengan isi tab kalian.

Related Posts:

Tweet