Membuat Menu Tombol Menggunakan CSS3

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :

#bgmenu {
width:100%;
height:30px;
}
#menu a {
font:12px verdana;
font-weight:bold;
color:#000;
text-shadow:0px 2px 3px #fff;
text-decoration:none;
}
#menu a:hover {
color:#fff;
text-shadow:0px 2px 3px #000;
text-decoration:none;
}
#menu li {
margin-right:10px;
float: left;
list-style: none;
}
.abu{
text-align:center;
background:-moz-linear-gradient(top,  #999 , #666 );
width:80px;
padding:5px;
margin-bottom:10px;
-moz-border-radius:50px;
-moz-box-shadow:0px 5px 8px grey;
border:1px solid #0F0;
}
.kilau {
background:#fff ;
height:5px;
margin:-5px 0px 15px 0px;
padding:5px 5px 5px 5px;
color:000;
-moz-border-radius:20px;
-moz-box-shadow:0px 2px 6px #999;
opacity:0.6;
}
.text {
margin-top:-25px;
color:#000;
font:14px trebuchet ms;
font-weight:bold;
opacity:0.9;
}

8. Untuk selanjutnya Kemudian cari kode </head> , dan taruh kode di bawah ini setelah kode tersebut

<div id="bgmenu">
<ul id="menu">
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 1</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 2</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 3</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 4</a></div></div></li>
<li><div class="abu"><div class="kilau"></div><div class="text">
<a href="#">Menu 5</a></div></div></li>
</ul></div>

NB : yang berwarna biru (#, menu 1)silahkan anda isi dengan alamat situs yang diinginkan dan juga Nama  menunya.

9. Save

Related Post