CSS Hover Effect Navigation Menu Bar With Icons

0
CSS hover Effect Navigation Menu bar

Today I'm going to explain how to add Css Hover Effect With Image blogger navigation menu bar.Navigation bar is very important part of our website.It helps visitors to navigate our website and make easy to them find relevant content of our site.If you use some cool and attractive CSS hover effect with icon display menu bar for blogger it help to look your website awesome.just read this tutorial from this tutorial you can learn how to add CSS hover effect on your navigation bar widget.We are using CSS language for this navigation menu bar.To grab this menu bar for blogger website just follow the steps mentioned below.

How to add Css Hover Effect With Icons Navigation Menu Bar

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find  ]]></b:skin>
5. Paste below code just above it
/* The CSS Code for the menu starts here bloggersstand.blogspot.com */
#bstand-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}

#bstand-nav li {float: left;}

#bstand-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}

#bstand-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}

#bstand-nav li a img {position: relative;top: 0;transition: top .5s ease;}

#bstand-nav li a:hover {cursor: pointer;}

#bstand-nav li a:hover img {top: -85px;}

#bstand-nav li a:hover .aname {top: 85px;}

#bstand-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}

#bstand-nav li:nth-child(2) a {background: #9bc704;}

#bstand-nav li:nth-child(3) a {background: #0dc3ff;}

#bstand-nav li:nth-child(4) a {background: #51a2ec;}

#bstand-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

6. Go to blogger Layout 
7. Click Add Gadget and select 'HTML/Javascript'
8. Paste below code.
<div id="bstand-nav">

<li>
    <a href="#"><span class="aname">Homes</span>
      <img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname">Download</span>
      <img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname"> MySql</span>
      <img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname"> Html</span>
      <img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname">Contact</span>
      <img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />
    </a>
  </li>
</div>
*Change All # With your Link.

9. Now save your HTML/Javascript'..Done !!

If you have Any Query regarding This CSS Hover Effect with Icons Navigation Menu Bar..Feel Free To Ask,Just Drop Your Comment.
CSS Hover Effect Navigation Menu Bar With Icons,css navigation bar for blogger blog blogspot website for free,best css hover effect navigation bar widget with icon display on mouse over effect
Today I'm going to explain how to add Css Hover Effect With Image blogger navigation menu b...
SUMMARY

CSS Hover Effect Navigation Menu Bar With Icons,css navigation bar for blogger blog blogspot website for free,best css hover effect navigation bar widget with icon display on mouse over effect

You Might Also Like:

We hope this article helped you to learn CSS Hover Effect Navigation Menu Bar With Icons. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "CSS Hover Effect Navigation Menu Bar With Icons" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand