Aviso fijo al final de cada entrada. | Oloblogger Con esto de los concursos ( 20blogs , Bitácoras ), ya sois más de uno y más de tres, los que me habé...

19 de octubre de 2009

Aviso fijo al final de cada entrada.

Con esto de los concursos (20blogs, Bitácoras), ya sois más de uno y más de tres, los que me habéis preguntado cómo poner un texto fijo, imagen o lo que sea, tras el contenido de cada post. La idea es que tras leer vuestra entrada, el visitante lea también algo tipo: "Si te ha gustado, Menéame", "¿Te ha parecido interesante esta entrada? Pues...", "Te mola > Vótame", etc.

Para conseguir esto tenemos que realizar dos tareas:

1. Lo primero es preparar el mensaje o aviso. Si es un texto, será suficiente con hacer un DIV con una etiqueta de estilo y el texto-enlace dentro. Por ejemplo:
Si no se ha entendido vuelve a empezar. ¿O.K.?

<div style='width:370px;text-align:center;padding:5px;margin:15px auto;color:#5882AA;background:#cccccc'><img src='URL_IMAGEN' style='float:right;margin:0px 0px 3px 3px;'/>TEXTO <a href='URL_DESTINO' style='text-decoration:underline;'>ENLACE</a>. MAS TEXTO</div>

Dentro del primer STYLE irán los atributos del bloque (DIV). En el segundo, los de la imagen que acompaña al texto. Esta imagen se puede poner o no, al gusto.

Otra opción más simple es colocar directamente sólo una imagen sin texto, pero con un enlace:


<div align='center'><a href='URL_DESTINO'><img style='margin:0px auto;text-align.center;cursor: pointer;' src='URL_IMAGEN' /></a></div>


¿Hay más opciones...? Sí, pero esas ya os las dejo como deberes para casa :)

2. Una vez diseñado vuestro aviso, la segunda parte es colocarlo en su sitio, pero esto es quizás lo más fácil. Simplemente teneis que localizar (artilugios expandidos) la variable DATA:POST.BODY y justo detrás incluir el código que habeis preparado antes.

Si teneis puesto el truco del estilo revista, leer más o similares, lo más seguro es que tengais una parte de código que incluye una condición para mostrar un aspecto u otro según estemos en páginas de entradas o en otras. En este caso, habrá dos DATA:POST.BODY. Aquel que sea para entradas individuales (ITEM), será la referencia correcta.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

