BLOGUERO TUTORIAL

La barra de menús de navegación es una parte importante de cada blog y página web. Donde los visitantes pueden navegar por las páginas de blogs y mensajes. Por lo que esta más necesario para que sea atractivo y fácil de usar. Si ya tienes esta función, entonces es correcto. Si tu blog blogger falta de esta característica, a continuación, debes seguir este tutorial.

1. Ingresa a tu plantilla Blogger
2. Busca </header>
3. Justo debajo de coloca el siguiente código CSS

Demostración

<style>
 #cssmenu_litemenu { 
 width:800px; 
 background:#166bea;  
 border-bottom: 5px solid #993300;  
 border-top: 1px solid #e14d09;  
 clear: both;  
 overflow: hidden;  
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;

border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;

 }  
 #cssmenu_litemenu ul {  
 float: left;  
 width: 100%;  
 }  
 #cssmenu_litemenu li {  
 float: left;  
 list-style-type: none;  
 }  
 #cssmenu_litemenu li a {  
 background:#166bea;  
 color: #fff;  
 display: block;  
 font-size: 14px;  
 padding: 5px 17px 5px 15px;  
 position: relative;  
 text-decoration: none;  
 }  
 #cssmenu_litemenu li a:hover {  
 background:#002660;  
 color: #fff;  
 }  
 #cssmenu_litemenu li li a {  
 background: none;  
 background-color: #0d56c4;  
 border: 1px solid #0d408d;  
 border-top-width: 0;  
 color: #fff;  
 font-size: 14px;  
 padding: 5px 10px;  
 position: relative;  
 text-transform: none;  
 width: 130px;  
 }  
 #cssmenu_litemenu li li a:hover {  
 background: none;  
 background-color: #166bea;  
 }  
 #cssmenu_litemenu li ul {  
 height: auto;  
 left: -9999px;  
 margin: 0 0 0 -1px;  
 position: absolute;  
 width: 160px;  
 z-index: 9999;  
 }  
 #cssmenu_litemenu li:hover ul {  
 left: auto;  
 }  
</style>
<div id="cssmenu_litemenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>  
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>  
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
<li><a href="#"> Menu 4</a></li>
<li><a href="#"> Menu 5</a></li>
<li><a href="#"> Menu 6</a></li>
<li><a href="#"> Menu 7</a></li>
<li><a href="#"> Menu 8</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</div>

Artículos Relacionados