Powered by Blogger.
Showing posts with label blogger tips. Show all posts
Showing posts with label blogger tips. Show all posts

Monday 25 August 2014

Step by Step for How to add navigation menu bar for blogger

      A navigation or menu bar is a bar made up of tabs. “Behind” each of those tabs is a link -to a post page, a static page, a label page, to another website etc. Making navigation tabs is not that difficult. They are basically links with some styling added for visual appeal. While links are arranged vertically, navigation tabs are usually arranged horizontally. In this tutorial we will install the bar just below the header, a typical place for navigation bar. The bar will be added as a gadget via Page Elements page. The advantage of using a gadget is that if you want to remove it later on, it can be done easily without editing the HTML. But in order to do that, the template must have an Add A Gadget link thingy or widget container as I would call it, at that particular location. The is no such element. What do we do then? We create it. In our next tutorial we will learn how create Element just below header.

Add It To Blogger


1. Go to your Blogger Dashboard>> Layout>> and click on add a gadget .
2. Click Add A Gadget link below the header.
3. Scroll down the Add A Gadget window and select HTML/JavaScript.
4. Leave the title box empty.
5. Copy and paste the HTML code below into the content box.

<style>

#tab_menu {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBH0H_TAt_sYyHEAPTCRZWe3Pb09rYHzBRwHbfsrRoTxs778l4_QOIRt-WPovtmDvUbg5GWzf4bxXeqI3zZNQr_RZunfIs0ilsbPiOST9x05wwDcY97pkxYMDWgxctbLSknkZPO9iR8xyf/s1600/menu_bg.png) no-repeat;
 height:50px;
 width:960px;
 line-height:50px;
 list-style:none;
 margin-top:10px;
 font-size:14px;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:bold;
 overflow:hidden;
}

#tab_menu li {
 float:left;
 border-right:1px solid #FFA722;
 border-left:1px solid #CC5200;
}

#tab_menu li:first-child {
 border-left:none;
}

#tab_menu li:last-child {
 border-right:none;
}

#tab_menu li a{
 text-decoration:none;
 float:left;
 display:block;
 height:50px;
 padding:0 20px;
 color:#FFF;
}

#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
 color:#622900;
 text-shadow:1px 1px 0px #E8964B;
}

#tab_menu li a.tool{
 color:#000;
 text-shadow:1px 1px 0px #E8964B;
}

</style>


<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>

Read more...
Related Posts Plugin for WordPress, Blogger...

Random Posts

Recent Comments

Total Pageviews

Search This Blog

About Template

Digital Solutions - Technology Blog

  © Blogger templates ProBlogger Template by Ourblogtemplates.com 2008

Back to TOP