Now add best blue star navigation menu in your blogger blog by simple step.
Follow simple and easy step to adding this blue naviagtion menu in blogger blog---->>>>
* First go to your blogger Dashboard.
* Click in design tab and edit HTML.
* Click in small box to expand your blogger template.
* Now find this code ]]</b:skin> By CTRL+F key.
* Copy below code and paste before ]]</b:skin>
Follow simple and easy step to adding this blue naviagtion menu in blogger blog---->>>>
* First go to your blogger Dashboard.
* Click in design tab and edit HTML.
* Click in small box to expand your blogger template.
* Now find this code ]]</b:skin> By CTRL+F key.
* Copy below code and paste before ]]</b:skin>
#blog-wrapper {
margin: 0 auto; /* auto - to make the template lay in the screen center */
padding: 7px;
margin-top: 0px;
margin-bottom: 15px;
text-align: center;
position: relative;
width: 980px;
background: #f1f1f1;
border: 3px solid #f8f8f8;
}
#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 978px;
position: relative;
background: #1561a1;
border: 1px solid #172d40;
}
#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: normal bold 61% Arial, sans-serif;
color: #ffffff;
text-transform: uppercase;
border-right: 1px solid #0d3b62;
border-left: 0px solid #0d3b62;
}
#linkbar a:hover {
color: #ffffff;
background: #1e88e2;
}
* Now save your blogger template.
* Again go to your blogger dashboard.
* Click in design tab and you are here now--->>> Add new element.
* Click in add gadget which is below blogger header and when open new window click in HTML/javascript from list.
* When open new blank box copy below code and paste in blank box.
<div id='blog-wrapper'> <div id='linkbar-wrapper'> <div class='linkbar section' id='linkbar'><div class='widget LinkList' id='LinkList1'> <h2>Linkbar</h2> <div class='widget-content'> <ul> <li><a href='YOUR BLOG URL HERE'>HOME</a></li> <li><a href='YOUR TAB1 URL'>TAB1 TITLE</a></li> <li><a href='YOUR TAB2 URL'>TAB2 TITLE</a></li> <li><a href='YOUR TAB3 URL'>TAB3 TITLE</a></li> <li><a href='YOUR TAB4 URL'>TAB4 TITLE</a></li> <li><a href='YOUR TAB5 URL'>TAB5 TITLE</a></li> </ul> <div class='clear'></div>
NOTE:- Change Highlighted text in above code with your own ok
* Now save your HTML/Javascript code and you are now done.
|
0 Responses So Far: