add Awesome navigation or tabs menu in Blogger blog

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.

 

Update:- 11 November 2013… Version 2.0 Available.

 

Live Preview

 

Add It To Blogger

 

1. Go to your Blogger Dashboard>> Layout>> and click on add a gadget (Just Below Header Like Screen Shot.)

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/AVvXsEhecbfqQkvMlHCytvTtFb2UdlsERqPNRdBwwr01o362dMovQqQJ-EVeXQv-oFg28bskZNo5-zXrdiCnCYqgFdF0xsSyatdaWgxzCJH_1APtrysUbb0oexNsx2YegAh7B1pSM-n9FzchG9DO/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>

6. Replace “#” with the URL of your destination page or blog.  

7. You can get the URL of a page by copying the content of your browser’s address/URL bar while you are on that page.  
8. To show all posts under a label (category), you need to link to the label’s page.

9. To change the width of the menu edit width: 960px.

 

Update:- 20-06-2013 Background Option Added

 

1.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSl3BwW2V22DM8ap4TCl66y7o_k4wXsZDK-JU6CQinzx8q3_Gi_gQfIwD2E5VDR_FWzCxjorTi3puY8v6jiv1bCoj2AiNs6ArYQ2rl2-jRHALzpGcOs1JZ-NQ5Wq6EOfUuMlpfJZsF1pA/s1600/menu_bg_1.png

2.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHfdUX_03w7E3eNZ9CKI5OXkanag-xpvX_PEuv8ET3Vt_DP-fOXIwBlOQwFqkQLxchjY3f3sprx1T_0ACLEA3L4RoBxXOJlCcJ4RaxMZ8CVfmEIaEEYw3hT_Fiz2DVuwwJ_NtWEzIEmRx0/s1600/menu_bg_2.png

3.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMkvliuBbkkbOwg2VeZm0zzRaMPL7wp3-u1QVAquuklYEiSEkHZvXHxvktve3hWEMXDvaX3Dh9WJ9fNtpb0T56hJXbzo5zasBeOpuTex2l89sOl0Gkqk3tLI_tBOU9SyE5MkCjYs4SWSFX/s1600/menu_bg_3.png

4.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdWJ5Krv1O9IU-kEGuMHqdsSZrcuXrcuApbim_zc922-RZmu8KTV0WgnJwcllXX9B3-kWF8sp2yyPVh48pL9qrZ8VRC0Z-zBxqT3VFxPBDejWfKtrgsbYEyPgZmpbqEJInGJgEvzo0Cyp/s1600/menu_bg_4.png

5.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS9H2v7T4uICwuZstHfeS1ucxHRwW9rDTQAq0Wn3QC-J64lgaFSGGmRlwrMduIlfHzafcDMvIqAYQ4Z2bSeqn4PKFrrc9FkwkgN0iahJ_13uFDy_QYy5WyKUyE-LlbdkSqlsGbsFmm7x5M/s1600/menu_bg_5.png

6.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwsmX6rvewkDOo0xltFYZmTUAorfCJpoLD45Vjp6NxsRRM_4pF0Rl2_7fMML42t_3cyZ2jYqoYn1m6f9LU45C4Su2g5-xJL_iJb9Ky29wqc2wyO4WzcYSEwdjOm2jQpn8IuE55DvONr1Sm/s1600/menu_bg_6.png

7.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiowbvqHmLtAZ0unhytr8XZkf7Rt0w5YYImdP-FkMgERETHs7YJjvHHCfEg9SJ0viCJMjPSAvIFW178T9MkdMfCeoAbqjSgY_ATF4TjsVG1PqtYL8jhdNGqUPeUSgdQu8dm1wTkMBCpBoN7/s1600/menu_bg_7.png

8.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNVIxMr_hZb92PPWTgTcu4E_GqWcvkEEZZzL0jeL4hqOgkOFl5W6eRcnDtCMBGjxvucqD_UdR-xAxduhJUEn3-zpjqwBh4soI11BlmtUUhDnlJ3iR1mQL2dqxYKhsyF7FepxbYAWy5sHa/s1600/menu_bg_8.png

9.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-fBXYkuqyxb2DB9bLHsJ0vV36Jr0pETlv29gn8yhRy2bkaMs6_jXmRPL5p5KueHCkgJpjguQ9MslnSAoZrV2uwLESL_GOTFrQiu9gZEyeTZaEmitsAFezCnLgseYB5EPPxdfa5C3VLbs/s1600/menu_bg_9.png

10.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZH6N7VF7umsIxbLACQR5DNYJnneskBEtrGCOeMd13Mgu0m9d_edpOq7WK3_nLao5Lc2Dkg4AwlxHgiPnpeESrG9pl6CWoxM6SZLQSIZOIjtf-pZ-SXOSi7LelnRrNCCqa9MNQFPlVcN4/s1600/menu_bg_10.png

Just Replace highlighted background URL with any background which you want to add in menu.

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhecbfqQkvMlHCytvTtFb2UdlsERqPNRdBwwr01o362dMovQqQJ-EVeXQv-oFg28bskZNo5-zXrdiCnCYqgFdF0xsSyatdaWgxzCJH_1APtrysUbb0oexNsx2YegAh7B1pSM-n9FzchG9DO/s1600/menu_bg.png) no-repeat;

For any further help please feel free to post your queries in the comment box below. Please do not hesitate to ask questions, we love responding! Its Very Handy, Light weight and Professional Tab Menu. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates.

Enjoy!