Cute Yellow Navigation Menu Bar Widget For Blogger

Cute Yellow Navigation Menu Bar Widget For Blogger. Based on Pure CSS and HTML becomes white on mouse hover and display Description.


Cute Yellow Navigation Menu Bar Widget For Blogger
Cute Yellow Navigation Menu Bar Widget For Blogger

VIEW DEMO


Yellow navigation Menu For Blogger and website. Coded in HTML and CSS. I created a single code mixed the HTML and CSS code into a single code same that we did in image accordion widget for blogger for recent post. So it will be easy for you to add this gadget in your blogger blog. You can insert your page links which you created through pages on your blogger blog or you can also use your label search links in this nav bar blogger widget. Replace the # tag in links and insert your links of page or labels.

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.



HTML, CSS CODE

<style type="text/css">
#menu6 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #ffe430;
}
#menu6 ul li{
float:left;
}
#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#ffc730;
width:170px;
}
#menu6 ul li a span{
display:block;
}
#menu6 ul li a span.title{
border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
background-color:#fff;
}
#menu6 ul li a:hover span.title{
color:#ffc730;
border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#ffc730;
visibility:hidden;
color:#fff;
}
#menu6 ul li a:hover span.text{
visibility:visible;
}

</style>

<div id="menu6">
<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 navigation menu bar widget for blogger. Feel free to ask any question through the comments.
Next Post Previous Post