Add Custom Navigation Menu for Blog

Do you use Pages, link list or your own custom header menu for labels as its very important and used by all blogs and site we too have created a custom top header menu which is simple and looks clean for your sites. If you still don't have one and don't like to use pages or waiting for a simple header menu then we have it for you. This top header menu is created using CSS and HTML code.

Adding Custom Nav Header Menu:-

1. Go to your Blogger Template

2. EDIT HTML and Find ]]></b:skin> tag in your template

3. You need to add the below CSS code before the </b:skin> tag

#top-header div.menu {
min-width: 1000px;
display: block;
height: 2.5em;
margin: 0;
padding: 0;
background-color: #162336;
}

#top-header ul.menu {
width: 1000px;
margin: 0 auto;
display: block;
}
#top-header ul.menu li {
font-weight: bold;
float: left;
margin: 0;
padding: .65em 0;
list-style-image: none;
list-style: none;
}
#top-header ul.menu li a:hover {
text-decoration: none;
color: #80c8e5;
}
#top-header ul.menu a {
padding: 0 .94em;
color: white;
font-size: 93%;
border-right: 1px solid #2A3659;
}
.container {
overflow: hidden;
width: 100%}

.menus {
border-left: 1px solid#2A3659;
}

4. Now find <body> tag in your template and add the HTML code below it or you can go to Layout Add HTML/Javascript gadget and paste the below code inside it.

<div id='top-header'>
<div class='menu'>
<div style='margin:0 auto; width:1000px;height: 2.5em;'>
<ul class='menu'><span style='color:skyblue'><li><data:blog.pageTitle/></li></span>
<li><a class='menus' href='URL 1' title='Blogger-Tutorials'>Tutorials</a></li>
<li><a href='URL 2' title='Tips'>
Tips</a></li>
</ul>
</div>
</div>
</div>

5. Now save your template and your done.

Note:- Backup your template before adding code, Change the URL with your link to add more label use the <li> tag add add more labels to your menu.

Pages

Tuesday, August 26, 2014

Add Custom Navigation Menu for Blog

5 comments: