Skip to main content

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

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

Post a Comment

Popular posts from this blog

How to add a calendar icon as date header

From this tutorial, you will be able to add your very own calendar icon to your blogger! If you’re going to show the date on every post, why not do it with a little style and make it a little more appealing to viewers? If you want your calendar icon to appear on every post, read Blogspot Vision’s post on how to do that by clicking here to go to the post. Let’s get started but first and foremost, make sure you back-up your existing template, just in case it doesn’t turn out as expected. Steps to follow:1. Login to your Blogger dashboard2. Go to Layout > Edit HTML (Click on “expand widgets” box)3. Search for the following section code: ]]></b:skin>
and add the following section code below right before it:.post .date {
    height: 50px;
    width: 45px;
    background: url(http://www.blogspotvision.com/bspotvision/itheme-calendar.gif) no-repeat;
    font: normal 22px Arial;
    color: #666666;
    text-align: center;
    …

CSS DIV boxes with drop shadows

This example shows how to add a drop shadow style to any container element using CSS. It does this by wrapping the desired content in a DIV with its background color set to a color of the desired color for the shadow. Another DIV is set for your content and is shifted slightly upwards and to the left to expose the shadow. The "master" DIV wraps it all up but is shifted to the right and downwards, returning the entire markup to it's original page position.

IE6 is not compatible with this example, but you can apply conditional HTML to hide the effect in that browser. In contrast, IE7 is compatible with this example for finally updating to proper CSS.

Note: If you will be using an image for your content, you should give ".shadowcontainer" an explicit height, reflecting that of the image's for fixed and set location when viewed.



CSS Code
<![if !IE 6]>
.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px;…

How To Show The Post Date On Every Post

From this tutorial, you will be able to show the post date on every last one of your posts. As we all know, Blogger’s default templates only show a single date for every post that was posted that day. Some readers will find it convenient to have that quick glance at the date on each post, but some will not even notice. This tutorial is definitely handy if you plan to use a calendar icon as your post date, since the timestamp can be modified. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.

Steps to follow:
1.Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Now search for the red line of code or similar code:Note: If you can’t seem to find the line in red, try the second section code in blue.<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<da…