Add Animated Hover Box Menu to attract readers and increase page views

First appearance makes visitors/readers to view more articles and stick to blog/website without bouncing. To transfer your templates more attractive after spicing up adding stylish menus or widgets attract visitors to subscribe. Scrap your old type navigation menu and adopt this menu to help readers to find more categories of articles indirectly improve your page views by means of Animated Hover Box Menu. Earlier in this blog we shared few article about different Menu styles compatible for all blogging platform. Most of our subscribers are requesting to publish animated stylish menus which look different and awesome to attract more visitors and turn them as loyal subscribers.

Read More:Stylish Menus

Here in this article by seeing demand from our loyal subscribers we’re sharing this menu style article with hover effect and CSS Trick. Webmasters don’t need work hard for adding this menu to their blog/website, its simple and easy customizable. Lots of menus are available adding directly to template scripting code, but if anything goes wrong template may be disturbed.

Browse More Related Posts

How to create/convert a Drop Down Menu for Blogger Label list Categories?
As everyone aware about Blogger label gadget/widget is a default sidebar...
Add CSS Vertical Menu with Hover Effect to Blog/Wesbite
Lots of menus are available in vertical and horizontal format few of them...
Add Animated Hover Box Menu to attract readers and increase page views
First appearance makes visitors/readers to view more articles and stick to...
Stylish Round Corner Dropdown Menu for Blog/Website with CSS3 effect
Many of you aware about CSS3 effect menu styles, in this tutorial we...
Ko-Vertical Menu bar for blogger blogs with CSS3
Without Menu bar it’s difficult to maintain a blog, Menu bar occupies vital...
Yummy Horizontal Menu for Blogger with hover effect
In the earlier posts here discussed about various type of menus in vertical...
How to add Stylish Horizontal Drop down Menu for Blogs?
Whenever visitor/readers land on any blog/website they browse for more...

Most of our subscribers are Bloggers who are new to blogging not aware of scripting and coding they want simple code to spice up their blog.

Advantages adding this Animated Hover Box Menu for blogger

Designed in eight category with different attractive color hover effect
Easy customizable and stylish background colors
CSS coding script helps template in loading fast
Compatible for all browsers available online
Attracts visitors/readers to browse more categories of articles
Increasing page views of your blog/website
Indirectly helps to increase your page rank on Alexa by means of pages views hike

How to Add this menu to blogger?

Sign into your blogger account
From Blogger Dashboard select ‘Layout’ link tab
Click on ‘Add a Gadget link tab and select ‘HTML/Javascript’ link widget
Now copy the below code paste in it directly

