Earlier I have shared with you
many CSS menu to make your template awesome and user friendly. We know there is
not any alternative of navigation to make your template user friendly because
it helps to find topic under different categories. As a result a visitors can
go their desired post easily. From many days I have received email from some of
my loyal readers they want the source code of this animated super menu. So due
to huge request I have finally going to reveal the source code thus you can add
this menu in your blog. It helps to make your blog attractive. This menu works
simple but already added hover effect pre category. Whenever your visitors will
mouse over then it will change the background color. You can add maximum 8 category
with 8 different hover color. This menu
created with pure CSS coding which is fast loading and it won't affect on your
browser loading time. You can Install it in 2 methods.
Method 1
Step 1 Log in to your Blogger Account and
Go to your Blogger Dashboard
Step 2 Click on
Now click on -> Template -> Edit HTML->
Unfold code ►
Step 3 Now Find this code ]]></b:skin> by Pressing Ctrl + F
Step 4 Paste the below code
Before/above ]]></b:skin> and
Save the templates.
<style>
/*Anim Super Menu by www.bloggerspice.com */
.BloggerSpice{list-style:none}
BloggerSpice-wrap{margin: 19px 0 0 0
}.ie8 .BloggerSpice-wrap{margin:0}
.BloggerSpice 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
}
.BloggerSpice 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;
}
.BloggerSpice 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
.BloggerSpice a{padding:10px !important
}
.BloggerSpice span{
display:block;
text-align:center;
font-size:9px;
white-space:nowrap
}
.BloggerSpice .BloggerSpice1 a:before{background-position:center -40px
}
.BloggerSpice .BloggerSpice2 a:before{
background-position:center -80px
}
.BloggerSpice .BloggerSpice4 a:before{
background-position:center -160px
}
.BloggerSpice .BloggerSpice3 a:before{
background-position:center -120px
}
.BloggerSpice .BloggerSpice5 a:before{
background-position:center -200px
}
.BloggerSpice .BloggerSpice6 a:before
{background-position:center -240px
}
.BloggerSpice .BloggerSpice8 a:before
{background-position:center -280px
}
.home .BloggerSpice .BloggerSpice7 a,.single-post .BloggerSpice.BloggerSpice7 a,.BS .BloggerSpice .BloggerSpice1 a,.BS2 .BloggerSpice .BloggerSpice2 a,.BSpage-snippet .BloggerSpice .BloggerSpice2 a,.BS1.BloggerSpice .BloggerSpice3 a,.BS3
.BloggerSpice .BloggerSpice3 a,.BS4 .BloggerSpice .BloggerSpice4 a,.BS5 .BloggerSpice .BloggerSpice4 a,.post-type-archive-screenshot .BloggerSpice .BloggerSpice5 a,.single-screenshot .BloggerSpice .BloggerSpice5 a,.BS6 .BloggerSpice .BloggerSpice6 a,.BS7 .BloggerSpice .BloggerSpice8 a{color:black}
.BloggerSpice li:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px}.ie8 .BloggerSpice li:before{display:none}.BS1 .BloggerSpice .BloggerSpice3,.BS3 .BloggerSpice .BloggerSpice3,.BloggerSpice .BloggerSpice3:hover{background:#01b0ec}.BS1 .BloggerSpice .BloggerSpice3:before,.BS3 .BloggerSpice .BloggerSpice3:before{background:#0484b0}.home .BloggerSpice .BloggerSpice7,.single-post .BloggerSpice .BloggerSpice7,.BloggerSpice .BloggerSpice7:hover{background:#ef7901}.home .BloggerSpice .BloggerSpice7:before,.single-post .BloggerSpice .BloggerSpice7:before{background:#cf7000}.BS .BloggerSpice .BloggerSpice1,.BloggerSpice .BloggerSpice1:hover{background:#d54421}.BS .BloggerSpice.BloggerSpice1:before{background:#bb2904}.BS2 .BloggerSpice .BloggerSpice2,.BSpage-snippet .BloggerSpice.BloggerSpice2,.BloggerSpice .BloggerSpice2:hover{background:#98bf0d}.BS2 .BloggerSpice .BloggerSpice2:before,.BSpage-snippet .BloggerSpice .BloggerSpice2:before{background:#87a812}.BS4 .BloggerSpice.BloggerSpice4,.BS5 .BloggerSpice .BloggerSpice4,.BloggerSpice .BloggerSpice4:hover{background:#7449f1}.BS4 .BloggerSpice .BloggerSpice4:before,.BS5 .BloggerSpice .BloggerSpice4:before{background:#5531bf}.post-type-archive-screenshot .BloggerSpice .BloggerSpice5,.single-screenshot .BloggerSpice .BloggerSpice5,.BloggerSpice .BloggerSpice5:hover{background:#b147a3}.post-type-archive-screenshot .BloggerSpice .BloggerSpice5:before,.single-screenshot .BloggerSpice .BloggerSpice5:before{background:#922a84}.BS6 .BloggerSpice .BloggerSpice6,.BloggerSpice .BloggerSpice6:hover{background:#f6b402}.BS6 .BloggerSpice.BloggerSpice6:before{background:#d49b00}.BS7 .BloggerSpice .BloggerSpice8,.BloggerSpice .BloggerSpice8:hover{background:#8d8d8d}.BS7 .BloggerSpice .BloggerSpice8:before{background:#5e5e5e}@-webkit-keyframes nav-1{50%{background:#ef7901}}@-moz-keyframes nav-1{50%{background:#ef7901}}.home .BloggerSpice .BloggerSpice7{-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 .BloggerSpice .BloggerSpice1{-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 .BloggerSpice .BloggerSpice2{-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 .BloggerSpice .BloggerSpice3{-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 .BloggerSpice .BloggerSpice4{-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 .BloggerSpice .BloggerSpice5{-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 .BloggerSpice .BloggerSpice6{-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 .BloggerSpice .BloggerSpice8{-webkit-animation:nav-8 1.5s 1.7s ease 1;-moz-animation:nav-8 1.5s 1.7s ease 1}
</style>
Step 5 Now Find <div
id='header-wrapper'> by Pressing Ctrl + F
Step 6 Paste the below code after/below
<div id='header-wrapper'>
------Other
Code---------
<!--end header-wrapper-->
>>Paste the below code here<<
<div class='BloggerSpice-wrap'>
<nav class='BloggerSpice-wrap' id='BloggerSpice-wrap'>
<ul class='BloggerSpice group'>
<li class='BloggerSpice1'>
<a href='Category URL HERE?max-results=8' target='_blank'>
Tips
<span>
To Learn
</span>
</a>
</li>
<li class='BloggerSpice2'>
<a href='Category URL HERE?max-results=8' target='_blank'>
Tricks
<span>
Apply
</span>
</a>
</li>
<li class='BloggerSpice3'>
<a href='Category URL HERE?max-results=8' target='_blank'>
Widgets
<span>
For Blog
</span>
</a>
</li>
<li class='BloggerSpice4'>
<a href='Category URL HERE?max-results=8' target='_blank'>
SEO
<span>
Tips
</span>
</a>
</li>
<li class='BloggerSpice5'>
<a href='Category URL HERE?max-results=8' target='_blank'>
Make
<span>
Money
</span>
</a>
</li>
<li class='BloggerSpice6'>
<a href='Category URL HERE?max-results=8' target='_blank'>
Backlinks
<span>
Building Tips
</span>
</a>
</li>
<li class='BloggerSpice7'>
<a href='Category URL HERE?max-results=8' target='_blank'>Facebook<span>Tricks</span></a></li>
<li class='BloggerSpice8'>
<a href='Category URL HERE?max-results=8' target='_blank'>Templates<span>For Free</span></a></li>
</ul>
</nav>
</div>
<div class='clear'/></div>
Step 7 and finally Save the templates.
Customization
- Change Category URL HERE with your label or category URL
- Change max-results=8 to set how many post you want to show per label or category
Method 2
Step 1 Log in to your Blogger account and Go to
your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Gadget"
then select "HTML/JavaScript" Gadget.
Step 4 Now Copy the all code from Step 4 and Step 6 and paste it in "HTML/JavaScript" Gadget and Save it.
Step 5 Place gadget below header. that's
it.
If you feel any problem then feel free to leave a comment
below. I will reply you as soon as possible.
thanks ........thanks..........for this menu.......i was eagerly waiting for this menu..........and one more thing brother ...see my blog i have placed it down like you but i want it to be fit in full width of my template......and i want the black color like you have around the template.....thanks
keren sob, tapi banyak bgt script nya..
Comment back ya..
http://dedy-suna.blogspot.com/
bro this is little bit tricky..plz check the code width:12.5%;
and you have to change 12.5% to 12.7% or 12.8% according to your blog wide.
i have tried this but not working it is coming down please help
this menu is very sensitive but you can remove or change background color of the menu...
background:#000000;
delete this code or change the background color with your own template background..then it won't show extra color.
Thank you bro but this menu looks great in black color only ....and by the way i want to ask you please don't say no ... I want you to design my blog logo i know you don't have time but please for me give some time...
bro this is the only one field that I am weak. Even my logo is not beautiful..Recently I am so much busy on designing 2 blogger templates and not getting enough time to make post on my own blog.Its better take help from any graphics designer.
its ok bro i understand.............and bro please help me ....i want a orange or blue border around my footer ....please help me.....
I could not put it in the template you made the yellow BS mag
there is a solution?
sorry for bad english this translate