Cara membuat tab view ala kompas.com

Sabtu, 15 Agustus 2009

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....

8 komentar:

Unknown mengatakan...

Thanks ya mas, btw silahkan kunjungi blog berita saya, yg sedang di bangun (Beta)! http://infonasional.blogspot.com

dj tutorial mengatakan...

mantap bos tutorialnya..cobain ya..moga ja gak puyeng..

Zoom Magazine mengatakan...

Rivans : sama2, dah sy kunjungi. nice blog...

DJ Tutorial : trims mas, sebenarnya sangat sederhana, hanya menggunakan script/text aja. Untuk pengembangannya, silahkan diutak-atik dengan blog percobaan untuk menghindari kerusakan template...

Pohon Berbentuk Penis wkwkwk mengatakan...

muantaaaaaaaaaaaaaaaaaap... thx sob

blogger Newspaper mengatakan...

tutorial bagus dan perlu dikembangkan untuk modifikasi template blogger

ded mengatakan...

mantappppppppp

ded mengatakan...

template yang kaya pny mas mana ?

golpud mengatakan...

mas ripwaQ eror ada hosting slaen ripway gak buat nempatin tuch code............

Posting Komentar

Terima kasih telah menyempatkan waktu untuk berkunjung di BLOG saya yang katro ini. Biasakanlah berkomentar setelah Anda membaca artikel. But No Spam, No Porn....OK Bro!!!