Cara Menambahkan Tab Menu Widget Blog

Cara Menambahkan Tab Menu Widget Blog. Cara ini adalah dimana pada suatu widget blog akan di tambahkan tab menunya agar lebih mudah di akses dan di buat simpel, yang dimana pada salah satu widget blog terdapat beberapa menu yang kita inginkan yang bisa di simpan pada satu tempat saja. Lihat contoh gambar berikut.

Jika anda tertarik, silahkan ikuti cara-cara berikut ini:
1.  Seperti biasa anda Login terlebih duhulu
2.  Setelah masuk menu Dasbor Pilih >>Template<< dan pilih >>Edit HTML<<
3.  Untuk mencegah hal-hal yang tidak di inginkan, silahkan Back-Up terlebih dahulu seperti biasanya.
4.  Setelah masuk Edit HTML, carilah kode script ]]></b:skin> dengan menggunakan CTRL+F pad keyboard anda untuk memudahkan anda dalam percarian.
5.  Setelah kode script ]]></b:skin> ketemu, silahkan copykan kode di bawah 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:#ffeecc;
color: #441500;
border-top:1px solid #ffcc77;
border-right:1px solid #ffeecc;
border-bottom:1px solid #ffeecc;
border-left:1px solid #ffcc77;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #ffeecc;
border-top:1px solid #ffeecc;
border-right:1px solid #ffcc77;
border-bottom:1px solid #ffcc77;
border-left:1px solid #ffeecc;}
div.Tabateonsoft div.TFs a.Active
{ background: #441500;
color: #441500;
border-top:1px solid #ffeecc;
border-right:1px solid #ffcc77;
border-bottom:1px solid #ffcc77;
border-left:1px solid #ffeecc; font-weight:bold; color: #ffffff;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:333px; border:1px solid #ffcc77; padding:0;background: #444444; -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.  Setelah itu, silahkan letakkan kode script di bawah ini di atas kode </head>

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

7.  Kemudian Simpan Template
8.  Masuk ke menu >>Tata Letak<< dan seperti biasa tambahkan widget >>HTML/JavaScript<<
9.  Setelah masuk widget HTML/JavaScript masukkan kode script di bawah ini ke dalam 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>
</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>
</div>
</form>

<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

10.  Setelah itu simpan dan lihat hasilnya.

Nahh sobat sekian dulu dari saya, selanjutnya tinggal anda rubah sendiri tampilannya sesuai yang di harapkan, karena kode yang saya kasih adalah kode yang sudah saya modifikasi sendiri. Jika ingin artikel ini di Share secara keseluruhan, silahkan cantumkan URL blog ini. Sekian dan Terima kasih. Selamat mencoba. Semoga bermanfaat.