Ya faltan sólo unos días para la Navidad, ¡qué emoción!…estaba pensando en colocar un pequeño detalle que demostrara nuestra alegría por estas fiestas, y que a su vez fuera fácil y rápido de implementar.
En la entrada anterior, te mostraba algunas opciones (widgets) para que pudieras colocar en cualquier columna de tu blog, ahora, veremos cómo colocar un moño navideño, para que tu blog se vea más bonito y alegre.
Esto lo haremos en solo 3 pasos, y puede ser usado tanto en las nuevas plantillas de Blogger, como en las plantillas de diseño o editadas.
Encontré este moñito, al que transformé un poco para darle esta apariencia, puedes elegir el que más te guste, debajo, sus respectivos enlaces.
 |  |
Nota: Si estos tamaños te resultan muy grandes, cambia dentro del enlace de la imagen /s800/ por /s320/, o si lo prefieres más chiquito, cámbialo por /s200/.
Y antes que nada la DEMOSTRACION.
Cómo poner el moño en las plantillas nuevas (del diseñador de plantillas)
Paso 1.Ve a diseño► Edición de HTML y con la ayuda de CTRL F busca:
<body expr:class='"loading" + data:blog.mobileClass'>
Si es que usas la barra de navegación de Blogger, para que no quede el moño debajo de esta busca:
<div class='cap-top'>
Inmediatamente después pega el siguiente código:
<div id='navidad'>
</div>
Paso 2. Ve a diseño►Diseñador de Plantillas►Avanzado►Añadir CSS...
...y agrega el siguiente código:
#navidad {
width: 403px;/*el ancho que puedes editar*/
height: 271px;/*el alato que puedes editar*/
background: url(URL_DE_LA_IMAGEN) no-repeat left top;
position: absolute;
top:0;
left:0;}
Bien chicos (as) , estamos usando una imagen con fondo transparente, IE6 (Internet explorer 6) entre sus muchas peculiaridades, tiene la característica de no leer las transparencias, y pues ahí las cosas no funcionarán, hay dos opciones, ignorar eso (ya son muuy pocos los usuarios que usan ese viejo navegador), o
* html #navidad{display:none}
Paso 3. Ahí mismo puedes ver el resultado en vivo y a todo color , si te gustó, haz click en Aplicar al Blog.
Nota: si el moño se esta haciendo el interesante y no se quiere ver, es por que pegaste el código y de ese modo, como que no lo quiere leer blogger, solo colócate después de la primera llave de cierre "}", y da enter.
Si el título queda muy pegado al moño, lo puedes mover con el siguiente código, y lo pegarás después de el código anterior:
.header h1{margin:40px 0 0 90px;}
El valor de 40px es para el margen de arriba (para bajarlo).
El valor de 80px es para el margen a la izquierda (para moverlo hacia la derecha).
Nota: para algunas plantillas, específicamente las que tienen el contenido hasta arriba como por ejemplo las plantillas sencillo, etéreo y viajes, es conveniente usar el moño pequeño o usar otro tipo de gráficos (más delgaditos) como esferas que cuelgan u otros ornamentos, ya que parte del moño quedará atrás en la aparte de la derecha de dicho contenido,si este es muy ancho, pero lo bueno es que ya puedes colocar cualquier cosa que se te antoje ;). Si hay tiempo, agregaré otros modelitos para que puedas usarlos.
Cómo poner el moño en las plantillas de diseño, editadas etc
Paso 1.Ve a diseño► Edición de HTML y con la ayuda de CTRL F busca la etiqueta:
<body>
...inmediatamente después pega este código:
<div id='navidad'>
</div>
Paso 2. Haz lo mismo que en las plantillas nuevas de Blogger. (explicado allá arriba).
Paso 3. Si te gusta el resultado guarda los cambios en Aplicar al blog.
Dudas y comentarios, bienvenidos =)
Crédito por el moño: Kharlhissa
Actualizado: Nov/09/2011. No más para IE6
No hay comentarios:
Publicar un comentario