Advance CSS Menu For Blogger

We all know that CSS menus are in trend over blogger so i got this menu.....i found this menu in a blog but it was not working so i downloaded pics and put'em here and now it's working and still it's looking damn awesome......

• Go To Blogger > Template > Edit HTML

• Find ]]></b:skin>  and just above it paste the below CSS code

#wmenu {
 list-style: none;
 padding: 0;
 margin: 0;
 width: 774px;
 height: 58px;
 position: relative;
}
#wmenu span {
 display: none;
 position: absolute;
}
#wmenu a {
 display: block;
 text-indent: -900%;
 position: absolute;
 outline: none;
}
#wmenu a:hover {
 background-position: left bottom;
}
#wmenu a:hover span{
 display: block;
}
#wmenu .home {
 width: 144px;
 height: 58px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjaweIKRWqPhSBccL-yr9F_eV9McMhe7p_nV8pVBib5AnTqxOtlMc142whY9DlPBmMDtUucV-nkJUQo1qg5fmmr_G8ryWlxWgpGMT8TuG5XZpvqNCXNikwPHnh9ziT3Xf6VnFm4wGnqRU/s1600/home.gif) no-repeat;
 left: 96px;
 top: 20px;
}
#wmenu .home span {
 width: 86px;
 height: 14px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe_WnDelfanJpinTL6DRI-OPOCBFY6UDhD8aNTQYWRo4IKxbWJrJjXbeT_f7Cr0mMQvjG4_wr6tKGbhBC8L6UvUQ28XPc0B5MEjyqFGUHlHGCsmEZ6aYwHM3zLpfCTjEqRVgGj2ix2fU/s1600/home-over.gif) no-repeat;
 left: 28px;
 top: -20px;
}
#wmenu .about {
 width: 131px;
 height: 51px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNMjnZ2khwfg2uliW_vzzucxCH6vtJ7KWmQiP2_SUbj6oKTvc-6UReJYZKDOKakAZlTz5Wt0dZWBu3y28aLUdqrksy-VZhr6wKEdZCUI2_UcK97vPv4cgUla7r-Gjw-xcDwByUp0_v3Y/s1600/about.gif) no-repeat;
 left: 338px;
 top: 20px;
}
#wmenu .about span {
 width: 40px;
 height: 12px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCn41S-WDIbwc72E4GbUna_1dhNANOJbLxtyMMGqnsWB4BE59aIESKt_E_lAWxwVpy9y8b0N-g1koWuevBCJ4hy_de-_jAAQPm42QRVE_mckY-DWyUCJdluzHZaSyojFCGljuDnetvXY/s1600/about-over.gif) no-repeat;
 left: 44px;
 top: 54px;
}
#wmenu .rss {
 width: 112px;
 height: 47px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiInF3OvqjF7VyIb-8mAjw1v0NW_Ko42jMKpcHsZ93Fqshv7fBfEWXQV5u8CZWpN4G2rJbITe2d-gjlGK1VRvieE39pykRbQoVWkWd5xv_NaSLDsezgU4AGl5aSxOqewEB82O25dOnBX7Y/s1600/rss.gif) no-repeat;
 left: 588px;
 top: 20px;
}
#wmenu .rss span {
 width: 92px;
 height: 20px;
 background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkGF9_dVc0sj34HVDiRdwyRRGYnTUEXksE0GhzWGzoWqABQK_3-N36xRFGLXYTtAE-gCe4RFcVTIMuk3PbbpgX-4iQ11gpVwytREpC4zDvn65nO0jk-DJhJbHbIrpIQRp9cWy3mtuIC8A/s1600/rss-over.gif) no-repeat;
 left: 26px;
 top: -20px;
}

• Save Template 

•  Go to blogger  >  Layour > Add a gadget  > HTML/JavaScript and place the HTML below and click save.

<ul  id="wmenu">
<li><a href="#" class="home">Home <span></span>
</a></li>  <li><a href="#" class="about">About <span></span>
</a></li>  <li><a href="#" class="rss">RSS <span></span></a>
</li></ul>

• Replace  # with your links....

If any widget/tutorial of this blog is not working then please let me know by commenting..........

Stylish Round Cornered CSS Menu For Blogger

Go To Blog > Layout > Add A Gadget > HTML/Java Script > Paste The Script From Below On It

