Diseñar una pagina web es un proceso de aprendizaje y en este articulo te mostrare como usar codigo Css3 especialmente una barra de navegacion con iconos con efecto hover sin la necesidad de usar JavaScript . El codigo de Css3 facilita el trabajo en la animacion de este.
Por otro lado la barra de Navigacion es importante para los bloggers. Podemos navegar cada pagina, categorias sin problemas.Hay beneficios al usar el codigo de Css3 en una barra de navegacion de Iconos con efecto hover,ayuda al visitante al navegar paginas importantes como contacto , Sobre Mi, Anuncios etc.
Chequea Articulo Añadir Menu Iluminado en Blogger
Para finalizar, es una barra de navegacion bastante elegante, lo que hara de tu pagina o blog uno mas elegante. Puedes darle un vistazo de demostracion en:http://fixcd.blogspot.com/
2. Haga una copia de seguridad
3. Da Click en Editar HTML
4. Encuentre luego la etiqueta ]]></b:skin> y añade el codigo de abajo antes de ]]></b:skin>
6. Da Click Añadir un Gadget y selecciona 'HTML/Javascript'
7. Pegue el codigo de abajo.
Reemplace # con tus enlaces.
8. Ahora guarda tu HTML/Javascript'.
Todo listo.
Read More
Por otro lado la barra de Navigacion es importante para los bloggers. Podemos navegar cada pagina, categorias sin problemas.Hay beneficios al usar el codigo de Css3 en una barra de navegacion de Iconos con efecto hover,ayuda al visitante al navegar paginas importantes como contacto , Sobre Mi, Anuncios etc.Chequea Articulo Añadir Menu Iluminado en Blogger
Para finalizar, es una barra de navegacion bastante elegante, lo que hara de tu pagina o blog uno mas elegante. Puedes darle un vistazo de demostracion en:http://fixcd.blogspot.com/
Para insertar este barra de navegacion de css3 solo sigue estos pasos:
1. Entra en tu cuenta de Blogger > Plantilla2. Haga una copia de seguridad
3. Da Click en Editar HTML
4. Encuentre luego la etiqueta ]]></b:skin> y añade el codigo de abajo antes de ]]></b:skin>
/* El Codigo CSS del menu empieza aqui ciudadblogger */ #super-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#super-nav li {float: left;}
#super-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#super-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#super-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#super-nav li a:hover {cursor: pointer;}
#super-nav li a:hover img {top: -85px;}
#super-nav li a:hover .aname {top: 85px;}
#super-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#super-nav li:nth-child(2) a {background: #9bc704;}
#super-nav li:nth-child(3) a {background: #0dc3ff;}
#super-nav li:nth-child(4) a {background: #51a2ec;}
#super-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
5. Entra en blogger y da click en Diseño6. Da Click Añadir un Gadget y selecciona 'HTML/Javascript'
7. Pegue el codigo de abajo.
<div id="super-nav"> <li> <a href="#"><span class="aname">Home</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsB1apIak3JrhSxw0i6gfnBdMgr5D_Vom58-5A-NMFX4tD9CjOH5eQHJqLNyQTJzLnbBPkcYEzQu1-BaPfS66TY2cwigI4kEGKiF7a9acjt1p8AhPWCVNWux_K8MXG_2LBogfL02JxCDc/s1600/btrix-home.png" /> </a> </li> <li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrW2pIaJx76z2no8fnuDXZNesJm59X5AgUmOeZD8dAGfK5ZJyDis2_CNxthhicdKgWTjyjgDsXIhzhgMkiXk6BX64V5U3009oW2Zm-kH_jAQxLD3TqIjzbrD7kECBXEv-TVIXIm6eZt4/s1600/btrix-download.png" /> </a> </li> <li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKew9uXtbYH2v7_J8DK-ofPFskYOpYm7nG4xIpRCT5qark4PUmKk2epICgNCeb4vbCaC4Ih3Eaepwm5k3bKuaQ1gzFK8nmqOKry_PYF_CwKzWXTfXi6d__sNB25SP4RPJZKp7FBd51fTE/s1600/btrix-mysql.png" /> </a> </li> <li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_GflT_Om5L1O-9PPlsAdoMNhbFz8wuRx8qY0uIzwb8oTnLe8k8Miwk_2xaoFgZ6-xTdSXvWTmYa8500PWiiQPo7H5StZGKF_F9N36gFSDBH14XWa-NgDanRqE7xcOgt_k_pfQgoziD0/s1600/Btrix-html.png" /> </a> </li> <li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxd8BWMlP_MnE3On-et8Mj58qMiz0H_d9DPtiAV3MsFBJrOAJwv8mAezCwV67-lYWKnX2hOZsKpZqaBA8vFwOUqYADEeOjrY3r4gvCprZAutiIgJ5ZmC4POdVhSl3Aex0AiynCyBR7Ql8/s1600/btrix-contact.png" /> </a> </li> </div>
Reemplace # con tus enlaces.
8. Ahora guarda tu HTML/Javascript'.
Todo listo.
