Space Impact

Make Vertical Navigation

Langkah-langkahnya:
1. Login ke Blogger.
2. Masuk ke Design => Page Elements => Add a Gadget => HTML/JavaScript.
3. Masukkan kode dibawah ini:
<style type="text/css">

/* vertikal vertikal merah di mulai
---------------------------------------- */

/*Credits: CSS Library */
/*URL: http://css-lybrary.blogspot.com */

#vertikal-merah{

border-bottom-width: 0;
}

#vertikal-merah ul{
margin: 0px;
padding:0px;
font: normal 100% 'georgia; /*pemilihan bentuk huruf */
}

#vertikal-merah a{
display: block;
padding: 4px;
padding-left: 10px;
border:1px solid #ccc;
-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: black;
border-top:1px solid #f3f3f3;
border-bottom:1px solid #f3f3f3;
border-right:1px solid #f3f3f3;
background-color: #fff;
border-left: 10px solid #ccc;
}

#vertikal-merah a:hover {
background-color: #f2f2f2;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:10px solid #ccc;
color: #cc0000;
}
</style>


<div id="vertikal-merah">
<ul>
<a href="http://blogcopypaste.blogspot.com/">Home Page</a>
<a href="http://blogcopypaste.blogspot.com/">Tutorial</a>
<a href="http://blogcopypaste.blogspot.com/">Tips</a>
<a href="http://masphecorel.blogspot.com/">Belajar CorelDRAW</a>
<a href="http://blogcopypaste.blogspot.com/">About</a>
<!-- untuk menambah link baru -->
</ul></div><p></p>
4. Save dan Lihat hasilnya. 

Reff: Modifikasi vertical menu

No comments:

Post a Comment