Home » » Simple Menu dengan Efek Blur

Simple Menu dengan Efek Blur

Written By Banu Surya on Rabu, 12 September 2012 | 13.20



Modifikasi ini memang merupakan sesuatu yang sangat sederhana, namun Saya rasa cukup efektif untuk menciptakan efek blur pada menu di bawah Navabar



Untuk menggunakan Navbar ini,pertama buka blogger => rancangan => edit HTML lalu masukan css dibawah ini diatas kode ]]></b:skin>
#nav { float:left; width:100%; overflow:hidden; background: -moz-linear-gradient(top, #25272C 0%, black 99%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));} #nav li{ float:left; display:inline; list-style:none; line-height:13px; margin-right:1px; color:#ddd;} #nav ul:hover, #nav li a {color: transparent;text-shadow: 0px 0px 3px white;} #nav li a:hover, #nav li a.selected{ color:#fff;} #nav li a { float:left; font-size:16px; font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif; text-decoration:none; text-shadow: 0px 0px 1px white; padding:15px 15px 25px 15px; -webkit-transition: all 0.5s ease-in-out;} #nav li a span{ font-size:11px; letter-spacing:2px; font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif; text-shadow: 0px 0px 2px white; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} #nav li a:hover span, #nav li a.selected span{ color:#9E1C16; text-shadow: 0px 0px 2px #9E1C16;}


Kemudian masukan kode html dibawah ini,di ADD gatget >> HTML/JavaScript





merah ganti dengan Link kalian
hijau ganti dengan isi menua atau tulisan kalian

perhatikan tataletak HTML nya bisa lihat pada gambar di bawah


SUMBER ARTIKEL GUEH GALAU
Share this article :

0 komentar:

Posting Komentar

 
Support : Contact on FB | Contact On Twitter
Copyright © 2013. Banu Surya - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger