How To Make And Install Horizontal Menu 3D Button With Widget In Blogger/Blogspot

Horizontal Menu Widget Button 3D In Blogger/Blogspot is also made with pure HTML and CSS without javascript or jquery touch., Just like the menu / navigation horizontal previously. How to create and install was very simple and without editing the HTML template, because CSS rules I created one with HTML.

How To Make And Install Horizontal Menu Widget Button 3D In Blogger/Blogspot:

1. Copy and edit the code below:
Code:

<style> # navcontainer {background: # 369; border-top: 1px solid # 9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;} # {list-style navlist : none outside none; margin: 0; padding: 0;} @ media all {# navlist {text-align: center}} # navlist li {bottom: 11px; display: inline; line-height: 1.2em; margin: 0 ; padding: 0; position: relative;} html> body # navlist li {background: # 000; margin: 0 3px 0 0; padding: 0px 4px 4px 0;} # navlist a, # navlist a: link, # navlist a : visited {background: # 900; border: 1px solid # FFF; bottom: 2px; color: # FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative ; right: 2px; text-decoration: none;} # navlist a: hover {background: # C00; bottom: 1px; color: # FFF; position: relative; right: 1px;} # navlist a: active {background: # 999; bottom: 0px; color: # FFF; position: relative; right: 0px;} # navlist li # active {background: # 369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative;} html> body # navlist li # active {background: # 000; margin: 0 4px 0 4px;} # navlist # active a, # navlist # active a: link, # navlist # active a: visited, # navlist # active a: hover {background: # 369; border-bottom: none; border-left: 1px solid # 9CC; border-right: 1px solid # 9CC; border-top: 1px solid # 9CC; bottom: 0; color : # FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0;} </ style>
<div id="navcontainer">
<ul id="navlist">
<li> <a href="#"> <span> HOME </ span> </ a> </ li>
<li> <a href="#"> <span> About U.S. </ span> </ a> </ li>
<li> <a href="#"> <span> CONTACT U.S. </ span> </ a> </ li>
<li> <a href="#"> <span> Privacy Policy </ span> </ a> </ li>
<li> <a href="#"> <span> DISCLAIMER </ span> </ a> </ li>
<li> <a href="#"> <span> SITEMAP </ span> </ a> </ li>
</ Ul>
</ Div>

- Replace # with the url you want to put on the menu, such as the homepage url, table of contents, labels, and others.
- Replace HOME, About U.S., CONTACT U.S., and so the name of the menu / anchor text according to what you want, such as Home, Contents, Tips, and so on.
- If you want to add / remove list menu, add / delete rows:

<li> <a href="#"> <span> Link </ span> </ a> </ li> before </ ul>.

2. Login to dashboard >> Design >> Click Add a Gadget

3. After a pop up window appears, select the HTML / Javascript

4. Then enter the code that has been edited to configure column HTML / Javascript.
 

7. Click save.
8. The horizontal menu widget drag down / up header (put on gadget slot).
9. Save again.
10. Done! menu / navigation horizontal your Blogger Blog ready for use.

Posted in: Blogger Design,Blogger Layouts,Blogger Templates,Blogger Tutorials