Read More:
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
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>
Code Customization
- Replace Page URL Here with your label or category URL
- Change max-results=8 value with your choice value to show category posts
Now Save Widget and Template to view your experiment
That’s done
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments