Cara Membuat Widget Menu TAB View Di Blog

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.

Untuk tampilan tab view ini lebih keren dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama tidak menarik.tanpa basa basi lagi yuk di lihat tutorialnya :)

1. Silahkan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas 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: 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;}

5. Letakkan kode dibawah ini diatas kode </head>

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

6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript

<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>

Setelah itu simpan dan lihat hasilnya :D.