This helps in easy navigation across your blog/site. The reader will have a wide variety of choice and will stay on your site or blog for a longer time. This also helps in categorizing your blog posts according to their category or genre. http://codezila.blogspot.com/
Follow the following steps and its all done... very easy indeed.
http://codezila.blogspot.com/
- Login to your blogger account and go to LAYOUT & then PAGE ELEMENTS (default)
- Now click on EDIT HTML and check " "
- Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "Inner layout" to find "/* Inner layout */" inside "
- Paste the following code after "/* Inner layout */" :
- Now Uncheck " " at the top right.
- Use Browser Text Search Feature using shortcut "Ctrl+F" and type in "header-wrapper" to find
div id="header-wrapper" - Now before this header div ends , paste the following code after /b:section
<!--navigation links-->
<div id='navigation'>
<div id='navbar_link'>
<ul>
<li class='1ST'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='url1'>Link Title</a></li>
<li><a href='url2'>Link title2</a></li>
<li><a href='url3'>link title 3</a></li>
<!-- add as many links as you want -->
</ul>
</div><!-- end of navbar_link -->
</div><!-- end of navbar --> - Replace the url1/url2/... with your own links and Link Title1/2/3.... with your link title.
- Save the Template. Its All Done. You can see the green navigation bar as shown above.
- Having problem with the code? feel free to ask through below comment area.
- enjoy a new look to your blog or site.
/****** Top Navigation ******/
#topnav {width: 100%;
height: 20px;
text-align: right;
font-size: 0.7em;
color: #999999;
float: right; }
#topnav img {
border: none;
padding: 5px; }
/****** Navigation ******/
#navigation {
width: 100%;
background:
url(http://1.bp.blogspot.com/_3SdVQe5mP8U/Sssg9YVGb_I/AAAAAAAALfE/7QSG50RJYnM/s320/menu_button.JPG) repeat-x;
height: 35px;
/* border-top: ##58b2eb solid 1px; */
margin-bottom: 2px;}
#navbar_link {
height: 34px;
float: left; }
#navigation #navbar_link ul {
float: left;
height:34px;
width: 100%;
list-style-type: none; }
#navigation #navbar_link ul li {
display: inline; }
#navigation #navbar_link ul li a {
padding: 0px 15px;
color: #ffffff;
text-decoration: none;
line-height: 1.7em;
float: left;
border-right: 2px solid #0c5684;
text-decoration: none;
font-size: 1em;
font-weight: bold;
}
#navigation #navbar_link a:hover {
text-decoration: none;
border-right: 1px solid #0c5684;
color: #FFFFFF;
background: #ddd
url(http://2.bp.blogspot.com/_3SdVQe5mP8U/Sssf0YtHOyI/AAAAAAAALe8/H9Gh5b9Dn90/s320/menu_button.JPG) repeat-x;
}
.1ST a {
background: url(http://2.bp.blogspot.com/_3SdVQe5mP8U/Sssel0xFZRI/AAAAAAAALe0/Mm9U_ETVHeQ/s320/menu_button.JPG) repeat-x;
}
