Creating Cool Navigation Menu Edit HTML

The menu is a menubar naviagasi which are usually placed below the header blog useful to direct readers and visitors to the blog through the links they are looking for. If this many bloggers who struggle to how to make it this time I will share about how to make a cool navigation menus without editing HTML. In this way the blogger beginners who do not know how editing HTML does require precision can make their navigation menus with more attractive and easier.

Menubar navigation bar or menu usually consists of several tabs. "Inside" each tab contains links to the pages of posts, static pages, page labels, etc. to other websites. Actually make the menu tab is not so difficult. Basically the point is the same, namely to make a menu that contains some links with some styling added for visual appeal. While the links are arranged vertically, the navigation tabs are usually arranged horizontally.

In this tutorial we will be installing a bar just below the header, where typical or common to the navigation bar. The bar will be added as a gadget through the Page Elements page. The advantage of using the gadget is that if you want to remove it later, it can be done easily without editing HTML. However, to do that, the template must have a link gadget or widget container that I would call, in a particular location.

<style>

#tab_menu {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7TqS6G0yOaSuFafE9umVhPBt_TeYgLbrV4ujNDBZ5_5CKz4Lc8jYegnvyekyymNHk-7l6gLgRQDSqeK9qTWSXrgi3IuqJ5Pm9o7_LXKgTK3KRrgmUd5k0DCrEHJK8ROjgjbEXFXs7WOD/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 landing pages.
7. You can obtain the URL of the page by copying the contents of the address / URL bar of your browser while you are on the page.
8. To show all the posts under the label (category), you need to link to the page label.
9. To change the width of the edit menu width: 960px.


Now you can change your heart's content, or you can change the background color of the navigation menu to change the link url background above I marked in red with a link url background below, or you prefer to use other colors, please see the color code html I have provided.

1.menu_bg_1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb2Uoh73VzCDrL3fxdfZgGksS96CL1j_nt0MHF_GzjFSCkBKkpLwTjx7KSb2qI1n6NdlhioB4YbsCWeI-G4iBTNZJr2u_Ilh_LQwsj4gHUHvKBvD0NPvcTg1sBWsESPwm0TqzFgv9-6MUB/s1600/menu_bg_1.png

2 menu_bg_2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOtCy0ruKbfa4OL3ysDI9AGrib4iToB12-x4jJUz5YS46hZQrRMCjHO3gMG7osp1pbANW4U7971MCQi5T_gMpEkx81nwbrUt3YktL6l9ya94RHeYW1F7dhqUHnW_yrX_LKjBzDh5uAVpy/s1600/menu_bg_2.png

3 menu_bg_3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CSxrldZ9moFEo0JQvkAuH7B3cX0O6PWqA16M78go2RyFRxSJp_fS-1tri5ys-ub9l0hE5BMQ526tvJL0CIekbniC3J3kf7VfdC4UCfxJfISx9zyN0O54LuYphQ0a7QQDsBFMlFGjx4_8/s1600/menu_bg_3.png

4. menu_bg_4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-j2LT5ga0W3S240VsyaZNPvheMMZ9l4Q61AyXodgQELsIunNR3R4KEJpv7PIH1F_bSIrYFxOMq1L0vjR3fnqRkCI5-M3yiptkgHxbniZ6nlK9aNLoMrhgt5h-zlm9MjHhrxGaAwwS3WM7/s1600/menu_bg_4.png

5. menu_bg_5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1cDtS5rAagSuM82Jq2eIXRBwF-sgnubbEAmZND5i0ytzGGhHDFHoSlV-hM51SUAbzETv1KQeWiw_QQ35xjXbHKgkIyX0fjK2Z7lAhNAwAg9znFbLrQ1Bpgsri5bp7PumAdHGAqbGj_gWQ/s1600/menu_bg_5.png

6 menu_bg_6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSKvnMX2lCDQrOG1HCfXSUdVuKQHXyz8gETwlKFoxZcJdu7hgiLSUFFLjbJFGQfUhpV4y0e79qEjB13wiwJghdZBl3AfTAqSIRGAHBwc2nz11IQrMxqNWG-XdYyyNvgpBYcwSCo6n54vfn/s1600/menu_bg_6.png

7 menu_bg_7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJYtwDgWyv4501rYxLqS5X862wHwOnDncbD9uoEFWQP6Opahonabgc_WWM7gIFvwY2ZAwr8yIJerFGqOeiJU4UzR8R9FBZeU3AnNui2RLKTavAcAQA9VMpjd36OYHtjie3yFZnRCVWRS_/s1600/menu_bg_7.png

8 menu_bg_8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcK-e3HlNFkdqIRfYbfQcucsXMCCM2wykaf842CAEwopCvrY5DeIWm_1MAHogjQBL8-QSII10hVdwGAU7-7v-zt-kwgBfuJtDV3qoWS1xTF_PBV9cK9nu1y8qVIe1M9_DtvyQx-FUaGtx1/s1600/menu_bg_8.png

9. menu_bg_9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ12FbQb3HjwgXTA6v8Bii3adx4Un7CW-dmknU07pZm3RXROlc3hHpTuDh_dAVKt-Ik4ODuIh7FRDMKmNU7LCa1RD1yq4C-cZ0NSTCX9d7yLNGBI5m-TDysyNWfbLuNJ7DFV38v_7BnhVr/s1600/menu_bg_9.png

10 menu_bg_10

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPyYisWDn7Z4yPcApLjPr3ar4NOVaIxFCtinfTqY68ebyBRkX5560iXIJWlZw3bo5WmKs3gj8gUmAA22i73tYABPHtCbXcQitiwdhaxSAAiAVYhVlTCwspNumnHOfmBDirsFMRgUH5GKI/s1600/menu_bg_10.png