free Java script and Tutorial: Cara Membuat Widget Menu TAB View

Cara Membuat Widget Menu TAB View

Menu TAB view adalah widget tambahan yang berbentuk tab. Dengan cara ini tab view kita dapat menghemat sidebar pada blog kita sehingga tidak perlu lagi menambahkan banyak widget yang akan memberatkan loading pada blog. Dengan cara ini diharapkan akan memberi warna tersendiri karena belum disediakan oleh tempelate bawaan dari blogger.

Untuk membuat widget ini ikuti langkah langkahnya sebagai berikut:

1.	Login ke blog.
2.	Masuk ke template lalu pilih edit HTML
3.	Sebaiknya backup dulu tempelate anda.
4.	Silahkan cari kode ]]></b:skin> dengan cara Tekan CTRL+F untuk mengeluarkan kotak pencarian.
5.	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;}

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

7. Save template

8. Masuk ke tab Elemen laman

9. Tambahkan widget HTML/JavaScript Letakkan kode dibawah ini di dalam widget HTML/JavaScript

Simpan perubahan dan lihat hasilnya, selesai.

Demikian langkah demi langkah yang bisa saya sampaikan semoga bermanfaat.

Sumber: http://cwiter.blogspot.com