30 comentarios :

  1. Es muy interesante esta entrada, tal vez lo haga.
    Saludos

    ResponderEliminar
  2. Joselop44 ¿estás pendiente de mis entradas para ser el primero en comentar? XD Siempre me dejas alucinado de lo poco que tardas en hacerlo. Pues nada, nada... es un placer.

    ResponderEliminar
  3. Me gusto mucho este post vere si lo intento lolz

    ResponderEliminar
  4. Gracias.
    Enhorabuena por tu premio en 20 minutos que me ha permitido conocerte y ya te he agregado como enlace en mi modesto Blog.
    Eres un figura, me quito el sombrero.
    Que bien te explicas.

    ResponderEliminar
  5. The Big. Es bastante fácil colocarlo en el sitio adecuado. La gracia está en hacer un elemento lo suficientemente atractivo, visualmente hablando.

    Gracias Interruptor. Mucho no sé, pero creo que lo de explicar no lo hago mal del todo.

    ResponderEliminar
  6. Hola, estube buscando como puedo crear un boton con una ventanita donde puedas colocar su correo electronico y registrarse para recibir mkis entradas a sus correos, sin entrar a RSS, porque la mayoria no sabe ocmo funciona y creo que la manera mas facil sea asi que solo ingresen su correo y al aceptar en la misma pagina de inicio ya esten registradas. Un saludo y gracias de antemano por tu respuesta.

    ResponderEliminar
  7. Hola Asociación. Si no lo tienes hecho ya, ve registrando tu feed en Feedburner que en unos días escribo unas cuantas maneras de hacerlo.

    ResponderEliminar
  8. Gracias, estare esperando tu post porque ya lo tengo registrado en Feedburner

    ResponderEliminar
  9. Como siempre, respondiendo a las necesidades de los bloggers. Gracias.

    ResponderEliminar
  10. Amigos escribo desde Cuba!! Quisiera saber de dóde ustedes sacaron esa plantilla de blog tan buena con forma de cuaderno! con razon ganaron el premio jejeje! no es que quiera copiarles, pero he cambiado el diseño de mi blog mil veces y todavía no encuentro ninguna q le venga con el título. Porfa denme una mano con eso!! Abrazos
    http://andyricki87.blogspot.com/

    ResponderEliminar
  11. André, busca en Google "Notepad Chaos" y tendrás la plantilla en la que se basa esta.

    ResponderEliminar
  12. Hola Oloman!!!

    Enhorabuena por ese pedazo de blog que tienes!!!

    Te escribo ya que estoy intentando insertar una imagen con enlace al final de los posts de blog y no localizo DATA:POST.BODY

    Si que he localizado DATA:POST.BODY/
    Supongo que será el tipo de plantilla que estoy utilizando...
    Me puedes ayudar al respecto??? gracias

    Un saludo
    Miki

    ResponderEliminar
  13. Claro Redacción. Me extraña esa barra detrás de la variable pero en un principio, lo importante es localizar el DATA:POST.BODY, independientemente de las etiquetas que pueda llevar detrás o delante.

    ResponderEliminar
  14. Hola !!!.Queria saber si este truco puede servir para poner al final de cada entrada (sin incluir los metadatos del footer) una imagen complementaria al fondo del post,por ejemplo una chincheta en la esquina , o el "pedazo de una esquina de hoja doblada".Como cada post es de largo variable, no puedo añadir estos detallitos como imagen de fondo del post porque se recorta si la entrada es cortita (o me estoy equivocando?)
    Mil gracias por compartir sus conocimientos !!!

    ResponderEliminar
  15. Hola Gra.
    No sé si te he entendido bien, pero me parece que lo que buscas lo puedes hacer con el segundo trozo de código que se ofrece, siempre que sea una imagen simple relativamente pequeña.

    Tendrías que modificar el ALIGN="CENTER" y los atributos de la etiqueta STYLE de la imagen, para colocarla dónde quisieras (más a la derecha o más a la izquierd). Tal y como está ahora, te la centraría.

    Si lo que quieres es cambiar el pie del post, eso es cambiando el post-footer, pero como quieres hacerlo antes de este, habría que crear una nueva clase de ancho y alto declarado, poner la imagen de fondo en ella y, posteriormente, insertar en la parte HTML, antes del DIV que forma el post-footer, un nuevo DIV con la clase nueva creada.

    Aunque la explicación fue para otra cosa, la idea está más desarrollada en este post.

    ResponderEliminar
  16. Mil Gracias!!!!!
    Es exactamente como el otro post que mencionas lo que quiero hacer !!!!
    Cuanto trabajo te tomas!!!!...Es absolutamente merecido el premio del 2009 !!!
    Gracias otra vez!!!

    ResponderEliminar
  17. ¿Habría alguna forma de poner un gadget que mostrara el número de entradas y lo cambiara de forma automática?

    ResponderEliminar
  18. A ver si es esto lo que buscas...

    http://oloblogger.blogspot.com/2008/12/mostrar-el-numero-de-entradas-y_02.html

    ResponderEliminar
  19. Muchas gracias por todos tus consejos, he mejorado bastante mi blog gracias a ellos.

    ResponderEliminar
  20. De nada Xrok. Lo importante es aprender a pelearse con el código explorando posibilidades. Un saludo.

    ResponderEliminar
  21. ¡Hola Olo! ;-)

    ¿Esto se puede hacer con un AdSense?

    Digo más, ¿existe alguna manera de hacer que aparezca un elemento en todas las entradas de mi blog sin tener que incluirlo entrada por entrada?

    Ejemplo: Quiero que salga un mismo reproductor de música en todas mis entradas pero no quiero tener que escribir el código una por una.

    Lo intenté poniendo un gadget html/javascript en diseño pero no me sirve, tiene que ser en el interior de la entrada, no abajo ni en otro sitio.

    He buscado y leído pero no encuentro nada, de hecho no sé si es posible.

    Gracias por tu ayuda.

    Un saludo.

    Javi.

    ResponderEliminar
  22. Yo de nuevo.

    Solucionado Oloman.

    Gracias de todas maneras porque sé que habrías invertido tu tiempo en ayudarme, de hecho ya lo hiciste con el mapeado de imágenes.

    Tremenda labor señores/as.

    Un saludo y mucho éxito. Bueno, más éxito.

    ResponderEliminar
  23. Javi, supongo que descubriste que la forma era la misma que se explica aquí, sólo que poniendo el código correspondiente al anuncio dónde yo digo de poner un texto o una imagen ;)

    ResponderEliminar
  24. Lo siento oloman pero no he entendido, solo veo que dices de xrear un DIV, das un codigo y nada mas. Es como quedarme a medias, no soy un experto en esto y no se donde hay que pegar el codigo, ya que me da error en la plantilla cada vez que lo hubico donde quiero. Saludos!

    ResponderEliminar
    Respuestas
    1. Eso se explica en el punto 2, justo después de dónde veas data:post.body. Y si te da error el div es posible que le falte algún carácter. Prueba con uno sencillo o copia alguno de los que se ponen aquí de ejemplo. Una vez te funcione ya cambias el contenido.

      Eliminar
  25. Te comento que en mi plantilla hay tres DATA:POST.BODY. ¿Cómo sé cuál usar?

    Las tres están en medio de este contexto:

    div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
    data:post.body/>
    div style='clear: both;'/>

    ResponderEliminar
    Respuestas
    1. Yhorman, erraste el post al comentar aquí. Lo hiciste por primera vez en lo de "Entradas sólo con título" y allí te contesté ;)

      Eliminar