Cara membuat tab view ala kompas.com

Tab view memang merupakan widget yang sedang digandrungi saat ini. Bahkan hampir semua design template yang dibuat oleh blogger, dilengkapi dengan widget tab view ini. Nah, dengan sedikit modifikasi, saya membuat tab view ini dengan style ala kompas.com. Dimana tab view ala kompas ini dilengkapi dengan url link di bagian bawah setiap tab. Untuk melihat contohnya, silahkan buka aja kompas online disini. Ok, untuk tutorial cara membuatnya, kita langsung aja ke TKP. Pertama-tama, silahkan download dulu script/text tab view disini. Kemudian, simpan script/text tersebut dalam bentuk text document (untuk namanya, terserah anda aja), lalu simpan di hosting web anda. Kalo ngk punya hosting berbayar, gunakan aja web hosting gratis seperti : Ripway. setelah selesai, silahkan login ke akun blogger anda.

Langkah berikutnya, silahkan masuk ke halaman edit HTML, seperti biasa jangan lupa expand template. untuk kode CSS-nya, masukkan kode di bawah ini sebelum kode ]]></b:skin> :

div.TabView div.Tabs { height: 24px;margin-left:14px; overflow: hidden;} div.TabView div.Tabs a { float: left; display: block; width: 90px; text-align: center; height: 24px; padding-top:2px; margin:2px; vertical-align: middle; background:#dedede;border:1px solid #222; text-decoration: none; font-family: "Arial", Tahoma; font-size:11px; font-weight: bold; color: #000; } div.TabView div.Tabs a:hover{background-color: #F76541; color: #fff;} div.TabView div.Tabs a.Active{background-color: #fff; color: #000;} div.TabView div.Pages { background:#fff; clear: both; border-top: 1px solid #222; overflow: hidden;font-family:"Arial", Tahoma, Verdana;} div.TabView div.Pages li { border-bottom:1px solid #6D7B8D; background:url("http://i278.photobucket.com/albums/kk100/herdiansyah/bulletarrow.gif") no-repeat 0px .30em; margin:0; padding:0 0 .25em 10px; line-height:1.2em } div.TabView div.Pages div.Page {height: 100%; padding: 0px; overflow: hidden;} div.TabView div.Pages div.Page div.Pad {padding: 3px 5px;}

Setelah itu, simpan kode script/text di bawah ini sebelum kode </head> :

<script src='http://h1.ripway.com/bocahzaman/TabViewku.txt' type='text/javascript'/>

Jangan lupa, http://h1.ripway.com/bocahzaman/TabViewku.txt diganti dengan alamat link hosting penyimpanan script/text tab view anda.

Untuk kode CSS dan script/text-nya sudah selesai, silahkan simpan template anda. Berikutnya, masuklah ke halaman template anda dan tambahkan halaman di bagian template anda sesuai dengan keinginan. Masukkan kode HTML di bawah ini :

<form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 330px;" class="Tabs"> <a>Judul tab 1</a> <a>Judul tab 2</a> <a>Judul tab 3</a> </div> <div style="width: 330px; height:200px;" class="Pages"> <div class="Page"> <div class="Pad"> Tuliskan deskripsi singkat anda disini.... <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> </div> </div> <div class="Page"> <div class="Pad"> <div class="Page"> <div class="Pad"> Tuliskan deskripsi singkat anda disini.... <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> </div> </div> <div class="Page"> <div class="Pad"> Tuliskan deskripsi singkat anda disini.... <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> <li><a href="url-link anda">Judul link anda</a></li> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

Selesai, selamat mencoba....