Attitude Navigation Menu Bar Widget For Blogger

Attitude Navigation Menu Bar Widget For Blogger, Coded in HTML and CSS with gray and black color. Rich and Attitude Look one of the best and most widely used nav bar.

Attitude Navigation Menu Bar Widget For Blogger
Attitude Navigation Menu Bar Widget For Blogger

VIEW DEMO




Attitude navigation menu bar widget for blogger. Just like the name it is one of the most awesome and stylish nav bar for blogger and Wordpress comes in the category of light and dark color navigation menu. As we already explored some of the best navigation menu widget for blogger and website like:-cute yellow navigation menu bar widget for blogger,Fashion Navigation menu bar widget for blogger,Dashed rich navigation menu bar widget for blogger and in dark color we developed Professional Navigation Menu Bar Widget For Blogger.

Bonus SEO Tips:-

4 Type of Popular Post Widget For Blogger.
Add Post title before the homepage title.
Image Accordion Widget For Blogger For custom recent Post.


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">

#menu3 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
font-weight: bold;
letter-spacing: -2px;
line-height: 1.2em;
border-top:4px solid #000;
border-bottom:4px solid #666;
float:left;
clear:both;
margin:20px;
}
#menu3 ul li{
float:left;
}
#menu3 ul li a{
display:block;
text-decoration:none;
background-color:#ccc;
padding:10px 10px 5px 10px;
color:#666;
width:170px;
}
#menu3 ul li a span{
display:block;
text-align:center;

}
#menu3 ul li a span.title{

}
#menu3 ul li a:hover span.title{
color:#000;
}
#menu3 ul li a span.text{
padding:0px 5px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 2em;
text-align:right;
margin-top:-20px;
color:#f0f0f0;
font-weight:bold;
background-color:#000;
visibility:hidden;
}
#menu3 ul li a:hover span.text{
visibility:visible;
}
</style>

<div id="menu3">
<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 really liked the Attitude Navigation Menu Bar Widget For Blogger. Feel free to comment and share.
Next Post Previous Post