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

Labels: , ,

17 Comments:

Anonymous eva said...

Nice easy to follow tutorial.Thanks

December 02, 2009  
Anonymous eva said...

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

December 02, 2009  
Blogger Blogspot Vision said...

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

December 03, 2009  
Anonymous Poras said...

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.

December 03, 2009  
Blogger Blogspot Vision said...

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

**replace [ and ] with < and >

December 08, 2009  
Blogger Chantel said...

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?

May 10, 2010  
Blogger Phillip said...

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

May 11, 2010  
Blogger Phillip said...

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

May 11, 2010  
Blogger Phillip said...

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

May 11, 2010  
Blogger Chantel said...

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

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

May 11, 2010  
Blogger Chantel said...

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

May 11, 2010  
Blogger Phillip said...

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 < >

May 11, 2010  
Blogger Chantel said...

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!

May 11, 2010  
Blogger 7ths said...

your demo doesn't work?

the menu wouldn't drop down to subfolder.

i am using chrome

September 20, 2010  
Blogger Sydney J said...

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

February 08, 2011  
Blogger Phillip said...

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.

February 10, 2011  
Anonymous Socialfactory said...

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

April 13, 2011  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home