Wednesday, January 30, 2013

Vertical Hover Effect Css3 Menu Bar For Blogger

In this tutorial im gonna explain how to add vertical hover effect Css3   menu bar for your blog. You can change your  color  as your like. Im using juts  Css3 and HTML for these menu   bar.  In this tutorial You can  get my all  menu bar here


1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.


3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here */

ul li {
list-style: none;
height: 44px;
padding:10px 5px;
ul li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
color: #fff;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
li:nth-child(1) a {
border-color: #636393;
li:nth-child(2) a {
border-color: #B5222D;
li:nth-child(3) a {
border-color: #D4953C;
li:nth-child(4) a {
border-color: #609491;
li:nth-child(5) a {
border-color: #87A248;
li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul id="nav">
 <li class="home"><a href="#">Home</a></li>
 <li class="tutorials"><a href="#">Tutorials</a></li>
 <li class="about"><a href="#">Coding</a></li>
 <li class="news"><a href="#">WordPress</a></li>
 <li class="contact"><a href="#">Contact</a></li>
Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...


  1. This is just so fantastic, I will try this!

    Blog Training

  2. thanks for sharing this nice information. this post is very useful for me. brother i have a problem that i share with your contact page please ans me as soon as possible. thanks.