Menu Iluminado Con Css Para Blog De Blogger

Te enseñare como aplicar el Menu Iluminado tomando ventaja del uso de la propiedad del borde del radio y transicion con  CSS3 que añade un fondo circular a articulos de este Menu cuando pasas el cursor del mouse sobre cada uno de estos.

El resultado es como un flash, que proyecta un menu elegante! El fondo circular aparece en la mayoria de los navegadores que incluye el Internet Explorer 9( IE9), mientras que el efecto de transicion trabaja en navegadores que apoyan la tansicion CSS3, a saber, FtreFox3.5+, Safari 3.1+, Google Chrome, y Opera 11.6+.

Ver Ejemplo:Da Click en Boton de Abajo:

Para añadir este menu iluminado a tu blog de blogger solo sigue los siguientes pasos.
1.Entra en Blogger>>Plantilla>>Editar Html
2.Busca el siguiente codigo ]]</b:skin> pega el siguiente codigo despues de ]]</b:skin>

<style type="text/css">

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}


.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}

</style>

3.Guarda plantilla.
4.Entra ahora en Diseño>>Añadir un Gadget>>selecciona Html/Javascript y pega el siguiente codigo en espacio disponible.

<div class="spotlightmenu">
<ul>
<li><a href="http://www.ciudadblogger.info"><span>Pagina Principal</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>DHTML</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>CSS</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>Foro</span></a></li>
<li><a href="http://www.ciudadblogger.info"><span>JavaScript</span></a></li>
</ul>
</div>

5.Pon este gadget en la parte superior debajo de la Cabecera.Como muestra el ejemplo de abajo.



6. Cambia lo que esta sombreado en         por la direccion de pagina que esta en      .Puedes cambiar anadir enlaces con titulos como( Pagina Principal,contactanos, Autor,Mapa de sitio,tutoriales)
7.Guarda el Html/Javascript una vez hecho los cambios a este menu y listo,tendras un menu estilizado y animado.

Read More

Menu Horizontal De Navegacion Para Blogger

Si deseas anadir mas informacion e enlaces a otras paginas dentro de la pagina de tu blog puedes hacerlo implementando el siguiente codigo a la seccion de gadget de la barra del lado de tu blog,siguiendo estos simples pasos .Puedes customizarlo a tu gusto dandole el color ,tamano,letra,cantidad de enlaces,,,etc.

Como Añadir Super Horizontal  Navigation Menu a Blogger

1.Entre a la interface de blogger y vaya a Diseño>>Elementos de Paginas

2.Da Click en 'Añadir un Gadget' en la barra del lado

3.Selecciona 'HTML/Javascript' ay añade el codigo de abajo.

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgigOL6pR4eMoiTvdN4yDKEsi1mcPCbRcgWq8K1VuJyuWBzm3h6g5ie5i6k44iMbfMYcsMe4mW_eaOk_GIsVMj4XVZymsi3eq2jUvUkhVTcqUEuSUhXE_VZkCqVd1eD_gTWftyPcDeHc-0/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ucABmVCfU8IPtf_V4Lr-Ha8fxIKmwjWEPrmC1aMMDHlO2yrELbdFlOcMtIY5YTg7OJv4LlG4kZv-MFfJCigGXDnW7P06kfnfcKlkAKHrUr6QCrvdryND8RfFlJYG5J7lZh6eEPySxm4/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <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> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Nota: Reemplace el signo (#) con el enlace o direccion /URL de la pagina a diregir y reemplace
Enlace1, Enlace2, Enlace3 etc con el titulo de la pagina.

<li><a href="#" ><span>Enlace 1</span></a></li>
<li><a href="#" ><span>Enlace 2</span></a></li>

<li><a href="#" ><span>Enlace 3</span></a></li>
<li><a href="#" ><span>Enlace 4</span></a></li>
<li><a href="#" ><span>Enlace 5</span></a></li>

<li><a href="#" ><span>Enlace 6</span></a></li>
<li><a href="#" ><span>Enlace 7</span></a></li>

4.Ahora guarda tu "HTMl JavaScript" y Listo

Read More