First of all Blogger is still under maintenance so if you bought a domain then you have to wait more time to change it.Well maybe Blogger is doing some major changes , whatever we'll talk about it later.
This menu so beautiful and you can also customize it. It's a jquery based menu and i don't think now i have to explain power of jquery because you can experience it in my last posts which was about a Lightbox created by me so it's get started with this menu...
Installing :
- Go To Blogger > Template > Edit HTML > Search for </head>
- Just above </head> paste following script :
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/DynamicMenu.js"></script>
- Now just above </body> add following script :
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide" });
});
</script>
- Now search for ]]></b:skin> and just above it paste following css :
.webwidget_menu_glide{
padding: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
border-radius-topright: 10px;
border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
border-radius-bottomright: 10px;
border-radius-bottomleft: 10px;
border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
width: 100px;
height: 20px;
background-color: fuchsia;
position: absolute;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
border-radius-topright: 10px;
border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
border-radius-bottomright: 10px;
border-radius-bottomleft: 10px;
border-radius:10px;
}
.webwidget_menu_glide ul{
padding: 0px;
margin: 0px;
font-family:Arial;
}
.webwidget_menu_glide ul li{
float: left;
list-style: none;
position: relative;
text-align: center;
margin-right: 10px;
width: 100px;
}
.webwidget_menu_glide ul li a{
color: black;
text-decoration: none;
font-weight: bold;
}
.webwidget_menu_glide ul li ul{
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-khtml-border-radius-bottomright: 7px;
-khtml-border-radius-bottomleft: 7px;
border-radius-bottomright: 7px;
border-radius-bottomleft: 7px;
border-radius:7px;
padding-bottom: 5px;
position: absolute;
z-index: 999999;
display: none;
}
.webwidget_menu_glide ul li ul li{
-moz-border-radius-topright: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-khtml-border-radius-topright: 0px;
-khtml-border-radius-topleft: 0px;
border-radius-topright: 0px;
border-radius-topleft: 0px;
border-radius:0px;
margin: 0px;
float: none;
border:none;
word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
padding-left: 5px;
padding-right: 5px;
font-weight: normal;
}
- Save your template.
Well it was a bit long but this menu really worst it....now time to it on your layout :
- Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :
<div id="webwidget_menu_glide" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href=" # ">News</a></li>
<li><a href=" # ">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href=" # ">More...</a></li>
</ul>
<div style="clear: both"></div>
</div>
Done.....
Customizing :
You can full customize this menu by editing the script we added above </body> tag.....Below are the fields you can customize marked in large text
<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide" });
});
</script>
