Home » , » Fashion Style Navigation Menu Bar Widget For Blogger

Fashion Style Navigation Menu Bar Widget For Blogger


Fashion Style Navigation Menu Bar Widget For Blogger. Pure CSS and HTML Based. Silver Text changes in pink color on Mouse Hover.

Fashion Style Navigation Menu Bar Widget For Blogger
Fashion Style Navigation Menu Bar Widget For Blogger

VIEW DEMO


Fashion Style or celebrity style navigation menu bar widget for blogger. These nav bar is suitable and good for fashion websites, Style websites or blog. The color combination is very unique of these blogger widgets. Default text color is silver and when you hover your mouse on the text it changes its color into pink color and hence perfect for dating and love websites and blog. There are 2 codes below. I have made a single code for you so that you do not face any problem in adding this blogger widget of navigation menu just like we did in image accordion widget for blogger for recent postHTML and CSS code are mixed into a single code. You just have to copy the code and paste the code. You can also customize the code. For this look into CSS part in the code. Replace # tag from your links and change the title and description from your page links in these blogger widgets.

Bonus SEO Tips :-


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.



<style type="text/css">
#menu8 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
letter-spacing: -2px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:5px solid #fff;
}
#menu8 ul li{
float:left;
}
#menu8 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#fff;
width:170px;
border-left:6px solid #888;
}
#menu8 ul li a span{
display:block;
}
#menu8 ul li a span.title{
color:#888;
}
#menu8 ul li a:hover{
border-left:6px solid #000;
}
#menu8 ul li a:hover span.title{
color:#df246f;

}
#menu8 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
visibility:hidden;
color:#df246f;
text-align:right;
border-top:5px solid #000;
}
#menu8 ul li a:hover span.text{
visibility:visible;
}

</style>

<div id="menu8">
<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 these Fashion style Navigation Menu Bar Widget For Blogger. Please free to leave a comment if you face any problem in adding this widget. And write comment for your suggestions.

Title: Fashion Style Navigation Menu Bar Widget For Blogger Author: Rohan Mod
Description : Fashion Style Navigation Menu Bar Widget For Blogger. Pure CSS and HTML Based. Silver Text changes in pink color on Mouse Hover.
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS