Animated Call To Action Navigation Menu For Blogger

Rohan Mod
9 Nov, 2013

Animated call to action navigation menu bar widget for blogger. Best for blogger blog based on html and pure css.

Animated Call To Action Navigation Menu For Blogger
Animated Call To Action Navigation Menu For Blogger

We have shared many navigation menu bar widget for blogger and this is the new and very different from others. This navigation menu is based on html and css. Yes it is animated nav bar because when you hover your mouse on the menu buttons suddenly a call to action buttons appears and prompts users to click. It is very helpful in increasing your website conversion rate.


Hammer effect drop down menu bar widget for blogger

CSS Gradient navigation menu bar widget for blogger 

Attitude navigation menu bar widget for blogger 

Dashed Rich Navigation menu bar widget for blogger 

Professional Blue Navigation menu bar widget for blogger 

Fashion Style Navigation menu bar widget for blogger 

Cute Yellow Navigation menu bar widget for blogger 

King of Black Navigation Menu Bar Widget for blogger

If you really want to increase your website conversion rate than read this.

6 Writing Tips To Increase Conversion From Internal Links
7 Blogger Branding Tactics used by Ana Hoffman Of Trafficgenerationcafe

We have also written a post on how to optimize buttons for more clicks. This post will also be very useful for you to get more clicks on buttons and to increase website conversion rate.

Optimization of Buttons



We have shared a call to action social media widget for blogger but now we are sharing a colorful navigation menu bar for blogger. Using css hover effect. Below i have given html and css code for this blog but for easy installation i have embedded the code into one single code.

You just have to copy the code and paste the code at the place where you want this widget to appear.


There are two methods to install this widget into your blogger blog.


  • Go to blogger.
  • Go to layout.
  • Click on add a gadget.
  • Choose html/javascript.
  • Copy the below code and paste it.
  • Save arrangement and you are done.


Complete code


<style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-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;}
#avd-nav li a span.myname {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);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;}
border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>


<div id="avd-nav">
<li> <a href="#"><span class="myname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6_vP8zJ7ES1KFVraTmrdkk6TQQXKifymYnfC2_gOEBpsM4Re-f6ByZaMTWDYabPewcMlipRTj-gwcrWtm6P1sexEs19WmjGjUzaexTmDyI4L0-R3G0IdIbsIkn8fyIvDJ66fABtM8Do/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">About</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6_vP8zJ7ES1KFVraTmrdkk6TQQXKifymYnfC2_gOEBpsM4Re-f6ByZaMTWDYabPewcMlipRTj-gwcrWtm6P1sexEs19WmjGjUzaexTmDyI4L0-R3G0IdIbsIkn8fyIvDJ66fABtM8Do/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> Author</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6_vP8zJ7ES1KFVraTmrdkk6TQQXKifymYnfC2_gOEBpsM4Re-f6ByZaMTWDYabPewcMlipRTj-gwcrWtm6P1sexEs19WmjGjUzaexTmDyI4L0-R3G0IdIbsIkn8fyIvDJ66fABtM8Do/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6_vP8zJ7ES1KFVraTmrdkk6TQQXKifymYnfC2_gOEBpsM4Re-f6ByZaMTWDYabPewcMlipRTj-gwcrWtm6P1sexEs19WmjGjUzaexTmDyI4L0-R3G0IdIbsIkn8fyIvDJ66fABtM8Do/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div>



And here is the Step 2.


  • First copy the below html code.
  • Then go to blogger.
  • Click on add a gadget.
  • Choose html/javascript.
  • Copy the below html code.
  • And paste it.



Html code



<div id="avd-nav">
<li> <a href="#"><span class="myname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6_vP8zJ7ES1KFVraTmrdkk6TQQXKifymYnfC2_gOEBpsM4Re-f6ByZaMTWDYabPewcMlipRTj-gwcrWtm6P1sexEs19WmjGjUzaexTmDyI4L0-R3G0IdIbsIkn8fyIvDJ66fABtM8Do/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">About</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6_vP8zJ7ES1KFVraTmrdkk6TQQXKifymYnfC2_gOEBpsM4Re-f6ByZaMTWDYabPewcMlipRTj-gwcrWtm6P1sexEs19WmjGjUzaexTmDyI4L0-R3G0IdIbsIkn8fyIvDJ66fABtM8Do/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> Author</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6_vP8zJ7ES1KFVraTmrdkk6TQQXKifymYnfC2_gOEBpsM4Re-f6ByZaMTWDYabPewcMlipRTj-gwcrWtm6P1sexEs19WmjGjUzaexTmDyI4L0-R3G0IdIbsIkn8fyIvDJ66fABtM8Do/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6_vP8zJ7ES1KFVraTmrdkk6TQQXKifymYnfC2_gOEBpsM4Re-f6ByZaMTWDYabPewcMlipRTj-gwcrWtm6P1sexEs19WmjGjUzaexTmDyI4L0-R3G0IdIbsIkn8fyIvDJ66fABtM8Do/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div>




  • Now copy the below css code.
  • Go to template.
  • Click on edit html.
  • And search for ]]></b:skin>
  • Now copy the below css code above ]]></b:skin>.
  • Save and you are done.



CSS Code



#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-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;}
#avd-nav li a span.myname {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);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;}
border-radius: 0 5px 5px 0;border-right: 1px solid #555;}


So this was the call to action navigation menu bar widget for blogger. Please share it and comment.
Next Post Previous Post