How to add Orangy navigation menu in blogger/blogspot. 0

| | ,

How to add Orangy navigation menu in blogger/blogspot.

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

* First go to your blogger Dashboard.

* Now click in design Tab and edit HTML.

* Click in small box to expand your blogger Template.

* After Above step find this code ]]</b:skin> By CTRL+F key.

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

#menu_wrapper {
width: 100%;
background: url( no-repeat top center;
#menu {
width: 980px;
height: 40px;
margin: 0 auto;
ul.navigation {
width: 800px;
list-style: none;
margin: 0 auto;
padding: 0;
ul.navigation li {
display: inline;
margin: 0px;
padding: 0;
ul.navigation a {
float: left;
display: block;
height: 40px;
padding: 8px 15px 0;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-decoration: none;
text-align: center;
ul.navigation a:hover, ul.navigation a.selected {
background: url( repeat-x top center;
color: #FFFF00;
ul.navigation a:focus {
outline: none;

* 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 blogger sidebar.

* 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='menu_wrapper'>
<div id='menu'>
<ul class='navigation'>
<li><a class='selected' href='TAB1 URL HERE'>TAB1 TITLE HERE<span class='ui_icon home'></span></a></li>
<li><a href='TAB2 URL HERE'>TAB2 TITLE HERE<span class='ui_icon aboutus'></span></a></li>
<li><a href='TAB3 URL HERE'>TAB3 TITLE HERE<span class='ui_icon services'></span></a></li>
<li><a href='TAB4 URL HERE'>TAB4 TITLE HERE<span class='ui_icon gallery'></span></a></li>
<li><a href='TAB5 URL HERE'>TAB5 TITLE HERE<span class='ui_icon contactus'></span></a></li>

NOTE:- Remove Highlighted Text in above code with your own ok

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

* Now again click to save button and you are done. Cheers

StumpleUpon DiggIt! Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: How to add Orangy navigation menu in blogger/blogspot. ~ Twitter FaceBook

0 Responses So Far:


Select Your Categories