Css Icon Hover Effect Navigation Bar For Blogger

Every web developers using Css3 Icon hover effect during their development process.There have many techniques they have to focus on.Like faster loading,efficient and handling easier.There have lot of advantages of using Css3 hover effects,web developers and webmasters know it well.Designing website also learning process.On this tutorials also show us how to use Css3 Icon hover effect  navigation bar without using any JavaScript library. Css3 always helpful to customize our animation easily.It is very easy because optimized by HTML.Hope every visitors have browsing experience with,how is the Css3 Icon hover effect works.

Navigation bar is very important  bloggers. We can navigate our pages, categories without having problem.There have lot of benefits of using Css3 Icon hover effect navigation bar.It help our audience to find our important pages like contact us page, About us, Advertising etc.And other thing is, if you choose some nice looking navigation bar, it help to make your blog attractive.By studying this tutorial, you can learn how to add Css3 Icon hover effect navigation bar to blogger.This is very useful
web developers as well. You can check demo by demo button.How this helpful to you.

How to add Css Icon Hover Effect Navigation Bar

Demo

1. Go to Blogger Dashboard > Template

2. Backup your template
3. Click on Edit HTML
4. Find  ]]></b:skin>   and add below code just above it

/* The CSS Code for the menu starts here bloggertrix.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-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;}
#btrix-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);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

5. Go to blogger Layout
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below code.

<div id="btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib98FxdOWWW-nQBDjW-LgXOr800Q2XpWtJ7qDfoCXKQs5IAsexnC7sfRXncgD8Mt0j1GjLxeuOFkkiRJb6HDnmsslo29Swzt4q6vDqGvLMYJx0NRe18Bu8PIC7BHI5SJ0xvBkp7AxrFBM/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjiLIDOzp9c2vI-S0NXX5FvopSZh54mZTY2aFIEG3m-1KcviVXqnoXjGwJFVI9iXuY9sd5CBWICcSeqLMVd1YdHrdCQLJmSNmaegGyPLT9Ra9AB08HZw42RUuJD9CuaT_ovw5cDxpUQkY/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGfIzWrcKPdg4gtNXnA7Zhg7O3HPKF3HaPT1ItNtvb3oaDtZ5FE1DbpDRlQ41WOSeC5a3HAiSsZFo_3KJLBV7r84SPDU-fsDBhOW9SXn8hX4OV4eBulj-W5zaFJKCCWnSjWC2W9OmjlwA/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ZMLqVu6UlnLxHbGWlYyMPzXadA43KFZnipUWQXlSKrFQP-4lwiBbP2gW_gg3z8rGUidqafQSfhAkb0TYcvLHcxv_CyF05vwV7BwM0kmzP0RxndXFMtuYyf_QaijaGo1S1O6b059T9M8/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgud-A5UmquU7qiawv7tzzWukedXMYcCZqf_FCEyZpn9midmuhb1vOVUuIbnw-WQKNbMWowucJ73EnM2xEG71UXFlDEvL7DhqoUi2xLwQP1_oNvKotE_ObbHeIlvS2Qimsg5OVzs0G34/s1600/btrix-contact.png" /> </a> </li> </div>

Replace # with your links.

8. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Css Icon Hover Effect Navigation Bar. Just leave a comment.I will help to you.