How to add Pepsi style naviagtion menu to blogger. 0

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 ]]</b:skin> by CTRL+f key.

* Now copy below code and paste before ]]</b:skin>

 #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.

<div id="menu">
<ul class="nav">
<li class="last"><a class="home" href="YOUR BLOG URL HERE/"> <img alt="IconsPedia.com" height="27" src="http://iconpedia.net/common/images/home_bg.gif" width="25" /></a></li>
<li><a href="TAB1 URL hERE">TAB1 TITLE HERE</a></li>
<li><a href="TAB2 URL HERE">TAB2 TITLE HERE</a></li>
<li class="last"><a class="last_hover" href="TAB3 URL HERE">TAB3 TITLE HERE</a></li>
</ul>
<ul class="links">
<li> 
            
             
            
            <script type="text/javascript">
var addthis_pub="ewallpapers";
</script><a href="http://www.addthis.com/bookmark.php?v=20" onclick="return addthis_sendto()" onmouseout="addthis_close()" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')"><img alt="Bookmark and Share" height="20" src="http://iconpedia.net/common/images/share.jpg" width="65" /></a><script src="http://s7.addthis.com/js/200/addthis_widget.js" type="text/javascript">
</script> 
            
             
            
          </li>

</ul>
</div>

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.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: How to add Pepsi style naviagtion menu to blogger. ~