<style>
/* Animated Box Hover Menu by www.blogtariff.com */
.Blogtariff{list-style:none}
Blogtariff-wrap{margin: 19px 0 0 0
}.ie8 .Blogtariff-wrap{margin:0}
.Blogtariff li{
background:#000000;
float:left;
width:12.5%;
position:relative;
-moz-transition:background-color 0.4s ease;
-o-transition:background-color 0.4s ease;
-webkit-transition:background-color 0.4s ease;
-ms-transition:background-color 0.4s ease
}
.Blogtariff li:hover{
background:rgba(0,0,0,0.4);
-moz-transition:background-color 0.1s ease;
-o-transition:background-color 0.1s ease;
-webkit-transition:background-color 0.1s ease;
-ms-transition:background-color 0.1s ease
-moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 6px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px;
}
.Blogtariff a{
border-top: 0 none;
color: white;
display: block;
font-family: 'Oswald',sans-serif;
font-size: 15px;
letter-spacing: 0.5px;
margin-left: -10px;
overflow: hidden;
padding: 10px;
position: relative;
text-align: center;
text-transform: uppercase;
z-index: 2;
}
.ie8
.nav a:before{display:none
}.ie8
.Blogtariff a{padding:10px !important
}
.Blogtariff span{
display:block;
text-align:center;
font-size:9px;
white-space:nowrap
}
.Blogtariff .Blogtariff1 a:before{background-position:center -40px
}
.Blogtariff .Blogtariff2 a:before{
background-position:center -80px
}
.Blogtariff .Blogtariff4 a:before{
background-position:center -160px
}
.Blogtariff .Blogtariff3 a:before{
background-position:center -120px
}
.Blogtariff .Blogtariff5 a:before{
background-position:center -200px
}
.Blogtariff .Blogtariff6 a:before
{background-position:center -240px
}
.Blogtariff .Blogtariff8 a:before
{background-position:center -280px
}
.home .Blogtariff .Blogtariff7 a,.single-post .Blogtariff.Blogtariff7 a,.KO .Blogtariff .Blogtariff1 a,.KO2 .Blogtariff .Blogtariff2 a,.KOpage-snippet .Blogtariff .Blogtariff2 a,.KO1.Blogtariff .Blogtariff3 a,.KO3
.Blogtariff .Blogtariff3 a,.KO4 .Blogtariff .Blogtariff4 a,.KO5 .Blogtariff .Blogtariff4 a,.post-type-archive-screenshot .Blogtariff .Blogtariff5 a,.single-screenshot .Blogtariff .Blogtariff5 a,.KO6 .Blogtariff .Blogtariff6 a,.KO7 .Blogtariff .Blogtariff8 a{color:black}
.Blogtariff li:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px}.ie8 .Blogtariff li:before{display:none}.KO1 .Blogtariff .Blogtariff3,.KO3 .Blogtariff .Blogtariff3,.Blogtariff .Blogtariff3:hover{background:#01b0ec}.KO1 .Blogtariff .Blogtariff3:before,.KO3 .Blogtariff .Blogtariff3:before{background:#0484b0}.home .Blogtariff .Blogtariff7,.single-post .Blogtariff .Blogtariff7,.Blogtariff .Blogtariff7:hover{background:#ef7901}.home .Blogtariff .Blogtariff7:before,.single-post .Blogtariff .Blogtariff7:before{background:#cf7000}.KO .Blogtariff .Blogtariff1,.Blogtariff .Blogtariff1:hover{background:#d54421}.KO .Blogtariff.Blogtariff1:before{background:#bb2904}.KO2 .Blogtariff .Blogtariff2,.KOpage-snippet .Blogtariff.Blogtariff2,.Blogtariff .Blogtariff2:hover{background:#98bf0d}.KO2 .Blogtariff .Blogtariff2:before,.KOpage-snippet .Blogtariff .Blogtariff2:before{background:#87a812}.KO4 .Blogtariff.Blogtariff4,.KO5 .Blogtariff .Blogtariff4,.Blogtariff .Blogtariff4:hover{background:#7449f1}.KO4 .Blogtariff .Blogtariff4:before,.KO5 .Blogtariff .Blogtariff4:before{background:#5531bf}.post-type-archive-screenshot .Blogtariff .Blogtariff5,.single-screenshot .Blogtariff .Blogtariff5,.Blogtariff .Blogtariff5:hover{background:#b147a3}.post-type-archive-screenshot .Blogtariff .Blogtariff5:before,.single-screenshot .Blogtariff .Blogtariff5:before{background:#922a84}.KO6 .Blogtariff .Blogtariff6,.Blogtariff .Blogtariff6:hover{background:#f6b402}.KO6 .Blogtariff.Blogtariff6:before{background:#d49b00}.KO7 .Blogtariff .Blogtariff8,.Blogtariff .Blogtariff8:hover{background:#8d8d8d}.KO7 .Blogtariff .Blogtariff8:before{background:#5e5e5e}@-webkit-keyframes nav-1{50%{background:#ef7901}}@-moz-keyframes nav-1{50%{background:#ef7901}}.home .Blogtariff .Blogtariff7{-webkit-animation:nav-1 1.5s 1s ease 1;-moz-animation:nav-1 1.5s 1s ease 1}@-webkit-keyframes nav-2{50%{background:#d54421}}@-moz-keyframes nav-2{50%{background:#d54421}}.home .Blogtariff .Blogtariff1{-webkit-animation:nav-2 1.5s 1.1s ease 1;-moz-animation:nav-2 1.5s 1.1s ease 1}@-webkit-keyframes nav-3{50%{background:#98bf0d}}@-moz-keyframes nav-3{50%{background:#98bf0d}}.home .Blogtariff .Blogtariff2{-webkit-animation:nav-3 1.5s 1.2s ease 1;-moz-animation:nav-3 1.5s 1.2s ease 1}@-webkit-keyframes nav-4{50%{background:#01b0ec}}@-moz-keyframes nav-4{50%{background:#01b0ec}}.home .Blogtariff .Blogtariff3{-webkit-animation:nav-4 1.5s 1.3s ease 1;-moz-animation:nav-4 1.5s 1.3s ease 1}@-webkit-keyframes nav-5{50%{background:#7449f1}}@-moz-keyframes nav-5{50%{background:#7449f1}}.home .Blogtariff .Blogtariff4{-webkit-animation:nav-5 1.5s 1.4s ease 1;-moz-animation:nav-5 1.5s 1.4s ease 1}@-webkit-keyframes nav-6{50%{background:#b147a3}}@-moz-keyframes nav-6{50%{background:#b147a3}}.home .Blogtariff .Blogtariff5{-webkit-animation:nav-6 1.5s 1.5s ease 1;-moz-animation:nav-6 1.5s 1.5s ease 1}@-webkit-keyframes nav-7{50%{background:#f6b402}}@-moz-keyframes nav-7{50%{background:#f6b402}}.home .Blogtariff .Blogtariff6{-webkit-animation:nav-7 1.5s 1.6s ease 1;-moz-animation:nav-7 1.5s 1.5s ease 1}@-webkit-keyframes nav-8{50%{background:#8d8d8d}}@-moz-keyframes nav-8{50%{background:#8d8d8d}}.home .Blogtariff .Blogtariff8{-webkit-animation:nav-8 1.5s 1.7s ease 1;-moz-animation:nav-8 1.5s 1.7s ease 1}
</style>
<div class='Blogtariff-wrap'>
        <nav class='Blogtariff-wrap' id='Blogtariff-wrap'>
          <ul class='Blogtariff group'>
            <li class='Blogtariff1'>
              <a href='Page URL Here?max-results=8' target='_blank'>
                Tricks
                <span>
                  To Learn
                </span>
              </a>
            </li>
            <li class='Blogtariff2'>
              <a href='Page URL Here?max-results=8' target='_blank'>
                Widget
                <span>
                  To Add
                </span>
              </a>
            </li>
            <li class='Blogtariff3'>
              <a href='Page URL Here?max-results=8' target='_blank'>
                Social
                <span>
                  To Join
                </span>
              </a>
            </li>
            <li class='Blogtariff4'>
              <a href='Page URL Here?max-results=8' target='_blank'>
                Earn
                <span>
                  Online
                </span>
              </a>
            </li>
            <li class='Blogtariff5'>
              <a href='Page URL Here?max-results=8' target='_blank'>
                Tips
                <span>
                  To Work
                </span>
              </a>
            </li>
            <li class='Blogtariff6'>
              <a href='Page URL Here?max-results=8' target='_blank'>
                How
                <span>
                  To Blog
                </span>
              </a>
            </li>
            <li class='Blogtariff7'>
              <a href='Page URL Here?max-results=8' target='_blank'>Latest<span>Trends</span></a></li>
            <li class='Blogtariff8'>
              <a href='Page URL Here?max-results=8' target='_blank'>FREE<span>Templates</span></a></li>
          </ul>
        </nav>
      </div>
      <div class='clear'/></div>