Poner imagen de fondo en el post-footer
Labels:
Trucos
at
domingo, marzo 02, 2014
El post-footer es el pié de cada entrada. Es donde aparece el nombre del autor, las etiquetas, los comentarios, etc. Para poner una imagen de fondo en el post-footer.
- Ir a Edición de HTML:
Diseño► Edición de HTML ►Presionar Ctrl + F y Buscar lo siguiente:►.post-footer
En una plantilla sin modificar los estilos del post-footer es algo así:
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
Cambiarlo por este código
.post-footer {
margin-bottom:15px;
margin-left:0px;
font-size: 87%;
background-image: url(url-de-tu-imagen);
background-position: top center;
background-repeat:repeat;
}
Nota:
Para que resulte más rápida la carga de la página utilizar una imagen pequeña.
Para que la imagen ocupe todo el espacio debemos añadir el comando repeat de esa forma la imagen se repite, y norepeat para que la imagen no se repita.
Para que la imagen ocupe todo el espacio debemos añadir el comando repeat de esa forma la imagen se repite, y norepeat para que la imagen no se repita.
Este seria el código:
.post-footer {
margin-bottom:15px;
margin-left:0px;
font-size: 87%;
background-image: url(url-de-tu-imagen) repeat ;
background-position: top center;
background-repeat:repeat;
}
- Sin editar el HTML de la plantilla
Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado
Si te gusta la entrada compártela.
¡Gracias!
Copyright © 2013
Cambio-Cambie Blogger
Diseñado por CCB Desarrollado por Blogger
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.
►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>
No olvides suscribirte para recibir las actualizaciones