Tim Van Damme Inspired by Tim Vand Damme

Pengikut

Network


ShoutMix chat widget

Buku Tamu

Blog

8 Jun 2011

Membuat Tab View Dengan Css Diblogspot

Only CSS and Jquery - akan menjelaskan cara membuat Tabview dengan menggunakan CSS, disini Css akan menambah keindahan dari Tabview bias . ayo langsung aja lihat cara berikut :

  • Masuk Ke Rancangan > Edit Html > Expand Widget Template
  • Cari kode ]]></b:skin>  lalu letakkan kode berikut diatasnya


/* defaults required for IE */
a, a:visited, a:hover, a:active, a:focus {color:#000;}
#holder {position:relative; background:transparent url(http://i552.photobucket.com/albums/jj355/Maurice_Avrahm/masri.jpg) top left no-repeat;margin:5px; width:560px; height:293px;border:2px solid #fff;}
#scrollbox {padding:0; width:170px; height:287px; margin-top:3px;margin-right:3px;list-style:none;float:right;}
#judul {float:left;color:#999;margin-top:100px; width:200px;margin-left:100px;text-decoration:none;text-shadow:0 2px 0 0 #fff; font-family:"trebuchet ms", sans-serif; font-size:28px; text-align:center;}
#judul a:hover{color:silver;text-shadow:0 2px 0 0 #fff; font-family:"trebuchet ms", sans-serif; font-size:28px; text-align:center;}
#scrollbox li {float:left;}
#scrollbox a {display:block; color:#999; text-decoration:none; border:1px solid silver; width:165px; height:30px; float:left; padding:2px; font-family:"trebuchet ms", sans-serif; font-size:24px; text-align:center;}
#scrollbox a span {display:block; position:absolute; left:-9999px; top:0;}
#scrollbox a span img {border:0;}
#scrollbox a:hover {background:silver;border:1px solid yellow;}
#scrollbox a:hover span {width:380px; height:288px; margin-top:3px; left:3px; color:#000;z-index:100;}
#scrollbox a:active {border:0px solid #000;}
#scrollbox a:focus {border:0px solid #000; outline:0;}
* html #scrollbox a:active span {width:380px; height:270px; top:0; left:3px; color:#000; background:#fff; z-index:-1;}
#scrollbox a:focus span {width:380px; height:288px; margin-top:3px; left:3px; color:#000; background:#fff; z-index:10; outline:0;}


  • kemudian Save Template.
Langkah Selanjutnya adalah memasang widget Tabview di Sidebar :

Kemudian Save.

Jika anda ingin mengganti gambar a:hover menjadi tulisan, katakanlah seperti RSS blog anda, atau RSS dari Feed Burner, atau Daftar Link vertikal, bisa dikerjakan. Caranya gampang. Ganti saja gambar yang ada di list item (li). Tapi akan lebih indah jika foto tetap berada ditempat, sementara anda membuat keterangan link di bawahnya. Ini solusi lain yang lebih baik
Membuat Tab View Dengan Css Diblogspot

0 komentar:

Posting Komentar


Only CSS and Jquery Design by Insight © 2009

This template is brought to you by : allblogtools.com | Blogger Templates