Best Blogger Tips

How to add Pepsi style naviagtion menu to blogger.

Share

Hello everybody add this special pepsi style navigation menu in your blogger blog easily ---->>>>

PREVIEW:-




Follow simple and easy step to adding this special menu in your blogger blog---->>>>

* First go to your blogger Dashboad.

* Now click in desing tab and edit HTML.

* Now find this code ]] by CTRL+f key.

* Now copy below code and paste before ]]

 #menu  {
float : left;
width : 962px;
height : 47px;
background : url('http://santabanta.mywapblog.com/files/menu-bg.gif') no-repeat 0% 0%;
}
#menu ul.nav {
float : left;
width : 645px;
height : 43px;
list-style : none;
}
#menu ul.nav li {
float : left;
font-size : 14px;
line-height : 43px;
padding-right : 2px;
text-transform : uppercase;
background : url('http://santabanta.mywapblog.com/files/menu-sep.gif') no-repeat right 0%;
}
#menu ul.nav li.last {
background : none;
}
#menu ul.nav li a {
float : left;
width : auto;
padding : 0 22px;
color : #fff;
text-decoration : none;
}
#menu ul.nav li a.home {
float : left;
width : 73px;
padding : 0;
text-align : center;
}
#menu ul.nav li a.home:hover {
background : none;
}
#menu ul.nav li a.home img {
margin-top : 3px;
}
#menu ul.nav li a:hover {
background : url('http://santabanta.mywapblog.com/files/hover.gif') no-repeat center 0%;
}
#menu ul.nav li a:hover.last_hover {
background : url('http://santabanta.mywapblog.com/files/hover-last.gif') no-repeat center 0%;
}
#menu ul.links {
float : left;
width : 314px;
height : 33px;
padding-top : 10px;
list-style : none;
}
#menu ul.links li {
float : left;
width : auto;
padding-left : 18px;
}
#menu ul.links li .left {
float : left;
padding-right : 5px;
}
#menu ul.links li .right {
float : left;
}
#menu ul.links li img {
float : left;
}
#menu ul.links li a {
float : left;
color : #fff;
cursor : pointer;
font-size : 10px;
line-height : 12px;
text-transform : uppercase;
text-decoration : none;
}
#menu ul.links li a:hover {
text-decoration : underline;
}

* Now click to save your blogger Template .

* Again go to your blogger Dashboard and click in design tab.

* Now you are here---->>>> Page Element.

* Click in add Gadget which is in your blog sidebar.

* When open new window click in HTML/javascript from list.

* Now when open new blank box copy below code and paste in blank box.


NOTE:- Remove highlighted text with your own ok.

* Now click to save your HTML/javascript and drag and drop this element below header.

* Now again click in save button now you are done.

0 comments:

Post a Comment