El post-footer es el pié de cada entrada. Es donde aparece el nombre del autor, las etiquetas, los comentarios, etc. En muchas plantillas ésta parte no aparece claramente diferenciada y puede dar la sensación que la información que ahí aparece se confunde con la del post.
No hace mucho que explicaba la forma de poner imágenes en el título de cada post, pues bien, siguiendo la misma técnica también podemos colocar imágenes en el footer de la entrada. Si entonces utilizaba una imagen fija de gran tamaño y peso, ahora en el post-footer, para que resulte más rápida la carga de la página vamos a utilizar un imagen pequeña que se repita varias veces hasta llenar el hueco.
Para hacerlo necesitamos primero una imagen, que repetida varias veces, de la sensación de ser una sóla, yo he escogido ésta:
No hace mucho que explicaba la forma de poner imágenes en el título de cada post, pues bien, siguiendo la misma técnica también podemos colocar imágenes en el footer de la entrada. Si entonces utilizaba una imagen fija de gran tamaño y peso, ahora en el post-footer, para que resulte más rápida la carga de la página vamos a utilizar un imagen pequeña que se repita varias veces hasta llenar el hueco.
Para hacerlo necesitamos primero una imagen, que repetida varias veces, de la sensación de ser una sóla, yo he escogido ésta:
En el código que antes utilizabamos cambiamos el comando 'no-repeat' por 'repeat' y el resultado será el siguiente:
Además, podemos colocar bordes en el footer utilizando los códigos publicados en el post anterior y personalizar su color creando una variable para ellos. Podría quedar así:
Así ha quedado mi post footer:.post-footer {
margin-bottom:15px;
margin-left:0px;
font-size: 87%;
background-image: url(http://blogs.terra.es/skins/sk_sp_temas/city/sidebar_bg.gif);
background-position: top center;
background-repeat: repeat;
}
15 comentarios:
Ey. Cuanto tiempo.
Tenia mucho que no te leia, y no me actualizaba con tus 'cosas'.
Eh, que sepas que trabaje en mi
>pagina web de la univ.
Bueh, buen fin de semana, y te estoy leyendo je.
Cuidate
hola! desde hace una hora mas o menos, desaparecio la barra de ayuda en la creaciòn de entradas, y no esta la opcion para subir imagenes, lo extraño es que hace una hora subi una foto... (me dice listo, pero con errores en la pagina)
Espero me puedas ayudar, te dejo mi e-mail, por si quieres responderme sion.magdal.eder@gmail.com
De antemano muchisimas gracias
Lilian!
Mira que lo explicas claro y ni así... lo mío ya es torpeza supina.
Traté de hacerlo pero no me resulta, podrías tratar de explicarlo paso a paso por favor! que me gustó mucho como lo dejaste en tu blog!!
Atte. Rodrigo
Los pasos que faltan están en el enlace "imagenes en el título del post". No hay más pasos que los que se describen allí. La única diferencia es que uno se regiere a "h3" (el título de cada post) y éste al footer.
Podrías mostrar un ejemplo del código ? como lo hiciste en la "imagnes en el titulo del post" xq estuve probando en footer y aún no me resulta...y eso que ,creo, segui todos los pasos...
gracias
¡¡Gracias lo estaba buscando ¡¡
Soy yo otra vez, te he añadido a Blogines y ha sido entonces cuando me di cuenta del icono de entradas Atom que tienes en la sidebar me gustaría poner uno pero no sé cómo aplicarlo ni conseguirlo.
Hola! visitando el blog de Gem@ que esta por aqui arriba ;) he encontrado tu blog. Queria decirte q esta entrada me ha servido de mucha ayuda, y si me permites aportar un granito de arena, yo le he puesto una imagen fija de las dimensiones del pie del post, pero cuando no habia enlaces a etiquetas, se cortaba, asi que debajo de margin-left le he añadido esto:
width: 404px;
height: 45px;
Y ya se me ha quedado la imagen igual en todos los posts.
Bueno gracias y un saludo!
no tuve ningún problema...
de hecho, se ve de lujo, quizás cambie un poco algunos colores...
Hola, xOsse:
he llegado aquí, como Syl, através de Gemablog.
Me gustaría saber si se puede poner una sola imagen a la izquierda en el post-footer, sin ser fondo, y que el resto de datos ("publicado por... fecha...categoría...comentarios") aparezcan junto a esa imagen.
Un buen blog, voy a ver si lo enlazo!
Un saludo.
Todas las imágenes que pongas en post footer van a aparecer como fondo.
Se pueden poner imágenes pequeñas a la izquierda, como la que yo tengo de tecnorati, pero te ocuparía sólo una línea, me explico:
Para hacer la prueba expande tu plantilla y busca estos códigos:
post-footer-line post-footer-line-1
o
post-footer-line post-footer-line-2
El primero se corresponde, en mi blog, con la primera línea: "publicado por..."; el segundo con las etiquetas; y la imagen de tecnorati lo tengo en "post-footer-line post-footer-line-3" (tercera línea).
Si pongo una imagen muy grande en el primero, la linea del segundo aparecerá de bajo de la imagen, y no a su derecha. Lo que puedes hacer es poner un icono pequeño para cada línea.
¿como se hace? Muy fácil, enlazando una imagen: la que tengo yo es la siguiente (juntar los signos mayor y menor):
< img class='image' expr:alt='"technorati"' expr:border='0' expr:src='"http://photos1.blogger.com/x/blogger/6110/3224/320/753335/tn-tiny.gif"' expr:style='"margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;"'/ >
Hola: Me gustaría que me digas como lograste que, tanto la line1 como la line 2 NO estén pegadas al margen izquiero del post footer.
Traté de hacerlo y no me sale!
Si queres mirá como quedó en mi blog:
http://blogaldope.blogspot.com
Muchas Gracias!
Cuantas cosas se aprenden en este blog, estoy totalmente enganchada.
Aunque hay algunas que no las comprendo, pero bueno, poco a poco, soy nueva en esto.
Un besito suave para vosotros.
Excelente Post...lo aplique a mi blog: http://mastripeo.blogspot.com/
Gracias y te voy a seguir...
VANDERLOF
Publicar un comentario