Sabtu, 05 Maret 2011

Membuat Menu Tab View

Menu tab view sangatlah bermanfaat bagi sobat bloger yang memiliki banyak konten ataupun artikel, karena dengan menu ini link_link ("dibaca lingling") dapat terkordinir dengan rapi.
ok, lngsung aja kita praktek ah,,, kebanyakan teori bikin puyeng__

Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>

ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}

ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0 0.3em 0 0;width:9em;}

ul#main-nav li a {text-decoration:none;display:block;padding:0.3em 0.5em;border:1px solid silver;color:#003;background:#fff;}

ul#main-nav li a:hover, ul#main-nav li a:focus {border:1px solid gray;color:#000;background:#efefef;}

ul#main-nav li ul {padding:0;display:none;}

ul#main-nav li:hover ul {display:block;}

ul#main-nav li ul li {float:none;}

ul#main-nav li ul li a {font-size:0.9em;}

4. Kemudian "Di save"
5. Lalu pergi ke menu "Page Elements"
6. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan lo letakkan Menu Tab View ini.
7. Inilah script yg harus lo pasang :

<ul id="main-nav">
<li><a href="#" title="#">HOME</a>
<ul>
<li><a href="#">BLOG</a></li>
<li><a href="#">FACEBOOK</a></li>
</ul>
</li>

<li><a href="#" >SOFTWARE</a>
<ul>
<li><a href="#">ANTIVIRUS</a></li>
<li><a href="#">MESSAGING AND CHAT</a></li>
<li><a href="#">BROWSER DAN PLUG IN</a></li>
<li><a href="#">AUDIO VIDEO</a></li>
<li><a href="#">SOFTWARE LAINNYA</a></li>
</ul>
</li>

<li><a href="#" >TIPS N TRIK</a></li>
</ul>

8. Selesai.

0 komentar:

Posting Komentar