Agregar una imagen en el post-footer
Labels:
Trucos
at
sábado, abril 12, 2014
Para añadir una imagen al pie de los post (post-footer) donde tenemos el nombre del autor pero en el lado contrario como si fuera una firma a como un sello personal.
Hace tiempo he publicado como añadir una imagen de fondo y borde 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;
}
A esos estilos añadiremos lo siguiente.
padding:36px 4px 2px 4px;
background: url(url-de-la-imagen) no-repeat top right;}
Quedando así:
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
padding:36px 4px 2px 4px;
background: url(url-de-la-imagen) no-repeat top right;}
En el tamaño de la imagen podemos darle más altura en padding modificando 36px por otro valor.
- Sin editar el HTML de la plantilla
Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado
En el recuadro pegar el siguiente Código:
En el recuadro pegar el siguiente Código:
.post-footer {background: #cfe2f3 pueden cambiar el color de fondo
margin: .75em 0;
color: sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
padding:36px 4px 2px 4px;
background:#cfe2f3 url(url-de-la-imagen) no-repeat top right;}
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