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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_OP1X1qqdggXrHee_GsrPWQfhaQSLB4po6ofGnBGjOkzL1xPg0wqkb3Cp3WJOppeZIK9BzxiDvpEVpeqXhB34_I5_N4ORipthV_6FFQcBwjMXNE_XAGh1gP_TmTbdHBRxpLwnK0J0sOk/s1600/buymythemes.com_menu.png) 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 {
margin-left:10px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXZWt_G3VLH3Mt0CcwG8YD4qZOZ4J-joiPQ6aft5ioWX6FAVrmoJP7limOikbpMURXnOqAauSyQdT1IKpS5QUjO7vnxmdTtpsdH-SgrrB1MTg_YOn4JYFV4OAwvvtoRg9o1zqpmUoPrTH/s1600/buymythemes.com_menu_hover.png) 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> </ul> </div> </div>
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
|
0 Responses So Far: