Monday, October 26, 2009

How to add a multi-level navigation bar to your Blogger

ddmenu From this tutorial, you will be able to add a multi-level navigation bar to the header of your Blogger powered blog. The entire interface is rendered in plain HTML, enabling this script to be easily customized to fit your Blogger template and allow all of its content to be search engine friendly. You can also set which tab you want to be selected by default when the page loads (ie. 1st, 2nd, 3rd tab, etc.), or have the script automatically select a tab based on a match between the current page’s URL and one of the menu tabs’. If there is a match then that tab will be selected. Before attempting this tutorial, make sure you back up your current template in case it doesn’t turn out as expected.

Click here to see the demo page

Steps to follow:

1. Login to your Blogger Dashboard and select the Layout tab > Edit HTML (do not click on “Expand Widget Template”)

2. Hold CTRL+F and find the following section code:

<div id='main-wrapper'>
3. Once you’ve located this code, right underneath it should have the following section code:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
4. You will need to modify the showaddelement to “yes” and the locked to “true”, so it will look like this:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
5. Once you’ve modified your section code, hold CTRL+F and locate the following section code: ]]></b:skin>

6. Paste the following section code right underneath it:
<script src='http://www.blogspotvision.com/bspotvision/dropdowntabs/dropdowntabfiles/dropdowntabs.js' type='text/javascript'>

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
7. Next, you will need to paste the following section code right above: ]]></b:skin>
/* Drop Down Navigation
----------------------------------------------- */
.bluetabs{
border-bottom: 1px solid gray;
}
.bluetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.bluetabs li{
display: inline;
margin: 0;
}
.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(media/bluetab.gif) top left repeat-x; /*THEME CHANGE HERE*/
}
.bluetabs li a:visited{
color: #2d2b2b;
}
.bluetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.bluetabs li.selected{
}
.bluetabs li.selected a{ /*selected main tab style */
background-image: url(media/bluetabactive.gif); /*THEME CHANGE HERE*/
border-bottom-color: white;
}
.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

/* ######### Style for Drop Down Menu ######### */
.dropmenudiv_b{
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: black;
}
* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #edf3f3;
}
8. Before you save your template, preview it first to see if all section codes have been properly applied. If you can preview your blog, your codes have been properly applied, if you can’t, your codes are not properly applied.

9. Once you’re able to preview it, Save Template and switch over to Page Elements, under the Layout tab of your Blogger’s Dashboard. You should be able to see “Add a Gadget” under your header now.

10. Click “Add a Gadget” and select HTML and paste the following section code in the box:
<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="http://www.blogspotvision.com">Home</a></li>
<li><a href="http://www.blogspotvision.com" rel="dropmenu1_b">CSS</a></li>
<li><a href="http://www.blogspotvision.com" rel="dropmenu2_b">Partners</a></li>
<li><a href="http://www.blogspotvision.com">Tools</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1_b" class="dropmenudiv_b">
<a href="http://www.blogspotvision.com">Horizontal CSS Menus</a>
<a href="http://www.blogspotvision.com">Vertical CSS Menus</a>
<a href="http://www.blogspotvision.com">Image CSS</a>
<a href="http://www.blogspotvision.com">Form CSS</a>
<a href="http://www.blogspotvision.com">DIVs and containers</a>
<a href="http://www.blogspotvision.com">Links and Buttons</a>
<a href="http://www.blogspotvision.com">Other</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu2_b" style="width: 150px;" class="dropmenudiv_b">
<a href="http://www.blogspotvision.com">CSS Drive</a>
<a href="http://www.blogspotvision.com">JavaScript Kit</a>
<a href="http://www.blogspotvision.com">Coding Forums</a>
<a href="http://www.blogspotvision.com">JavaScript Reference</a>
</div> <script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu")
</script>

11. Click “Save” and your template should now have Drop Down Menus.

*Tutorial Completed

17 comments:

  1. Nice easy to follow tutorial.Thanks

    ReplyDelete
  2. Sorry don't know what happened to my name above.

    ReplyDelete
  3. @eve it's my pleasure, im glad you found this useful for your blog and were able to apply it

    ReplyDelete
  4. Hi admin

    First Of All I Will Like To Thank You For Providing Such A Good Tutorial.

    I Have Added This Menu On My Blog,There Is one Question that
    How To Increase Tabs?
    They Is Only 4 Tabs,I Tried To Increase It But Doesn't Worked.Plz Tell Me How To Do It.

    ReplyDelete
  5. Hey, all you have to do is add another [li]content go here[/li]

    **replace [ and ] with < and >

    ReplyDelete
  6. thanks for the help! i have the menu showing, but the drop-down tabs are not appearing when i hover over it...am i doing something wrong?

    ReplyDelete
  7. hey, whats up chantel. whats your blog url so i can check it out for you. i believe you might've forgotten the javascript.

    ReplyDelete
  8. actually i just checked the script's link and its broken, ima go ahead and re-upload it for you.

    ReplyDelete
  9. here's the new script link:

    http://blogspotvision.com/scripts/dropdowntabs.js

    so just replace the old with the new one above and you should be good to go

    ReplyDelete
  10. here is my blog url:
    http://chantelmariephotography.blogspot.com/

    ok ill try it with the new script. thanks so much ilove this tutorial!

    ReplyDelete
  11. ok so where do i paste the new script link? above the skin code?, below it??

    ReplyDelete
  12. you actually replace the new link with this code -

    [script src='http://www.blogspotvision.com/bspotvision/dropdowntabs/dropdowntabfiles/dropdowntabs.js' type='text/javascript']

    for ex.

    [script src='NEW-LINK-HERE' type='text/javascript']

    *** replace [ ] with < >

    ReplyDelete
  13. ok, im sorry, im just not understanding ha sorry im just so confused now...whats the new link? where exactly do i replace it? sorry can you give me a little step by step. thanks so much!

    ReplyDelete
  14. your demo doesn't work?

    the menu wouldn't drop down to subfolder.

    i am using chrome

    ReplyDelete
  15. My drop-down tabs aren't working either. My blog's site is http://misssydneyj.blogspot.com

    ReplyDelete
  16. sorry guys, i just checked it and my demo doesnt work anymore. lemme do another post with a demo that actually works.. ill send you guys an email for the post update, just make sure u subscribe to this blog's feed. :] thanks.

    ReplyDelete
  17. I've tried centering the whole navigation but since it's using the "float: left" I can't. Any suggestions?

    ReplyDelete