1. Go to your Blogger Dashboard.
2. Design.
3. Edit HTML.
4. Find the tag ]]>< /b:skin> in your template and place the below code just above it. To be the lesser arrangement the code above looks like the below.
|
#SubNavbar {background:#00a0ff; width:1400px; height:35px; color:#fff; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border:1px solid #fff;} #SubNavbarleft {width:700px; float:left; margin:0; padding:0;} #search {width:240px; font-size:12px; float:right; margin:0; padding:0;} #touch {margin:0; padding:0;} #touch ul {float:left; list-style:none; margin:0; padding:0;} #touch li {list-style:none; margin:0; padding:0; text-shadow:1px #333;} #touch li a, #touch li a:link, #touch li a:visited {color:#eee; display:block; text-transform:uppercase; margin:0; padding:10px 15px; font:bold 12px Arial, Times New Roman;} #touch li li a:hover, #touch li li a:active {background:#888; color:#fff; padding:5px 10px;} #touch li {float:left; padding:0;} #touch li ul {z-index:888; position:absolute; left:-888em; height:auto; width:150px; margin:0; padding:0;} #touch li ul a {width:120px;} #touch li ul ul {margin:-24px 0 0 170px;} #touch li:hover ul ul, #touch li:hover ul ul ul, #touch li.sfhover ul ul, #touch li.sfhover ul ul ul {left:-888em;} #touch li:hover ul, #touch li li:hover ul, #touch li li li:hover ul, #touch li.sfhover ul, #touch li li.sfhover ul, #touch li li li.sfhover ul {left:auto;} #touch li:hover, #touch li.sfhover {position:static;} #searchbox {padding:0; margin:0;} #search input {background:#fff; color:#333; float:left; margin:5px 0px; width:150px; padding:5px; border:1px solid #ccc; font:normal 12px arial, verdana, Times New Roman;} #search .button {background:#333; color:#fff; font-size:12px; margin:5px 0 0 5px; padding:5px; width:30px; cursor:pointer; border:1px solid #888;} #top {background:#fff; margin:10px auto 0; padding:10px; width:1400px; border:1px solid #ccc; word-wrap: break-word; overflow:hidden; font-size:12px;} #top a, #top a:visited {font-weight:normal; color:#00a0ff; text-decoration: none;} #top a:hover {color:#f0f0f0; text-decoration:underline;} #top p {font-size:12px; font-weight:bold; padding:0; margin:0;} .topleft {width:600px; float:left; margin: 0; padding:0;} .topleft img a, .topleft img {border:1px solid #ccc; margin:0; padding:0;} .topright {width:800px; float: right; margin:0; padding:0; text-transform:normal;} |
5. Find the code < div id='header'> in your template and put the below code above it (or above the < div id='content-wrapper'> if you want this Navbar to show above your Outer Wrapper).
To be the lesser arrangement the above code looks like the following.
|
<div id='SubNavbar'> <div id='SubNavbarleft'> <ul id='touch'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='[Main Menu Url 1]'>[Main Menu Anchor 1]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> </ul></li> <li><a href='[Main Menu Url 2]'>[Main Menu Anchor 2]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> </ul></li> <li><a href='[Main Menu Url 3]'>[Main Menu Anchor 3]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> <li><a href='[Submenu Url 4]'>[Submenu Anchor 4]</a></li> </ul></li> <li><a href='[Main Menu Url 5]'>[Main Menu Anchor 5]</a> <ul><li><a href='[Submenu Url 1]'>[Submenu Anchor 1]</a></li> <li><a href='[Submenu Url 2]'>[Submenu Anchor 2]</a></li> <li><a href='[Submenu Url 3]'>[Submenu Anchor 3]</a></li> <li><a href='[Submenu Url 4]'>[Submenu Anchor 4]</a></li> <li><a href='[Submenu Url 5]'>[Submenu Anchor 5]</a></li> </ul></li> </ul></div> <div id='search'> <form action='/search/' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <input class='button' type='submit' value='Search'/> </form></div></div> |
0 comments:
Post a Comment