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.
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
1. Go to Blogger Dashboard > 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">Replace # with your links.
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaUX5hcrjoTG6CgZvXP-BqqhPuvzGrNTXruVTHLIwAFuKKlR3LfdIGb4nm_urIn9BcMGkwM8Xx87pGuBgI1EjkUF0fL-oaeBP8cEv4rBk4HWMHcA1Eehl9-9y2uckrmWqnZ1NMOf9StNY/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ybVoGHMW3eYXLCJiyx9pBDUcs4t6P7iN1pUbBypCHaQGGRafTzqBl-8Q7mywy2zIuz0C7CG_fLkpwHFAZwwJoA5nA7FBarr-2zYmbiZYqtGzR2APJ8na9sXbZhegF89FP2uh4OCZ0dg/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfyW4J9SyEBJqjickZ8q4Qg9xDcVqNa1VLxK8iK1lanY2kdL62hdEFeAkcwXOR7ckiY4YovUTz_fN7YdjRS_5MQXKlfBwQB1SkFtHbqm2cWmwLQ_bAt11EA2IOqGvZxh15uGWdTfWcvX4/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_bJ7eSz2kUYl5k3N7L6O7v6jSKSyXl5fl2iZOr72qUNY7He_9l8x9YF1WFuZpME2Bgtv2PUewbEE-WgZKIl8HnDsK-I3lK8F80clLwOP84RnE255d_XsyLZjJnAU1vLYUDD1ZMmZOsM/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS3Z4J6Q_Uv0za-EAEcJ5G9bxNnpDY3CNrjWGJFEATVv0qfte6-6zkBROu60vDbpEJPLR7FSqmADLV897-FXkjFL55g67Qm2Eiq9O0lQMC2cwD0O1Pl99yjzAixVNDa0UD6ySYr4suy9w/s1600/btrix-contact.png" /> </a> </li> </div>
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.
