Make Horizontal Menu CSS 3D Blogger / Blogspot Button

Menu / navigation horizontal Blogger / Blogspot is also created with pure HTML and CSS without javascript or jquery touch., Just like the previous menu / navigation horizontal. How to create and install it is very simple and without editing HTML templates, because the CSS rules I created blend with its HTML.

How to create / install horizontal widget menu / mavigation 3D button 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; } #navlist { list-style: 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: 4px 0px 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>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>

- Replace # with the url you want to install in the menu, such as homepage url, table of contents, labels, and others.
- Replace Link 1, Link 2, Link 3, and so on with the name of the menu / anchor text in accordance with what you want, for example Home, Table of Contents, Tips, and so on.
- If you want to add / remove menu lists, add / remove rows:
<li> <a href="#"> <span> Link </ span> </a> </ li> before </ ul>.

2. Go to dashboard> Design / Design> Click Add a Gadget

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

4. Then enter the edited Code into the configure HTML / Javascript field.

5. Click save.

6. Drag / slide the horizontal menu widget down / up the header (place it on the gadget slot).

7. Save again.

8. Done! menu / navigation horizontal Blogger Blog you are ready to use.

Share this with short URL: Get Short URL

Share this