Hi readers!! This tutorial is all about the importance of "Navigation Menu" for a blogger blogand 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 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>
.menuskillblogger {
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.skillbloggerdark_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;
}/* Blog Menu www.skillblogger.com */
ul.skillbloggerdark_menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;}
ul.skillbloggerdark_menu li {
float: left;
position: relative;
margin: 10px 0px -4px 5px;}
/* Blog Menu www.skillblogger.com */
ul.skillbloggerdark_menu li a, ul.skillbloggerdark_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;
/* Blog johanes djogzs.blogspot.com */
-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);
}/* Blog Menu www.skillblogger.com */
ul.skillbloggerdark_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;
}/* Blog Menu www.skillblogger.com */
ul.skillbloggerdark_menu li a.selected, ul.skillbloggerdark_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.skillbloggerdark_menu li ul {
display: none;
}
/* Blog Menu www.skillblogger.com */
ul.skillbloggerdark_menu li ul:before {
content: " ";
position: absolute;
display: block;
z-index: 1500;
left: 0;
top: -10px;
height: 10px;
width: 100%;}
ul.skillbloggerdark_menu li:hover ul {
position: absolute;
display: block;
z-index: 1000;
left: 0;
top: 35px;
padding: 5px 0;
list-style: none;
background: #282321;
}/* Blog Menu www.skillblogger.com */
ul.skillbloggerdark_menu li ul li {
float: none;
margin: 0 10px;
border-bottom: 1px solid #191614;
border-top: 1px solid #3a3230;}
ul.skillbloggerdark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;}
ul.skillbloggerdark_menu li ul li:last-child {
border-bottom: 0 none;
}/* Blog Menu www.skillblogger.com */
ul.skillbloggerdark_menu li ul li a, ul.skillbloggerdark_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.skillbloggerdark_menu li ul li a:hover {
text-decoration: underline;
background: #2a2523;
}</style>
<div class="menuskillblogger">
<ul class="skillbloggerdark_menu">
<li><a href="http://www.skillblogger.com/" title="Home">Home</a></li>
<li><a href="http://www.skillblogger.com/">About Us</a></li>
<li><a href="http://www.skillblogger.com/">Contact Us</a></li>
<li><a href="http://www.skillblogger.com/">Blogger</a><ul>
<li><a href="http://www.skillblogger.com/">Tips</a></li>
<li><a href="http://www.skillblogger.com/">Tricks</a></li>
<li><a href="http://www.skillblogger.com/">Widgets</a></li>
</ul></li><li><a href="http://www.skillblogger.com/">Tools</a><ul>
<li><a href="http://www.skillblogger.com/">HTML Editor</a></li>
<li><a href="http://www.skillblogger.com/">Color Code Generator</a></li>
<li><a href="http://www.skillblogger.com/">Page Rank Checker</a></li>
<li><a href="http://www.skillblogger.com/">Count Characters</a></li>
<li><a href="http://www.skillblogger.com/">Adsense Code Converter</a></li></ul></li>
<li><a href="http://www.skillblogger.com/">Write for us</a></li>
<li><a href="http://www.skillblogger.com/">Download</a></li>
</ul></div>
Link change:-
Change our link
http://www.skillblogger.com with with your blog links.
All Done : Now everything is
completed just Save your Widget by pressing Save button.
From team Skill Blogger:-
Hope you have enjoyed the session of cool and interesting tutorial "Navigation menu For Blogger".we are trying to create more Blogger Widgets that benefits to you and your users. If you would face any problem to add this widget feel free to ask till then, Blessings and Happy Navigating.
Note: This widget is created by Skill Blogger. Don't forgot to link back if you want to share this tutorial.otherwise Dmca is waiting for some spammers and copiers.
Spread The Love, Share Our Article
0 comments:
Post a Comment