Css Icon Hover Effect Navigation Bar

Each one web specialists using Css3 Icon float affect all through their progression process.there have various frameworks they have to focus on.like speedier loading,efficient and dealing with easier.there have some piece of inclination of using Css3 drift effects,web architects and webmasters know it well.designing website furthermore learning process.on this excercises moreover exhibit to us fitting techniques to use Css3 Icon float sway  course bar without using any Javascript library. Css3 continually steady to tweak our action easily.it is basic because streamlined by Html.hope every visitors have scrutinizing foundation with,how is the Css3 Icon buoy effect satisfies desires. 

Course bar is extraordinarily basic  bloggers. We can investigate our pages, classes without having problem.there have some piece of benefits of using Css3 Icon buoy effect course bar.it help our social event of individuals to run across our indispensable pages like contact us page, About us, Advertising etc.and other thing is, whether you pick some charming looking course bar, it help to make your site attractive.by considering this excercise, you can evaluate how to incorporate Css3 Icon float effect course bar to blogger.this is amazingly important web builds likewise. 

1. Go to Blogger Dashboard > Template 

2. Dowload Backup Of your Template

3. Click on Edit HTML 


4. Find  ]]></b:skin>  and include underneath code simply 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/AVvXsEg5i_dU8T5Ie9C3i6rrkrNJTuRu_Ih_8U6JNU3ZPaJ1iLmTWcsxk-WG0F-kc7b6ylikmmRn8lv_dr9bNELlh37Y6IW_Ov3WNQIwNePUoXHhy4zbrjxJ9hyo17dBGsEDQPyPba8c7fjP5-E/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu73y_Vfo-QgC5Befgyj_WMwOJ509qO78u0QkTI9D_KiEtxdGTJmHNJZ_V94hMoxd0lkRb2uYbq6Y4BmCYDfUSKGhpuo9ZOhfnc_K5y2-FuyX3Hiiui0HS7aZgoUWyDahb7Yn_aPwUu08/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhauhsasQIH0a2Ii2gMkQGS5tkBhzvt-Jn1iZGQFmdn4PXKGnO6vArIydzr932kK7R78lDOUwOJ9mEEmG_g8_M5u28W7hrW-zw1Ox-mTcfj_y6EzuuVgZtMfXVhyciSl0YnWBVRQD9GJvc/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiikHNQeQUq81mf9MswVAmNmbYztmfqX2ynzAsGmGuf3EmR1IVVUXnBn2RIOHq_PwlQC67NEuohUt6Ty77UEqVkxLP4hJHVaXvXn6wka5TuTGoJM7mBJPK1YvHLjtQT4qNQ-vr2C56wZss/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTxlTwGiLEgv0cZvjbf6bUOiSbryCgaU6UX3rtLxEdd1c2fih7dwe8UUW3kJcl8zMVfpeQXWKxr5lXzmZaXcdTya97NDkUoWObucAec0CXgj7X-3pxjZMpvND44mZCy0_MTr_WFPRcSik/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.

Please Share It With Your Freinds So That More and More People Get Its Benefit !

ThnX !!