<style type="text/css">
#menu-bar {
  margin: 0px 0px 0px 0px;
  padding: 8px 4px 1px 6px;
  height: 32px;
  line-height: 100%;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #E67074;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A6A6, endColorstr=#7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A6A6), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A6A6,  #7A7A7A);
  border: solid 0px #6D6D6D;
}
#menu-bar li {
  margin: 0px 6px 0px 6px;
  padding: 0px 0px 6px 0px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 13px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 9px 20px 8px 20px;
  margin: 0;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  text-shadow: 2px 2px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
  background: #0399D4;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 1px 2px 21px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #0399D4 !important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}
</style>




<ul id="menu-bar">
 <li class="current"><a href="#">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Products Sub Menu 1</a></li>
   <li><a href="#">Products Sub Menu 2</a></li>
   <li><a href="#">Products Sub Menu 3</a></li>
   <li><a href="#">Products Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="http://widcraft.blogspot.com">Get This</a></li>
</ul>

Change # with page/post url and names with custom names.....Thats It.....Leave Questions And Requests Below :D

Stylish CSS Menu For Blogger

Go To Blog > Layout > Add A Gadget > HTML/Java Script > Paste The Script From Below On It

**Note : Due to some errors we removed search bar thanks :D**

<style type="text/css">
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/
/*BELOW 4 LINES add rounded bottom corners to each menu item.
  ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
  REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 1px solid gray;
}
#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}
</style>
<div class="invertedshiftdown">
<ul>
<li class="current"><a href="#" title="Home">Home</a></li>
<li><a href="#" title="New">New</a></li>
<li><a href="#" title="Revised">Revised</a></li>
<li><a href="#" title="Tools">Tools</a></li>
<li><a href="#" title="CSS">CSS</a></li>
<li><a href="http://www.widcraft.blogspot.com.com/forums/" title="WidCraft">Get This</a></li>
</ul>          
                                       
</div>
<br style="clear: both;" />

Change # with page/post url and names with custom names.....Thats It.....Leave Questions And Requests Below :D

Awesome CSS And jQuery Fixed Fade Out Menu For Blogger

The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

Click Here To View Demo

• Go To Blogger Dashboard > Design > Edit HTML

• Search for the tag </head>

• And paste the code above it.....

<link rel="stylesheet" href="https://sites.google.com/site/widgetcraftfiles/home/hb-fadeout.css"/>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else  
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>

• Now search for the <body>

• Just below it paste the following code.

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li class="search">
<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>      
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

• Now replace Your Link Here with the link which you want to add to a text.

• And replace Text Here with the text which you want to appear on fade out menu.

CSS3 Multi Level Drop Down Menu For Blogger

Adding beautiful drop down menu helps to increase the beauty of your blog.By adding the drop down menu your readers or visitors can easily navigate through your blog.This amazing menu is designed by Catlin Rosu.And hey main part is that It doesn’t needs Any jQuery or JavaScript. It uses no images at all and loads extremely fast.It is compatible with all major browsers like FireFox, Chrome and Safari.I have kept the installation extremely easy.

• Go to your blog > Layout > Add A Gadget > HTML/Java Script and paste the code 

<style>
/*------ Drop Down Menu By WC (widcraft.blogspot.com)---------*/
#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#hb-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#hb-menu:before,
#hb-menu:after {
content: '';
display: table;
}
#hb-menu:after {
clear: both;
}
#hb-menu {
zoom:1;
}
#hb-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#hb-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#hb-menu li:hover > a {
color: #fafafa;
}
*html #hb-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#hb-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#hb-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#hb-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#hb-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#hb-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#hb-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#hb-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#hb-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#hb-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#hb-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#hb-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#hb-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#hb-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id='hb-menu'>
<li><a href='#'>Home</a></li>
<li>
<a href='#'>Categories</a>
<ul>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Graphic design</a></li>
<li><a href='#'>Development tools</a></li>
<li><a href='#'>Web design</a></li>
</ul>
</li>
<li><a href='#'>Work</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='http://www.widcraft.blogspot.com/'>Create This »</a></li>
</ul>

After adding it.....edit the widget and replace # with your respective links and other with your Page Title.

If you need help about setting up this widget feel free to ask me.I'll glad to help you.....