Attractive Css3 Sleek Menu Bar For Blogger

bu menüler blogger için kullana bileceğiniz en iyi menüler diye bilirim çok şık bir css3 olarak hazırlanmıs bir menü  kodu kullana bilmeniz için html editörünü açıp ]]></b:skin> kodunu arattırıp hemen üstüne aşağıdaki kodu yapıştırınız..

 

/* The CSS Code for the menu starts here bloggertrix.com */
#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;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:40px;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[rel=sam1] li a{background:#606060;}
ul[rel=sam1] 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%);}

ve daha sonra HTML/Javascript gadget olarak ekliceğiniz kod aşağıdadır..

DEMO

<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://tolgagonul.net/">Home</a></li>
<li><a href="http://tolgagonul.net/">About</a></li>
<li><a href="http://tolgagonul.net/">Blog</a></li>
<li><a href="http://tolgagonul.net/">Services</a></li>
<li><a href="http://tolgagonul.net/">Support</a></li>
<li><a href="http://tolgagonul.net/">Sales</a></li>
<li><a href="http://tolgagonul.net/">Contacts</a></li>
</ul>
</div>

Continue Reading