lunes, 13 de mayo de 2013

Editando el Blog [Menú Estático] [P1]
Saul Torrelunes, 13 de mayo de 2013 2 comentarios



A partir de aquí, empezaremos a editar un blog con algunos código html/5 y una que otras cosas que harán de nuestro blog distinto a los demás  Si bien el cierto muchas personas no saben que blogger tiene una amplia gama de posibilidades a editar, pero caso  cuenta con algunas restricciones que iremos viendo a lo largo de estos tutoriales.

El resultado final del menú lo podrán observar en: elbloghtml.blogspot.mx/

Bien, empezaremos por algo importante y que a muchas personas les gusta hacer, eliminaremos la barra que blogger coloca por defecto en los blogs, para ello nos dirigimos a la sección de "Diseño" una vez ahí buscaremos en la parte superior "Barra de navegación>Editar>Desactivar".


Ahora pasaremos a insertar el menú en si, nos iremos a la edición HTML del blog y justo después de <body> insertamos el siguiente código con las respectivas modificaciones en MAYÚSCULAS y las rutas remplazando "#":

<nav id='menuestatico' role='navigation'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>INICIO</a></li>
<li><a href='#'>TITULO 1</a></li>
<li><a href='#'>TITULO 2</a></li>
<li><a href='#'>TITULO 5</a></li>
<li><a href='#'>TITULO 4</a></li>
</ul>
</nav>

Ahora buscaremos ]]></b:skin> donde copiaremos el estilo del menú, donde lo podremos modificar a nuestro gusto, es importante recordar que el estilo que se encuentre con ":hover" sera visible al pasar el cursor:

#menuestatico {
background: #FF5200; /* Color de menú */
border-bottom: 1px solid #151515;
opacity:1; /* transparencia (de 0.0 a 1*/
position: fixed;
width: 100%;
z-index: 100;
box-shadow: 0 0px 0px #18292d; /* sombra */
top: -3px; /* altura de menú inicial */
height: 47px; /* largo de menú */
transition: 0.5s;
-webkit-transition: 0.5s;
}

#menuestatico:hover {
background: #FF5200;
border-bottom: 1px solid #151515;
opacity:1;
position: fixed;
width: 100%;
z-index: 999;
box-shadow: 0 0px 6px #000;
top: 0px; /* altura de menú final */
height: 47px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

#menuestatico ul {
margin: 0 auto;
width: 958px;
padding: 2px 0 8px 0;
}

#menuestatico ul li {
color: transparent;
float: left;
border-right:thin solid #FFA65F; /* separadores */
}

#menuestatico ul li a {
transition: 0.5s;
-webkit-transition: 0.5s;
font-family: Arial,Helvetica,sans-serif; /* tipografía */
color: #F8EDE4; /* color de letra */
background: none;
font-size: 91%; /* tamaño de letra */
text-decoration: none;
font-weight: 700;
line-height: 45px; /* altura de letras inicial */
padding: 20px 15px;
}

#menuestatico ul li a:hover {
transition: 0.5s;
-webkit-transition: 0.5s;
font-family: Arial,Helvetica,sans-serif;
color: #FFF;
background: none;
font-size: 91%;
text-decoration: overline;
font-weight: 700;
line-height: 55px; /* altura de letras final */
padding: 20px 15px;
}

Al colocarlo damos una vista previa de la plantilla y verificamos que se aplico correctamente, nos tendría que quedar un resultado como el siguiente:



Si todo esta correcto podemos guardar la plantilla con seguridad, para ver el blog y observar el menú pueden acceder a http://elbloghtml.blogspot.mx/, Saludos!
En la Categoria : , ,
Acerca del Autor Saul Torre Muy proactivo, bueno, lo necesario.., me gusta el cafe y pasar buenos ratos por la web, soy profesional, me gusta la tecnologia y todo lo que deriba de ella. Facebook

2 comentarios:

  1. No puedo copiar los codigos de los cuadros...

    ResponderEliminar
  2. Si se puede, solo que el color de selección es de color naranja, tratare de modificar eso, saludos!

    ResponderEliminar

Agradecemos tu comentario :)