Wednesday, December 2, 2009

Add Menu Bar To Blogger Blog

14 comments  


I was able to add a nice multilevel dropdown menu to my blog. In this post I’m going to discuss how you also can add it to your blogger blog. Here I’m using pure CSS multilevel menu generated by Free CSS Drop Down Menu Generator.



You can’t use the code directly in blogger without some modifications; I’ll describe how you can edit the code to use it in blogger to get a menu bar like above picture (Figure 1).

Create the Menu

First get the following code and save it as .html file. Then edit the styles and links as you want. If you like this style, you only need add links for menus and sub menus.

Note : If you use the above mentioned Menu Generator in the HTML code you must replace "<![if gt IE 6]></a><![endif]>" using "<!--[if gt IE 6]><!--></a><!--<![endif]-->", otherwise it will not work in the Blogger.

View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul{
 margin:0px;
 list-style:none;
 padding:0px 2px 2px 0px;
 background-color:#d8d8d8;}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
 display:block;
 zoom:1;
 float: left;}
ul.cssMenu ul{
 border-left:2px solid #444444;
 border-bottom:1px solid #444444;
 border-right:1px solid #444444;
 border-top:0px;
 z-index:9999;}
ul.cssMenu li{
 display:block;
 margin:2px 0px 0px 2px;
 font-size:0px;}
ul.cssMenu a:active, ul.cssMenu a:focus {outline-style:none;}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
 display:block;
 vertical-align:middle;
 background-color:#d8d8d8;
 text-align:left;
 text-decoration:none;
 padding:4px;
 _padding-left:0;
 font:normal 11px Verdana;
 color: #444444;
 text-decoration:none;
 cursor:default;}
ul.cssMenu span{
 overflow:hidden;
 font-weight:bold;
 background-position:right center;
 background-repeat: no-repeat;
 padding-right:11px;}
ul.cssMenu li {    float:left;}
ul.cssMenu ul li {float:none;}
ul.cssMenu ul a {
 text-align:left;
 white-space:nowrap;}
ul.cssMenu li.sep{
 text-align:center;
 padding:0px;
 line-height:0;
 height:100%;}
ul.cssMenu li.sep span{
 float:none;    
 padding-right:0;
 width:5;
 height:16;
 display:inline-block;
 background-color:#AAAAAA;    
 background-image:none;}
ul.cssMenu ul li.sep span{width:80%;height:3;}
ul.cssMenu li:hover{position:relative;}
ul.cssMenu li:hover>a{
 background-color:#eeeeee;
 font:normal 11px Verdana;
 color: #000000;
 text-decoration:none;}
ul.cssMenu li a:hover{
 position:relative;
 background-color:#eeeeee;
 font:normal 11px Verdana;
 color: #000000;
 text-decoration:none;}
ul.cssMenu li.dis a {color: #AAAAAA !important;}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;height:16px;}
ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}
ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}
</style>
</head>
<body>
<ul class="cssMenu">
 <li><a href="#" title="test title"><span>SEO</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul>
   <li><a href="#" title="test title">Your Site in Google</a></li>
   <li><a href="#" title="test title">Selecting Good Title</a></li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
 <li><a href="#" title="test title"><span>Blogger Tips</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="cssMenum">
   <li><a href="#" title="test title">Expandable Blogger Posts</a></li>
   <li><a href="#" title="test title">Blogger Title Tip</a></li>
   <li><a href="#" title="test title">Adding META Tags</a></li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
 <li><a href="#" title="test title"><span>SharePoint</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul class="cssMenum">
   <li><a href="#" title="test title">What is SharePoint</a></li>
   <li><a href="#" title="test title"><span>Create Custom Features</span><!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="cssMenum">
     <li><a href="#" title="test title">Removing Features</a></li>
    </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li><a href="#" title="test title">CAML in SharePoint</a></li>
   <li><a href="#" title="test title">User Groups</a></li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
</body>
</html>

Add Menu to Blog

1. Now you have to edit the HTML in your blogger template. To do that first go to "Edit HTML" (Figure 2). (Before editing your template, download the full template)



Find "b:section class='header'" and set the value of "maxwidgets" to 3, if it is less than it (Figure 2). Set "showaddelement" to "true",

2. Then Find the </head> tag in your template and paste the styles just before that tag. Make sure you should include <style type="text/css"> and </style> tags.

3. Now you can add new "HTML/JavaScript" Gadget to your blogger header and paste the code between <body> and </body> from the .html file you created using my code given in the top of this post (Figure 3). There do not give a Title for the Gadget.



