/>
Este tutorial lo recomiendo pues no es muy difícil y queda bastante bien ya que se redimensiona automáticamente dependiendo de la resolución de pantalla en que se visualice el blog.
Lo primero como siempre que vamos a modificar la plantilla, es hacer una copia de seguridad por si hay errores poder volver al punto inicial.
Recordad que podéis agrandar las imágenes pinchando sobre ellas.
Pues allá vamos:
Lo primero como siempre que vamos a modificar la plantilla, es hacer una copia de seguridad por si hay errores poder volver al punto inicial.
Recordad que podéis agrandar las imágenes pinchando sobre ellas.
Pues allá vamos:
- En el menú izquierdo de Blogger, nos dirigimos a Plantilla.
- Pinchamos Editar HTML.
- Buscar en nuestra plantilla (pincha en cualquier lugar de la plantilla y pulsa en tu teclado Ctrl+F) la etiqueta <b:skin>
- Pinchamos sobre los tres puntos que se encuentra entre <b:skin>...</b:skin>
- Volvemos al recuadro de búsqueda y buscamos /* Content
- En ese apartado buscamos (2):
a:link {
text-decoration:none;
color: $(link.color);
}
NOTA: Puede variar lo que halla entre los corchetes pero lo que realmente nos interesa es a:link { así que no os preocupéis.
- Añadimos delante del párrafo anterior, lo siguiente (3):
a:link {
text-decoration:none;
color: $(link.color);
}
NOTA: Puede variar lo que halla entre los corchetes pero lo que realmente nos interesa es a:link { así que no os preocupéis.
- Añadimos delante del párrafo anterior, lo siguiente (3):
#imagenfondo {
height: 100%;
left: 0;
position:
absolute;
top: 0;
width: 100%;
position:fixed;
}
- Copiamos lo siguiente desde aquí:
<body><div> <img
id='imagenfondo' src='URL DE IMAGEN'/></div>
- Volvemos a nuestra plantilla y buscamos en el recuadro (CTRL+F) la siguiente etiqueta <body expr:class=
- Una vez localizado, selecionamos:
<body expr:class='"loading" + data:blog.mobileClass'>
- Teniéndolo seleccionado, con el botón derecho del ratón pinchamos en pegar y así se sustituirá la expresión anterior por el párrafo azul copiado de este blog.
- Ahora solo nos queda sustituir URL DE IMAGEN por la URL de la imagen que queremos usar de fondo para nuestro blog. Aquí os dejo un enlace a mis fondos por si os interesa alguno.
<body><div> <img id='imagenfondo' src='URL DE IMAGEN'/></div>
- Guardamos la plantilla y listo!!
NOTA: Si aparecen las entradas con fondo de color, casi siempre blanco y quieres que sea transparente para visualizar el fondo en su totalidad, sigue los siguientes pasos.
PUNTUALIZACIÓN:
Si habéis realizado el tutorial de Fondo estático anteriormente a este, volver a cargar la plantilla original guardada antes de dicho tutorial o en su defecto, en el apartado /* Content borrar el primer párrafo, es decir, el que habíamos modificado.
<body><div> <img id='imagenfondo' src='URL DE IMAGEN'/></div>
¡¡Cuidado!! no borrar las comillas ' que enmarcan la frase.
- Guardamos la plantilla y listo!!
NOTA: Si aparecen las entradas con fondo de color, casi siempre blanco y quieres que sea transparente para visualizar el fondo en su totalidad, sigue los siguientes pasos.
- Pinchamos en Plantilla del menú izquierdo de Blogger y seleccionamos Personalizar.
- En la nueva página, Diseñador de Plantillas de Blogger, nos dirigimos a la pestaña del menú Avanzado (1).
- En el nuevo menú, pinchamos en Fondos (2) y ahí, en los tres apartados, fondo exterior (3), fondo principal (4) y fondo de la cabecera (5) pincharemos sobre el recuadro para elegir el color pero en lugar de color elegiremos transparente.
- Aplicamos al Blog (esquina superior derecha de la página) y ya está!!
- En el nuevo menú, pinchamos en Fondos (2) y ahí, en los tres apartados, fondo exterior (3), fondo principal (4) y fondo de la cabecera (5) pincharemos sobre el recuadro para elegir el color pero en lugar de color elegiremos transparente.
- Aplicamos al Blog (esquina superior derecha de la página) y ya está!!
NOTA 2:
Si como en las imágenes tus entradas quedan mal ubicadas puedes modificar su posición en la misma página, Diseñador de Plantillas de Blogger, sólo tienes que pinchar sobre el menú Ajustar ancho (1). Y mover las barras (2 y 3) hasta que quede vuestro gusto. Tras esto, solo queda Aplicar a Blog (4).
Si queréis una plantilla de tres columnas en este misma página, pinchar sobre Diseño en el menú izquierdo y elegir el primer recuadro de la línea inferior. Tras esto volver a Ajustar el ancho (paso anterior) si queréis que quede bien ajustado.
Espero que os sirva de ayuda y a que no es tan complicado?
Si habéis realizado el tutorial de Fondo estático anteriormente a este, volver a cargar la plantilla original guardada antes de dicho tutorial o en su defecto, en el apartado /* Content borrar el primer párrafo, es decir, el que habíamos modificado.
Otros tutoriales:
- Fondo y contenido Responsive Desing.
Haznos saber tu opinión.
¿Quieres opinar?¿Tienes dudas? Anímate y escríbenos un comentario. Gracias