Mi-buscador-con-gafas

Separadores en tus entradas (Freebies) y cómo colocarlos

¡Muy buenas!:

¿Me echabas de menos? Pues me complace decirte que mi entrada de hoy te va a dejar un estupendo sabor de boca y va a hacer que tu blog quede aún más bonito y personalizado. Esta entrada es la señal inequívoca de que ya estamos metidos de lleno en la vuelta al cole, lo cual no ha de ser necesariamente malo... Al menos, mi pretensión es darte una pequeña alegría. Con esto que hoy te voy a enseñar aprenderás a insertar bonitos separadores en las entradas de tu bitácora y  presumirás de sitio a todas horas.

Suena bien, ¿verdad? Pues, si te parece, cambia esa cara de pocos amigos con la que te has levantado al ver la lluvia y retomamos mi saludo inicial. Verás como recuperas esa bonita sensación de cuando eras pequeño y estrenabas libros, estuche, mochila...



Muy buenas a todos

¿Con ganas de ponerte a la faena, verdad? Pues no seré yo, quien ponga freno a tu ímpetu por aprender. Sin embargo, antes de comenzar quiero admitir que el truco lo he aprendido de manos de MissLavanda, así que todo el mérito es de ella, en cuanto al código, que en sí es la parte más complicada de este asunto, pero no tanto como para requerir contar con estudios avanzados de Física Cuántica, así que no desesperes antes de tiempo, ¿vale? En cuanto a mi papel en todo este tinglado... Yo contribuiré a ello con mi pequeño granito de arena, en forma de bonitos separadores creados con todo cariño para ti, a través de Canva, y que podrás descargar de forma gratuita para aplicar en tu sitio. Eso sí, te agradecería, por supuesto, que si te preguntan en alguna ocasión dónde lo has conseguido remitas a esta entrada, y así el interesado lo consigue directamente desde su lugar de origen, y a mí me reporta una nueva visita. No es mucho pedir, ¿verdad?

¿Empezamos? Pues adelante:


  • Primero descargas la imagen que colocarás al final de los posts a modo de separador. No seas impaciente y antes de pasar directamente a la carpeta de descargas que te traigo, lee todo esto detenidamente.
  • Guárdala en algún hosting de imágenes.
  • Vete al post donde Laura nos explica el proceso para la instalación de los separadores.
  • Copia en el portapapeles el código que nos ha enseñado Laura en su estupendo tutorial. Seguro que cuando lo veas aplicado saltarás de alegría.
  • Vas, tal y como menciona Laura, a tu Plantilla, para insertar este nuevo elemento en el HTML. Como queremos evitarnos lloros innecesarios, haremos previamente a ningún cambio, una copia de seguridad de ella (botón gris, junto a la ruletilla de la parte superior derecha. Dejo un pantallazo).


Captura copia seguridad plantilla


    • Entonces y sólo entonces, podrás tocar sin miedo en la opción: "Editar HTML", que aparece bajo la imagen de "El Blog ahora".

