Dashed Rich Navigation Menu Bar Widget For Blogger

Dashed Rich Navigation Menu Bar Widget For Blogger, Coded in HTML and CSS with three colors white black and gray. Rich and Stylish Look.

Dashed Rich Navigation Menu Bar Widget For Blogger
Dashed Rich Navigation Menu Bar Widget For Blogger

VIEW DEMO





Dashed rich navigation menu bar widget for blogger is good for those websites and blog who have light color of their template. As this nav bar is built with light colors so it will look fine in dating and entertainment websites and blog which mostly prefer light colors for their web design in the similar way we also have yellow navigation menu Bar and Pink navigation Menu Bar. We also have some dark color navigation menu like Blue Navigation Menu For both Blogger and Wordpress.


Bonus SEO Tips:-

Image accordion Widget For Blogger For custom Recent Post.
Add Post Title Before the Homepage Title.
4 Type of Popular Post Widget For Blogger


Quality Of Nav Bar Blogger Widget


  1. This blogger widget works in all browsers like Firefox, Opera, Google Chrome and Internet Explorer.
  2. It is fast in loading.
  3. No third party Javascript needed.
  4. Pure CSS Based Navigation Menu Widget For Blogger.



How To Add Navigation Bar Blogger Widget


  • First Login To Blogger Account.
  • Go To Layout.
  • Click on Add a Gadget.
  • Choose HTML/JAVASCRIPT.
  • Copy The Below Code.
  • Paste Into HTML.JAVASCRIPT.
  • Now Save.



CODE


<style type="text/css">
#menu2 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.2em;
border:1px solid #000;
border-left:none;
float:left;
clear:both;
margin:20px;
border:5px dashed #fff;
}
#menu2 ul li{
float:left;
}
#menu2 ul li a{
display:block;
text-decoration:none;
background-color:#f0f0f0;
padding:5px 10px;
color:#666;
width:140px;
}
#menu2 ul li a span{
display:block;
text-align:center;

}
#menu2 ul li a span.title{
}
#menu2 ul li a:hover span.title{
color:#000;
}
#menu2 ul li a span.text{
font-size:12px;
font-style:italic;
padding:0px 5px;
border:1px solid #f0f0f0;
}
#menu2 ul li a:hover span.text{

}
#menu2 ul li a:hover span.text{
border:1px inset #ccc;
background-color:#fff;
}

</style>


<div id="menu2">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>


I Hope you liked Dashed Rich Navigation Menu Bar Widget For Blogger and Wordpress. Feel free to comment and share.
Next Post Previous Post