Now every thing is ok and view your blog to see the new Gadget.

14 comments:

  1. MadhukaDecember 3, 2009 at 5:04 PM

    Super Work machn!!!!
    tell the secreat oF SEO
    heeeeee....

    Keepp it Up machnnn!!

    ReplyDelete
  2. Saranga RathnayakeDecember 3, 2009 at 6:28 PM

    Thanks machan !
    My Secreat oF SEO
    he hee...

    ReplyDelete
  3. BragBoyFebruary 10, 2010 at 10:56 PM

    Hey!!!
    I benefited from your post!!
    Thanks a million

    http://technicalytpo.blogspot.com

    One help needed. If you please take a look at the above web page, the links look a bit odd, is there a way to make them proper. Your tips are very much appreciated!!!

    ReplyDelete
  4. Saranga RathnayakeFebruary 10, 2010 at 11:25 PM

    Hi Bragadeesh,
    I think you have use the code generated by Free CSS Drop Down Menu Generator. It cannot directly use, because it causes some problems in some browsers.
    Please use given code and change the styles and links as you want. If you can tell the extract requirement I can easily help you.
    Thanks !

    ReplyDelete
  5. Greg CohenMarch 9, 2010 at 9:05 PM

    Is there any way to center this bar and make the bar extend the whole way across the site?

    ReplyDelete
  6. Saranga RathnayakeMarch 18, 2010 at 1:31 AM

    @ Greg Cohen,
    Yes, you have to change the CSS. Try this,
    1. First create separate div with id=menu and put the html code.
    <div id="menu">
    <div id="menu_center">
    <ul class="cssMenu">
    ...
    ...
    </ul>
    </div>
    </div>

    2. Then add these lines to CSS,
    #menu{
    float:left;
    width:100%;
    background-color:#d8d8d8;
    }
    #menu_center{
    width:400px;
    margin-left:200px;
    }
    thanks,
    Saranga Rathnayake

    ReplyDelete
  7. Amy SheetsMarch 25, 2010 at 3:00 AM

    I cant get the generator to load!!! Is there somereason why? or another way to get the menu bar??

    ReplyDelete
  8. Saranga RathnayakeMarch 26, 2010 at 2:08 PM

    @ Amy Nicole,
    Please check whether JavaScript is enabled in your browser.
    Try to use my code by clicking on (View Code) if you are unable to use CSS Drop Down Menu Generator. There the only thing you want to do is change the links.
    thanks,
    Saranga Rathnayake.

    ReplyDelete
  9. Guadalupe VargasNovember 17, 2010 at 5:55 AM

    thank you so much for this!!! It truly helped me! By any chance, do you know how to make the Drop Down widget be placed in the middle? It appears on the top of my page. Also, if it's not too much trouble, can you tell us how to add data/links to the Drop Down widget? I'd like to continue adding more things there without having to do this process all over again. Thank you once again!

    ReplyDelete
  10. welcomeJune 5, 2011 at 9:43 AM

    thankss yaar.. main is multilevel menu ko bahut buri tarah dhoondh raha tha .. & finaly i got it ...
    thanks dude....
    i found your blog through this
    http://www.allblogtools.com/tricks-and-hacks/how-to-add-top-navigation-menu-bar-to-blogger-blogspot/
    """Saranga
    06/05/2010 at 11:23 PM
    I was able to add a nice multilevel dropdown menu to my blog. You can try that.
    Hope this will help you.""""

    ReplyDelete
  11. Saranga RathnayakeJune 5, 2011 at 2:55 PM

    @ The D2,
    I'm happy to hear that, thanks for your comment.

    ReplyDelete
  12. iaaazJune 28, 2011 at 3:21 AM

    am trying to get this done but still unable, how can i do it with my labels at my blog at www.iaaaz.com.

    ReplyDelete
  13. Saranga RathnayakeJune 28, 2011 at 10:14 PM

    @ iaaaz,
    You have to create the menu manyally, If you want to ass menu for Labels, then you have to code the links as given code and add as new "HTML/JavaScript" Gadget.

    ReplyDelete
  14. Exposing solutions to real problemsSeptember 23, 2012 at 12:55 PM

    Dear Saranga - Thanks for the detailed information. I tried following the above steps but my navigation bar is invisible though it is there on the blog. Please check and let me know what is the issue. http://exposingsolutions.blogspot.com

    ReplyDelete