TIME

Monday, March 14, 2011

Cara Memasang TabView Versi 2 di Blogger

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. sebagai contoh bisa anda lihat pada gambar di atas atau pada sidebar kanan di blog ini...
Anda tertarik...? mari belajar bersama


Berikut langkah-langkahnya:
  • Login dulu di Blogger dengan ID anda
  • Masuk ke Design 
  • Pada Sub Menu pilih Edit HTML
  • Pada Kotak Edit HTML cari Kode ]]></b:skin>
  • Lalu Copy Code di bawah ini 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;} 

  • Lalu letakkan Script berikut dibawah kode <head>

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>
Note : Ada baiknya bila anda mengganti hosting dari script di atas,untuk menghindari Limited bandwidth
  •  Save Template
  • Pergi ke halaman Element Halaman/Page Elements
  • Klik add gadget
  • Pilih Menu HTML/Java Script
  • 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>
  • sekarang save san selesai
Anda bisa menuangkan creativitas anda untuk membuat tab view nya kebih menarik
Selamat Bekerja =))

0 comments:


Post a Comment

◄ Newer Post Older Post ► Home

Popular Posts

 

Subscribe

If you like the article on this BLOG, please subscribe via email
Input your email address below and press subscribe
ENjoy

rss feed blog template 4u

Followers