Captura Editar HTML


  • Con el cursor dentro del recuadro que contiene el extenso código HTML de nuestra plantilla, tecleamos Ctrl + F. Nos saldrá un cuadro de búsqueda. En él escribimos: ]] Y seremos enviados directamente a la única línea que contiene esos signos, que es la que marca la parte final del CSS de nuestra plantilla: ]] Es decir, donde se inserta el código que embellece todo en nuestro blog.








  • Copiamos el código que Laura nos facilitó. Pero de momento no guardamos nada, pues nos falta aún la url de la imagen a incorporar como separador.
  • Abrimos en otra pestaña de nuestro navegador, sin cerrar la de Blogger que teníamos en uso, nuestra web de alojamiento de imágenes. Si no tienes ni idea de dónde guardar tus imágenes, te recomiendo www.tinypic.com Es una web gratuita, de fácil manejo y que no requiere complicarse la vida para darse de alta. Eso sí, la publicidad puede ser un poco molesta a veces. 
  • Si optas por Tinypic, el enlace que habrás de insertar para la url, en el código que vamos a utilizar, es el último que nos facilita esa web para nuestra imagen. Dicho de otro modo, el que se designa como: "Enlace directo para presentaciones"
  • Lo copias en el portapapeles (no cierres esa pestaña del navegador, por si acaso).
  • Vuelves a tu plantilla en Blogger, y suprimiendo lo que viene en el paréntesis del código facilitado por Laura, lo sustituyes por el enlace creado en Tinypic.

      • Como ves, en el ejemplo ya he sustituido la url por la de una imagen. Obviamente no es una imagen real, me la he inventado para que vieras el resultado. Sea como sea, el código completo quedaría una cosa así, más o menos:

     .post {
    background: url(http://i29690.tinypic.com/2itftdf.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 2.5em;
    padding-bottom:3em; /*Con esto variamos la distancia entre el separador y el pie de la entrada*/
    }

    Los espacios son tan importantes en los códigos como los propios comandos en sí, así que respétalos. 
    • Es muy importate que antes de aceptar un cambio des a "Vista previa". Como nuestra imagen ha de aparecer al final de los posts, ve bajando con el scroll de la derecha, en el navegador, hasta llegar al final de uno, y comprueba que la imagen sale tal y como querías. Está todo en su sitio, ¿verdad?
    • Como te ha salido todo perfecto, ya tienes vía libre para darle a "Guardar plantilla". Y a partir de ahora, ya puedes presumir orgulloso, de un separador de entradas.
    Por supuesto, dejo el postre para el final, para que así el buen sabor de boca te dure más tiempo... Si relees el título de esta entrada, prometía freebies, y eso es lo que te traigo, por supuesto. Ya sabes que no me gusta faltar a mi palabra. Así, que aquí te dejo una carpeta con todos los separadores que he creado para descargar. Son de descarga gratuita, pero te agradecería que si alguien te pregunta dónde lo has conseguido, remitas a esta entrada, que sería el post original, y de esa forma, su visita me devuelva créditos. No es mucho pedir, ¿verdad? (Menuda sensación de déjà vu, ¿a que sí?). Es que soy muy pesada a veces, lo admito...

    Y siguiendo con mi papel de cansina... te explico, un poquito lo que vas a encontrar en esa carpeta de descarga, ¿vale? Los separadores son un total de 15: repartidos en 5 modelos, cada uno de ellos en 3 colores. Te recomiendo que selecciones una vista previa de cada uno antes de la descarga. Para que te formes una idea más real de cómo son, pues algunos son aparentemente muy sencillos, pero presentan un bonito detalle en los extremos. Y bueno, no desvelo nada más, para no romper la sorpresa.



    Carpeta de descarga



    ¡Disfrútalos! Y si te ha gustado mi entrada de hoy, no dudes en compartirla en todas las redes sociales que te vengan a la mente. Así también yo daré saltitos de alegría.


    Un besazo. Nos vemos en unos días, a las 10:30, hora peninsular.

    ANEXO (21/11/2918): si ya has modificado tu plantilla con anterioridad, el código anterior no te va a funcionar, con lo cual tendrás que recurrir a buscar la siguiente secuencia en el código HTML de tu plantilla. A veces es complicado encontrarlo a la primera, así que prueba a buscarlo parcialmente hasta que des con él,:

    <b:include data='post' name='post'/>


    Y bajo esa línea de código añade esta otra. Por supuesto con la url de la imagen que quieres incorporar al diseño de tu blog como separador o divider entre las entradas.

    <center><img src='URL de la imagen'/></center>


    El blog al que remitía para ver este truco aplicado, era éste en el que te encuentras ahora, pero lo he modificado tantas veces y he cambiado tantas veces su plantilla que actualmente esto ya no está implementado. No obstante, lo puedes visualizar en otro de mis blogs: www.crónicasdelalocaquecazabanubes.com

    6 comentarios

    1. Hola!
      Muchas gracias por compartir el tutorial con nosotros y hacer una explicación tan clara y además tan amena.
      Sin lugar a duda me haz hecho sonreír.
      Ya le eche un vistazo a los freebies que nos compartes y están preciosos, de seguro a más de uno les servirán.
      Gracias!
      Besos

      Believe in Yourself 

      ResponderEliminar
      Respuestas
      1. Gracias a ti, Isabel. Anda que no tendrás tú más que dominado este tema. Un besazo, guapa.

        Eliminar
    2. Gracias por compartir este post, lo has explicado genial, especial para las que andamos mucho para lograr las propuestas que hay colocar en los blog, besos mil

      ResponderEliminar
      Respuestas
      1. Me alegra saber que te resulta fácil de comprender. No las tenía todas conmigo, la verdad. Un besazo.

        Eliminar
    3. Qué bien volver a tenerte por aquí!!!
      Están muy chulos. Me ha gustado mucho el de las hojitas en rosa.
      Gracias por compartir!!
      XOXO

      ResponderEliminar
      Respuestas
      1. Gracias a ti por comentar y pasarte. Un placer hacer estas cosillas y compartilas. La pena es que mis conocimientos sean tan escasos. Un besazo.

        Eliminar

    ¡Qué alegría que me dejes tu comentario, desvanero! Me encanta tenerte aquí. ¡Sé feliz!