Cara Membuat Widget Menu TAB View Pada Blog

Pada kesempatan kali ini ane hanya akan membahas Cara Membuat Widget Menu TAB View Pada Blog dimana dengan mengunakan trik simple ini blog kita akan terasa lebih ringan iya karena tidak semua content langsung terload oleh browser di komputer pengunjung
 dengan mengunakan Widget Menu TAB View  kita bisa meringkas tampilan blog kita dan dengan itu blog pun akan terasa lebih ringan,

Menu TAB view adalah 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.


Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

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 di bawah ini tepat 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. bagai mana tampilan nya menarik bukan,, 

http://cwiter.blogspot.com
 tabateonsoft.blogspot.com

Cara Membuat Widget Menu TAB View Pada Blog 2015-04-06T22:19:00-07:00 Rating: 4.5 Diposkan Oleh: Abdul Aziz