20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

CSS Hover Effect Navigation Menu Bar With Icons

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
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wufrtLWbEdOi2ZIDLfgCXhXxFTSo6R1TBCCUeFfRr1YpQHD-_WDM5OAGYx3yw-RtnsokboGm2nGonkSpsRxP0ozcOCQEo_JE5khaxUF4iifXPZYJ12wjvcBG6P6m_xiwoMtY4dpJzgI/s1600/btrix-home.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname">Download</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINpMwEJJWCPc4n7wBWC7jwtPytOn99K8gW13fCChMJUto1Ij-5EgB6BthoYtwV7po9XcfD5_nclH1oWJ4pQdWx46fd8DR_ub6ZdAsEZ_9t6kQXzqyyGkU5Ip69adYtcy7_eCBGN_1g8w/s1600/btrix-download.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname"> MySql</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6X6_jMF12_f9v6azxVulNUCvar9ZLkc30Mf3pfdEesliNkid1w0riPPc4OaFxZ4QQ7i_z34smPBA16E8hHHIM3AgvPIYD2hK2uJlkDjKfCfYoFeO_6Td4prZZt1psQIwoklKFQ6UtLU/s1600/btrix-mysql.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname"> Html</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjxxZuug_uOiMVHYJRf85ulfSZlQJwSALmRz6GNmhWCKmWFtVUwRvRB9mjkyhcQk-wed-ythJLMsgRDqGuYJMdc1coOCezqebU-WgfuBLRsfFyYTCi9iGkmkpUAN5RE64hs3BYSdPtog/s1600/Btrix-html.png" />
    </a>
  </li>
<li>
    <a href="#">
      <span class="aname">Contact</span>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz_jAZ548TmhsFTJCUQjUiYxRJzcsPk2yBGM4I3yP6h6Drc-BGp3ixgoKnMxEsw_5BJZZ2-fPrF3K3VbkkIyrKhXwyR1p3E9OcEEHj6iiqO5JbsDa0Uox6owaAw9g6J74hnwGFMCaYdh8/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.

Post a Comment