jueves, 11 de julio de 2013

Añadir Menu Horizontal solo usando Css3 a blogger

By andante77 7:05 a.m. , , , , Leave a Comment
Añadir Menu Horizontal solo usando css3 a blogger

Es importante que cada blog/website tenga un menu horizontal/vertical en la parte superior de su blog este ayuda al lector a navegar facilmente tu blog,ayuda ademas a poner en orden los enlaces dentro de tu menu.

Compartire un hermoso menu horizontal el cual funciona con puro codigo de CSS3.Cuando el usuario pone el cursor sobre este un nuevo color aparece en el enlace lo que le da resalte o belleza al menu.
Como trabaja solo con CSS3 este tiene sus limitaciones pero aun asi es bueno para aquellos pequenos blogs que no tengan muchos enlaces.Mira el ejemplo a continuacion.

Como Añadir este  Menu a Blogger?


  1. Entra en cuenta de  > Diseño
  2. Da Click en Añadir un Gadget
  3. Pegue el codigo de abajo y da a boton de Guardar.


<style type="text/css">

/* Solo CSS3 Horizontal Menu para Blogger por http://www.ciudadblogger.info/ */

div.topbar {
 height: 16px;
 background: #565605;
}

ul.claybricks {
 font-weight: bold;
 width: 100%;
 background: #DFDF18;
 padding: 6px 0 6px 0;
 margin: 0;
 text-align: left;
        font-family: ariel;
}

ul.claybricks li {
 display: inline;
}

ul.claybricks li a {
 color: black;
 padding: 6px 8px 4px 8px;
 margin-right: 20px;
 text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
 color: white;
 background:#DFDF18;
 background: -moz-linear-gradient(top, #565605 0%, #565605 10%, #565605 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F91C), color-stop(12%,#F9F91C), color-stop(100%,#2349E2));
 background: -webkit-linear-gradient(top, #E48A8A 0%,#41251b 12%,#2349E2 100%);
 background: -o-linear-gradient(top, #E48A8A 0%,#41251b 12%,#2349E2 100%);
 background: -ms-linear-gradient(top, #E48A8A 0%,#41251b 12%,#2349E2 100%);
 background: linear-gradient(top, #E48A8A 0%,#41251b 12%,#2349E2 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E48A8A', endColorstr='#2349E2',GradientType=0 );
 -moz-box-shadow: 0 0 5px #E23323;
 -webkit-box-shadow: 0 0 5px #E23323;
 box-shadow: 0 0 5px #E23323;
 padding-top: 17px;
 padding-bottom: 6px;
}

/* Solo CSS3 Horizontal Menu para Blogger por http://www.ciudadblogger.info/ */

</style>

       <div class="topbar">
</div>
<ul class="claybricks">
 <li><a href="http://www.ciudadblogger.info/">Home</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">Foros</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">Galeria</a></li>
 <li><a href="http://www.ciudadblogger.info/"> Widgets</a></li>
</ul>

Para finalizar reemplace los enlaces y nombre de enlace con los tuyos de las lineas sombreadas en azul de arriba.

Finalmente guarda tu Html/Javascript y ahora tus lectores disfrutaran de un menu atractivo y facil de acceder.
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario