How to Add Attractive Css3 Sleek Menu Bar For Blogger

     How to Add Attractive Css3 Sleek Menu Bar For Blogger

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

AND

Step 4: Now Go to Template > Edit HTML (Before editing template It is always recommended that you Back it up first). Now search for the following code (Ctrl+F)

]]></b:skin>

       Now paste below code just above/before ]]></b:skin> code.

                                                  /* The CSS Code for the menu starts here supertrick4blog.blogspot.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%);} ]]></b:skin>

: Now Save Template. 


. Go to blogger and click Layout

. Click on Add Gadget and select 'HTML/Javascript widget

. Paste below code.

<div id="container1"> <ul class="menu33" 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="#">Support</a></li> <li><a href="#">Sales</a></li> <li><a href="http://supertrick4blog.blogspot.com/">Contacts</a></li> </ul> </div>

but Any Problem Comes, Ask in Comments