Menu Navigasi. Dan kali ini saya masih akan mengajak anda untuk mempergunakan CSS3, Alasannya karena CSS3 tidak membutuhkan Image dan tidak mempengaruhi Load yang kadang tidak maksimal.Bentuk dari Slick Menu dapat anda lihat pada gambar diatas atau silahkan KLIK DISINI
Dan untuk Membuatnya, Silahkan:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
.wrapper {
width: 100%;
height: 80px;
background : #464646;
background :
-webkit-gradient(linear, left top, left bottom,
from(rgb(168,168,168)), to(rgb(69,69,69)));
background :
-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}
ul.menu li {
list-style: none;
float:left;
height: 79px;
text-align: center;
background:
-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90,
from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background:
-moz-radial-gradient(center 80px 45deg, circle cover,
rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background :
-webkit-gradient(linear, left top, left bottom,
from(rgb(168,168,168)), to(rgb(69,69,69)));
background :
-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background:
-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90,
from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background:
-moz-radial-gradient(center 80px 45deg,
circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
6. Beralihlah dan Cari kode <body>, dan letakkan HTML dibawah ini setelah Kode <body> tersebut atau tepat dibawahnya:
<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
7.Save Template anda, dan Lihat hasilnya...
0 Response to "Membuat Slick Menu With CSS3 Blogger"
Posting Komentar