Membuat Menu Vertikal CSS3 di Blog

Nadia Naila

Friday, 25 February 2011

 
Salam persahabatan, tik blogger akan memberikan cara membuat  menu vertical yang menggunakan CSS3 tanpa java script dan sekarang kita mencoba menu vertikal dengan css3 tanpa javascript yang pastinya tak kalah menarik.


Mari kita ikuti langkah-langkah membuat tab menu vertical dengan menggunakan CSS3

1.    Masuk ke Blogger dengan akun sobat

2.    Pilih Design >> Edit HTML

3.    Cari kode ]]></b:skin>

/*****Menu Vertical css3 Trik Blogger*****/
.navbox {
position: relative;
float: left;
}

ul.nav {
list-style: none;
display: block;
width: 220px;
position: relative;
top: 0px;
left: 0px;
padding: 0px 0 0px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkHHlxrzSOYQalg68EoaERbBKOaM6O_dCe8xM-4GUM02ghfQU6Gteyg6Tyx1ECyYRGraCfp3fdmRCzhCPxqvxpIJL7y2f_SVDzzse-6xsGKu8_gnbMr_szUqtRP4PfffDZjdBV0_VkiNw/s320/shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
}

li {
margin: 5px 0 0 0;
}

ul.nav li a {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
background: #cfe2f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcddUVti0GjE5_DW2nlfcdHjRf135yeN972CzdcfJsdH3yfXeia-Ljk5UkmCg4UMUfOCKfTRiqByr5PUqOeQXhj28bMc5GgJ2Or_GqsY543ant6HUnAMgk51IwnphEbP0oJa53T8DxzU/s320/batas.png) no-repeat;
color: #cc0000;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;

width: 110px;
display: block;
text-decoration: none;
-webkit-box-shadow: 4px 2px 4px #888;
-moz-box-shadow: 4px 2px 4px #888;
}

ul.nav li a:hover {
background: #cc0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcddUVti0GjE5_DW2nlfcdHjRf135yeN972CzdcfJsdH3yfXeia-Ljk5UkmCg4UMUfOCKfTRiqByr5PUqOeQXhj28bMc5GgJ2Or_GqsY543ant6HUnAMgk51IwnphEbP0oJa53T8DxzU/s320/batas.png) no-repeat;
color: black;
padding: 7px 15px 7px 30px;
}

4.    Save template sobat

5.    Setelah itu masuk ke element laman dan klik add gadget kemudian pilih html/java script

6.    Pastekan kode di bawah

<div class="navbox">
<ul class="nav">
<li><a href="http://trik-blogger-andreas.blogspot.com/search/label/Tutorial%20Blogger?max-results=5">Tutorial Blogger</a></li>
<li><a href="masukan link">kategory 2</a></li>
<li><a href="masukan link">kategory 3</a></li>
<li><a href="masukan link">kategory 4</a></li>
<li><a href="masukan link">kategory 5</a></li>
<li><a href="masukan link">kategory 6</a></li>
<li><a href="masukan link">kategory 7</a></li>
<li><a href="masukan link">kategory 8</a></li>
<li><a href="masukan link">kategory 9</a></li>
</ul>

</div>

7.    Simpan gadget sobat dan lihat hasilnya.

semoga berhasil

Tag : Tutorial