Slide show

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.



Add It To Blogger


1. Go to your Blogger Dashboard>> Layout>> and click on add a gadget (Just Below Header Like Screen Shot.)
how to a  add 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/AVvXsEjSu-AGQFq9dU0G2do0tkUpiTfHMoSj5UN3JXuOYgvZixc3HOMTcwFOGGHEao2l2RT6twO1H5ua_ZpaJgMuX2pQGFoP2tfEEP_RE4jvrGpFg6QusDHa6-o6_awD4lKgBTiafiP2Bp2kpQqT/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.
menu_bg_1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM5hdRbw1WXBOrUSDR0t4RJcQAeJYvfJFBLAEMivV5rXSA1O95rC_KWmFuvDSzzecQLZq9DYgT6_odHyEtlKjZtN35WKrSGvQsd_8dOF2O9RhFD8r4N5BB3VljoImVcG9l8cyVUTwCs9jP/s1600/menu_bg_1.png
2. menu_bg_2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggPmcw4pXhXeP-S5Yu_2VMCdnBwoD07WdlGbHiVI4DhepuiQuVifa79aNl0A9SpMLEqh_2RvShk9X1B49Tp6AirRW2T28IvWm7i48QDBr6XgDA2OsUxkn6XUwq1m28Hawg7PHb0t2lVnD2/s1600/menu_bg_2.png
3. menu_bg_3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2Q_Flwl-IkoStb2e5p4SXBxcEApmELhmJnZit-ZJG1SzE1B8D7IKOG2GiPRcMC9re5me_Qsltr3C5hP8VAu-nqalgYDd5AdaNadXQPDwYZ8uPHwoXCqTWN9tuJsA0-njxZ5lcqw6vecu/s1600/menu_bg_3.png
4. menu_bg_4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqj72W-0oYFswMQUts_AUImpVF5UFhbhBM7rJbyZyJRQO9WaT314Jrcy5o_dtEnjhvzRx0Y98CHRGCuVjX_l0tkqznJdyGB-4ZiJref5bzjfRyDND7ge4dQ3QOONVZOBwNPPO6PcxAERL/s1600/menu_bg_4.png
5. menu_bg_5
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBry6rHmuAwPH6UtXBJ_vqAoCLonLFv6hTx5rwFkd5bYh49ZBN_M-SV7TvfHvp0_ah22D77i2_FxHiS7X6HBvsJwasDFLRvST27rN-aEzFgK6plthE05Al8UynM4-JMfnvdDxIrDJQLLR/s1600/menu_bg_5.png
6. menu_bg_6
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9WIXHQALTusLuYFsMfHuMw_Pmyk0bJ8SvboHD77l_ENCy5y0murM9FTIBMNZRUGsMurIfx_2pxJU_fyBv974YTWJGpB1z_nuSur2v8Id0jLX-PgMOh4FiDUgVznXjclF3AlWXP7Ov3i8/s1600/menu_bg_6.png
7. menu_bg_7
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QeLJ_bSCp2Sm9CYdzntsq6AvV8Nn6yQSlku6GG2RDoU30IHTk7M_omcKrpjFNKPCFnXEPqduClEc8cN8Db2SY-zq-0zKWYlcH6wUh3fkVKYZFnVgLOJtWSnZrWt93-b7IHGvySHub-c2/s1600/menu_bg_7.png
8. menu_bg_8
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzweGMLvImCsavqLnxubi6g0jbeY2g5kOz9ZI7tSyAM5ghKcDY9QWdIoVIDdWQN1TCJ1Jaj0n0M5mfizZGy7l28b8H4XOAr9gtAwCI7m2sI5KWBkQF3AYPGwSWYz341neCsEYe5XIoGIN_/s1600/menu_bg_8.png
9. menu_bg_9
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9eJ9JWsEbvBJsFZSanCZyc-JaA_-zsp83JFC86p4AtZ7KGtHAl1KCRQV1XHUDCsgtLK5f5woYEPRlZN4zWHfz2Q4-S6XrGUqmLtSTEW2RzN5gIonZfeVVDccPXIEcVaa6WZJAPLPSJbE/s1600/menu_bg_9.png
10. menu_bg_10
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEUPxS_Xuz-a3nPcBoMe8po3CrARj0N1lnLecra35X0m14m69M3WTWkN1GQho8gvh4ZEmpB9wFP4RhtnxH2CadERAtwNIACEKEUnf07kpFayurHa5Mtsj1BQW26sNtgdu7NabISXNM8NDz/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/AVvXsEjSu-AGQFq9dU0G2do0tkUpiTfHMoSj5UN3JXuOYgvZixc3HOMTcwFOGGHEao2l2RT6twO1H5ua_ZpaJgMuX2pQGFoP2tfEEP_RE4jvrGpFg6QusDHa6-o6_awD4lKgBTiafiP2Bp2kpQqT/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!


NEW !!! You can actively participate in the wordpress911 team to ask and answer questions to upload articles and videos register » Here

Links: You can download the best WordPress Woocommerce templates HERE