Rabu, 07 September 2011

Cara membuat tab menu/ tab view Horizontal

cara membuat tab menu/ menu horizontal sebenarnya gampang, yang kita butuhkan hanya ketelitian...
Ok langsung aja....
1. masuk ke dashboard > Design/Rancangan > Klik Add a Gadget > Tambahkan HTML/Javascript
2. masukkan script berikut:
  
<style> #navcontainer { background: #190101; border-top: 5px solid #9CC; margin-top: 20px; font: normal normal 15px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 15px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #190101; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #190101; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #190101; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #190101; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="http://ryzasatya.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://www.blogger.com/profile/12856402913821952162"><span>My Profil</span></a></li>
<li><a href="http://facebook.com/riza.rizcky"><span>My Fb</span></a></li>
<li><a href="http://ryzasatya.blogspot.com/2011/08/postingan-pertama.html"><span>Artikel</span></a></li>
</ul>
</div>


3. klik save
Jadilah Menu Horizontal sob.....
Thank's

Artikel Terkait


Artikel Terkait


0 komentar:

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates