Widget-Menu TAB View Pada Blogspot

Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

berikut di bawah ini adalah langkah-langkahnya:
1. Masuk ke dasbor blog anda.
2. Masuk ke "Template" lalu pilih "edit HTML"
3. Centang "Expand widget templates".
4. Cari kode ]]></b:skin> (tekan CTRL+F untuk pencarian cepat), lalu copy dan paste kode tersebut.
5. Setelah itu, letakkan kode yang ada di bawah ini, di atasnya kode ini ]]></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: 0px;
}
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: #333;
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; color: #ffffff;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:333px; border:1px solid #EFF0F1; padding:0;background: #222222; -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:12px;padding: 3px 5px; text-align:left;}

6. cari kode </head> lalu letakkan kode yang ada di bawah ini, di atasnya kode ini </head>

 <script src='http://zuazz.googlecode.com/files/ateonsoft_tab.js' type='text/javascript'/> 

7. Save template
8. Masuk ke "Tata Letak" --> "Tambahkan Gadget" --> "HTML/JavaScript"
9. Copy kode yang ada di bawah ini:

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

 11. klik "save" dan lihat hasilnya di "Lihat blog"


Thank you by copas ^__^