Adding
drop down menu to your blog / website is the best way to arrange your blog’s /
website’s important links. It helps readers to easily navigate through your
blog / website which will definitely increase your site page views and
impression.
Step 1
Note: If you observed that your sub-menus (Sub Pages) are hidden, kindly read the below tutorial too:
Click "Save Template" and that's all. You can reverse the case anytime.
Now you can add any drop down menu to your navigation bar without any difficulties. Hope this post has helped you? Please take few seconds to share this with your friends.
When I were using the blogger
during my initial days for my blogs, I tried a lot in creating and implementing
the CSS codes of drop down menu.
Finally, I got succeeded and designed a drop
down menu tab for my blog. After few months, I reminded myself, that I could make a blog post out of it, so that it will help other people
in creating and implementing the drop down menu to their blogs / websites.
How to
Add the Drop Down Menu
Step 1
Go to
your blogger dashboard.
Click on
"Design" > "Edit HTML" back up your
template.
Use ctrl F to find ]]></b:skin> and paste the following code above/before it.
/*----- Drop Down Menu BY www.mirrayees.blogspot.com----*/
#rrmnavbar {
background: #2a2626;
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-bottom:5px solid red;
height:35px;
}
#rrmnav {
margin: 0;
padding: 0;
}
#rrmnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#rrmnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#rrmnav li a, #rrmnav li a:link, #rrmnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#rrmnav li a:hover, #rrmnav li a:active {
background: #6c6464;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#rrmnav li {
float: left;
padding: 0;
}
#rrmnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding: 0;
}
#rrmnav li ul a {
width: 180px;
}
#rrmnav li ul ul {
margin: -25px 0 0 161px;
}
#rrmnav li:hover ul ul, #rrmnav li:hover ul ul ul, #rrmnav li.sfhover ul ul, #rrmnav li.sfhover ul ul ul {
left: -999em;
}
#rrmnav li:hover ul, #rrmnav li li:hover ul, #rrmnav li li li:hover ul, #rrmnav li.sfhover ul, #rrmnav li li.sfhover ul, #rrmnav li li li.sfhover ul {
left: auto;
}
#rrmnav li:hover, #rrmnav li.sfhover {
position: static;
}
#rrmnav li li a, #rrmnav li li a:link, #rrmnav li li a:visited {
background: #6c6464;
width: 160px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#rrmnav li li a:hover, #rrmnavli li a:active {
background: #2a2626;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
To change
the color of your background menu, simply edit #2a2626
To change
the background color of the menu on mouse hover, then edit #6c6464
To change
the background color of the drop down menu, edit #6c6464
Click
"Save Template"
when you are done with your editing.
Step
2
Now 2nd Step is to add the html code
Now 2nd Step is to add the html code
Go to
"Page Elements", click "Add a Gadget"
below your header.
Choose
"HTML/JavaScript" from the list of the options and paste the
following code in the content box leaving the title blank.
<div id='rrmnavbar'>
<ul id='rrmnav'>
<li>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
</li>
<li>
<a href='#'>
Downloads
</a>
</li>
<li>
<a href='#'>
Multimedia
</a>
</li>
<li>
<a href='#'>
Islamic
</a>
</li>
<li>
<a href='http://mirrayees.blogspot.in/p/sitemap.html'>
Sitemap
</a>
</li>
<li>
<a href='#'>
Tools ↓
</a>
<ul class='children'>
<li>
<a href='#'>
Weather
</a>
</li>
<li>
<a href='#'>
Website Speed Checker
</a>
</li>
<li>
<a href='#'>
Hex Colour Code Generator
</a>
</li>
<li>
<a href='http://facebook.com/rayeesrehmanmir'>
</a>
</li>
<li>
<a href='http://twitter.com/RayeesRehmanMir'>
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
About ↓
</a>
<ul class='children'>
<li>
<a href='http://mirrayees.blogspot.in/p/about-me.html'>
About Me
</a>
</li>
<li>
<a href='http://mirrayees.blogspot.in/p/privacy-policy.html'>
Privacy Policy
</a>
</li>
<li>
<a href='#'>
FAQ's
</a>
</li>
<li>
<a href='#'>
Dis
</a>
</li>
</ul>
</li>
<li>
<a href='http://mirrayees.blogspot.com/p/contact-me.html'>
Contact Me
</a>
</li>
</ul>
</div>
Replace
all occurrence of # with the link/url of
each page you want to point the menu to.
Replace
all text highlighted in Fuchsia with
the title of each menu.
Click "Save" and if
you need any further help, please feel free to ask using the comment box, and i
will get back to you as soon as possible.
Note: If you observed that your sub-menus (Sub Pages) are hidden, kindly read the below tutorial too:
How to Add Drop Down Menu (DDM) in New Blogger Template
Template editing have been so
much difficult ever since blogger introduce new blogger template designer,
especially picture window template and watermark, which have cause a great
headache for most blogger newbies.
In my next post i will be publishing how you can add a drop down menu to your blog, and i know most newbies are going to experience a little difficulties in implement the code, so i think i have to share this with you before releasing my awesome drop down menu widget.
Now follow the below Steps to Add Drop Down Menu in New Blogger Template
In my next post i will be publishing how you can add a drop down menu to your blog, and i know most newbies are going to experience a little difficulties in implement the code, so i think i have to share this with you before releasing my awesome drop down menu widget.
Now follow the below Steps to Add Drop Down Menu in New Blogger Template
Go to your blogger dashboard
Click on "Design"
> Edit HTML" > back up your template
Now find your tab/menu tag code, it will look
very similar to the code below, you can scroll through your template until you
find it:/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: transparent;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #ffffff;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em .75em;
font: normal bold 17px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid #ffffff;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #990000 none repeat-x scroll 0 -100px;
color: #ffffff;
}
Remove the comment quote (*/) from the top and add it the bottom of your
tab tag like the example below.
/* Tabs
-----------------------------------------------
.tabs-outer {
overflow: hidden;
position: relative;
background: transparent;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #ffffff;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em .75em;
font: normal bold 17px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid #ffffff;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #990000 none repeat-x scroll 0 -100px;
color: #ffffff;
}
*/
Click "Save Template" and that's all. You can reverse the case anytime.
Now you can add any drop down menu to your navigation bar without any difficulties. Hope this post has helped you? Please take few seconds to share this with your friends.