[Awesome] Add Dropdown Menus to Blogger Navbar

Blogger is very popular CMS to create free blogs. There are lots of templates available to make your blog awesome.

You can check out – Premium Looking FREE blogger templates

So, here I’m going to show,  how you can add dropdown menus to blogger blog.

add drop down menu to blogger blog-min

Just follow these steps-

Step 1: Login to your Blogger Dashboard.

Login to your blogger account using email and password.

Step 2: Go to Layout Section

Open layout section through Layout link of sidebar

layout and add widget in blogger-min

Step 3:  Add Gadget from Column or Cross-column

Choose HTML/Javascript Gadget

Step 4:  Insert Following HTML code.

Insert the following code to HTML/javascript widget and Save it.

Note: Add your links to this code before paste it.

edit html javascript in blogger-min

<div id=’blogger-navbar’>
<ul id=’blogger-menu’>
<li>
<a href=’#’>Home</a>
</li>

<li>
<a href=’#’>MenuItem 1</a>
<ul>
<li><a href=’#’>SubMenuItem 1.1</a></li>
<li><a href=’#’>SubMenuItem 1.2</a></li>
<li><a href=’#’>SubMenuItem 1.3</a></li>
</ul>
</li>

<li>
<a href=’#’>MenuItem2</a>
<ul>
<li><a href=’#’>SubMenuItem 2.1</a></li>
<li><a href=’#’>SubMenuItem 2.2</a></li>
<li><a href=’#’>SubMenuItem 2.3</a></li>
</ul>
</li>
<li>
<a href=’#’>MenuItem3</a>
</li>
<li>
<a href=’#’>MenuItem4</a>
</li>

<li>
<a href=’#’>MenuItem5</a>
</li>

</ul>
</div>


Step 5 – Go to template and click on edit button

just do it !

edit template in blogger-min

Step 6 – Find place to paste CSS code

Just press ” Ctrl + F ” and paste  ]]></b:skin>

edit template in blogger blog-min

above this end tag paste following CSS code


/*——– Start Drop down Menu CSS——-*/

#blogger-navbar{
background-color: #336699;
width: 840px;
color: #336699;
margin: 0px;
padding: 0;
position: relative;
border-top:2px solid #336699;
height:35px;
}

#blogger-menu{
margin: 0;
padding: 0;
}

#blogger-menu ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#blogger-menu li {
list-style: none;
margin: 0;
padding: 0;

height:35px;
}
#blogger-menu li a, #blogger-menu li a:link, #blogger-menu li a:visited {
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

#blogger-menu li a:hover, #blogger-menu li a:active {
background: #fc7a16; /* hover on menus */
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}

#blogger-menu li {
float: left;
padding: 0;
}

#blogger-menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}

#blogger-menu li ul a {
width: 140px;
}

#blogger-menu li ul ul {
margin: -25px 0 0 160px;
}

#blogger-menu li:hover ul ul, #blogger-menu li:hover ul ul ul, #blogger-menu li.sfhover ul ul, #blogger-menu li.sfhover ul ul ul {
left: -999em;
}

#blogger-menu li:hover ul, #blogger-menu li li:hover ul, #blogger-menu li li li:hover ul, #blogger-menu li.sfhover ul, #blogger-menu li li.sfhover ul, #blogger-menu li li li.sfhover ul {
left: auto;
}

#blogger-menu li:hover, #blogger-menu li.sfhover {
position: static;
}

#blogger-menu li li a, #blogger-menu li li a:link, #blogger-menu li li a:visited {
background: #336699; /* drop down menus background color */
width: 120px;
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
}

#blogger-menu li li a:hover, #blogger-menuli li a:active {
background: #fc7a16; /* Drop down hover color */
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

/*——– End Drop down Menu CSS——-*/


Step 7: Customize it

After pasting the codes you can make changes as requirement.  such as…Menus name and Links, Colors, some styles etc.

That’s it.

Now, you’ve awesome looking drop down menus on your blog.

NOTE :

I prefer to use custom templates on a blogger blog. I have been listed Premium looking FREE blogger templates. So, check out it from – here

Also, if you don’t want to use a custom template and, just want to make styles in blogger navbar then, this guide will help you. – here

Feel free to ask any query or suggestion via comments I’ll surely help you. Also, share this article on social!

You May Also Like

About the Author: Ravijit Chavda

Hey, there. I'm Ravijit Chavda, the founder of bloggingbook. I love to create blogs as well as share my experiences through blogging. I am a passionate blogger with having years of experience in blogging and internet marketing.

Leave a Reply

Your email address will not be published. Required fields are marked *