Hi
readers!! This tutorial is all about the importance of "Navigation
Menu" for a blogger blog and how could you add it in your blog. A
properly customized and well placed Menu bar can play a very important
role in your blog's SEO. It also helps you to reduce your bounce rate so
that a reader can spent some extra time on your blog. The Menubar will
help you to showcase your some of the most important links of your blog.this NAV Menu code is made by good friend @ TrueblogTips,This is a mega drop down menu, So you can put as much links as you
want. It will look absolutely fantastic with any kind of template. it
contains cool hover effect, which is enough to impress your reader. So
before starting the tutorial, Lets see the demo first.Features of the widget:-
- Looks cool and stylish.
- Drop down facility to add more and more links.
- Works on simple Css.
- No image used.
- Loads very fast and will not affect your blog speed.
How to install this widget:-
The steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.- Go To Blogger.com >> Your Blog >> Template
- Now Backup your template.
- Then select Edit HTML >> Proceed
- Search for <body> and just below/under it paste the following code.
<style>
/* Blog Menu www.trueblogtips.com */
.menutrueblogtips {
background: #121212;
width: 100%;
margin-left: 14%;
margin-right: 14%;
position: relative;
height:48px;
margin: auto;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 0 #5E524F;}
ul.trueblogtipsdark_menu {
list-style: none;
padding: 3px 1px;
font-family: 'Lora', serif;
font-weight: 700;
font-style: italic;
font-size: 18px;
width:960px;
line-height: 15px;
margin: auto;
}
ul.trueblogtipsdark_menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
ul.trueblogtipsdark_menu li {
float: left;
position: relative;
margin: 10px 0px -4px 5px;
}
ul.trueblogtipsdark_menu li a, ul.trueblogtipsdark_menu li a:link {
color: #ffffff;
text-decoration: none;
display: block;
padding: 10px 26px;
background-color: #0091d6;
border-radius: 5px 5px 0px 0px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
ul.trueblogtipsdark_menu li a:hover {
color: #fff;
background: #222;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
ul.trueblogtipsdark_menu li a.selected, ul.trueblogtipsdark_menu li a:active {
color: #222;
background: #EDEDED;
padding: 10px 10px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
border-radius: 5px 5px 0px 0px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;}
ul.trueblogtipsdark_menu li ul {
display: none;
}
ul.trueblogtipsdark_menu li ul:before {
content: " ";
position: absolute;
display: block;
z-index: 1500;
left: 0;
top: -10px;
height: 10px;
width: 100%;}
ul.trueblogtipsdark_menu li:hover ul {
position: absolute;
display: block;
z-index: 1000;
left: 0;
top: 35px;
padding: 5px 0;
list-style: none;
background: #282321;
}
ul.trueblogtipsdark_menu li ul li {
float: none;
margin: 0 10px;
border-bottom: 1px solid #191614;
border-top: 1px solid #3a3230;}
ul.trueblogtipsdark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;}
ul.trueblogtipsdark_menu li ul li:last-child {
border-bottom: 0 none;
}
ul.trueblogtipsdark_menu li ul li a, ul.trueblogtipsdark_menu li ul li a:link {
color: #aaa;
display: block;
background: transparent none;
padding: 10px 20px 10px 5px;
white-space: nowrap;
text-shadow: 0 1px 2px #000;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;}
ul.trueblogtipsdark_menu li ul li a:hover {
text-decoration: underline;
background: #2a2523;
}
</style>
<div class="menutrueblogtips">
<ul class="trueblogtipsdark_menu">
<li><a href="http://helperstutorial.blogspot.com/" title="Home">Home</a></li>
<li><a href="http://helperstutorial.blogspot.com/ /">About Us</a></li>
<li><a href="http://helperstutorial.blogspot.com/">Contact Us</a></li>
<li><a href="http://helperstutorial.blogspot.com/">Blogger</a><ul>
<li><a href="http://helperstutorial.blogspot.com//">Tips</a></li>
<li><a href="http://helperstutorial.blogspot.com//">Tricks</a></li>
<li><a href="http://helperstutorial.blogspot.com//">Widgets</a></li>
</ul></li><li><a href="http://helperstutorial.blogspot.com//">Tools</a><ul>
<li><a href="http://helperstutorial.blogspot.com//">HTML Editor</a></li>
<li><a href="http://helperstutorial.blogspot.com//">Color Code Generator</a></li>
<li><a href="http://helperstutorial.blogspot.com//">Page Rank Checker</a></li>
<li><a href="http://helperstutorial.blogspot.com//">Count Characters</a></li>
<li><a href="http://helperstutorial.blogspot.com//">Adsense Code Converter</a></li></ul></li>
<li><a href="http://helperstutorial.blogspot.com//">Write for us</a></li>
<li><a href="http://helperstutorial.blogspot.com//">Download</a></li>
</ul></div>
Link change:-
Change our link http://helperstutorial.blogspot.com/ with with your blog links.All Done : Now everything is completed just Save your Widget by pressing Save button.
make sure you add your comment below
ReplyDelete