Membuat Menu Tabview (Versi I : ShadeTabView)

Kadang, karena widget-widget pada blog banyak, blog terkesan penuh sesak. Oleh karena itu, alangkah baeknya sobat meringkasnya dalam 1 tempat dengan menggunakan Tabview. Dengan demikian, blog sobat lebih enak dipandang mata,halah...Kata pengantar urak mutu.. Karena jenis2 Tabview banyak, aku coba dengan Tabview yang ini dulu, ShadeTabview.

Langkah-langkahnya :
1. Login blog

2. Masuk ke Layout

3. Edit HTML (sobat gak perlu centang Expand Widget Templates)

4. Cari kode berikut ]]></b:skin>

5. Letakkan kode script berikut di bawah kode ]]></b:skin>


<link href='http://atozet18.googlepages.com/tabviewcontent.css' rel='stylesheet' type='text/css'/>

<script src='http://atozet18.googlepages.com/tabviewcontent.js' type='text/javascript'/>


6. Save

7. Sekarang sobat klik Page Element pada Layout

8. Add a Gadget dan pilih HTML/Javascript

9. Masukkan kode berikut


<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="country1">Demo 1</a></li>
<li><a href="#" rel="country2">Demo 2</a></li>
<li><a href="#" rel="country3">Demo 3</a></li>
<li><a href="#" rel="country4">Demo 4</a></li>
<li><a href="http://www.dynamicdrive.com" target="_blank">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Just a Demo..Just a Demo
<a href="http=blogcenti.blogspot.com">Berita Basi</a>
<a href="http=blogcenti.blogspot.com">Cerita hari ini</a>
<a href="http=blogcenti.blogspot.com">Basa basi</a>

</div>

<div id="country2" class="tabcontent">
Just a Demo..Just a Demo
<a href="http://dhe-gallery.blogspot.com" target="_blank">Free Blogger Template</a>
<a href="http://dhe-gallery.blogspot.com" target="_blank">Free WordPress Theme</a>
<a href="http://dhe-gallery.blogspot.com" target="_blank">Free Site Template</a>
</div>

<div id="country3" class="tabcontent">
Just a Demo..Just a Demo
<a href="http://azthemes.blogspot.com" target="_blank">WordPress Theme</a>
<a href="http://azthemes.blogspot.com" target="_blank">Site Template</a>

</div>

<div id="country4" class="tabcontent">
Just a Demo..Just a Demo
<a href="http=moneylocker.blogspot.com">Pay per click</a>
<a href="http=moneylocker.blogspot.com">Pay per sale</a>
<a href="http=moneylocker.blogspot.com">Pay per lead</a>
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
<a href="http://blogcenti.blogspot.com/" target="_blank">Just a Blog</a>


10. Save

Lihat demo

Keterangan :

- warna biru = judul kategori Tab
- warna hijau = lebar Tabview. Sesuaikan dengan keinginan sobat
- warna merah = Area teks atau link. Ganti dengan punya sobat
- untuk menambahkan atau mengurangi Tabs, sobat tinggal tambahkan kode seperti berikut :

<li><a href="#" rel="country4">Demo 4</a></li>

dan

<div id="country4" class="tabcontent">
Just a Demo..Just a Demo
</div>

Sumber