Gloss CSS Navigation menu for blogger
Follow simple and easy step to adding this stylish menu to your blog --->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger Template.
* Now find this code </head> by CTRL+F key easily.
* Copy below code and paste before </head>
Follow simple and easy step to adding this stylish menu to your blog --->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click in small box to expand your blogger Template.
* Now find this code </head> by CTRL+F key easily.
* Copy below code and paste before </head>
<style type="text/css">
/* CSS Document */
.redrhm1{
width:580px;
height:64px;
background:url(http://santabanta.mywapblog.com/files/rhm1-bg.gif) repeat-x;
}
.redrhm1-left{
background:url(http://santabanta.mywapblog.com/files/rhm1-l.gif) no-repeat;
width:15px;
height:64px;
float:left;
}
.redrhm1-right{
background:url(http://santabanta.mywapblog.com/files/rhm1-r.gif) no-repeat;
width:15px;
height:64px;
float:right;
}
.redrhm1-bg{
background:url(http://santabanta.mywapblog.com/files/rhm1-bg.gif) repeat-x;
height:64px;
}
.redrhm1-bg ul{
list-style:none;
margin:0 auto;
}
.redrhm1-bg li{
float:left;
list-style:none;
}
.redrhm1-bg li a{
float:left;
display:block;
color:#ffe8cc;
text-decoration:none;
font:12px 'Lucida Sans', sans-serif;
font-weight:bold;
padding:0 0 0 18px;
height:64px;
line-height:40px;
text-align:center;
cursor:pointer;
}
.redrhm1-bg li a span{
float:left;
display:block;
padding:0 32px 0 18px;
}
.redrhm1-bg li.current a{
color:#fff;
background:url(http://santabanta.mywapblog.com/files/rhm1-hover-l.gif) no-repeat left 5px;
}
.redrhm1-bg li.current a span{
color:#fff;
background:url(http://santabanta.mywapblog.com/files/rhm1-hover-r.gif) no-repeat right 5px;
}
.redrhm1-bg li a:hover{
color:#fff;
background:url(http://santabanta.mywapblog.com/files/rhm1-hover-l.gif) no-repeat left 5px;
}
.redrhm1-bg li a:hover span{
color:#fff;
background:url(http://santabanta.mywapblog.com/files/rhm1-hover-r.gif) no-repeat right 5px;
}
</style>
* 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 choose HTML/javascript from list.
* When open new Blank box copy below code and paste in blank box.
<div class="redrhm1"> <div class="redrhm1-right"></div> <div class="redrhm1-left"></div> <div class="redrhm1-bg"> <ul> <li class="current"><a href="ADD HERE YOUR BLOG URL"><span>Home</span></a></li> <li><a href="TAB1 URL HERE"><span>TAB1 TITLE HERE</span></a></li> <li><a href="TAB2 URL HERE"><span>TAB2 TITLE HERE</span></a></li> <li><a href="TAB3 URL HERE"><span>TAB3 TITLE HERE</span></a></li> </ul> </div> </div>
NOTE:- Remove Highlighted text from above box with your own ok.
* Now click to save your HTML/javascript and after saving this element Drag And Drop this element below blogger Header ok And again click to save button.
* Now you are done........CHEERS
|
0 Responses So Far: