Como añadir una biografía al final de tus posts

22.4.15

La semana pasada cuando publiqué un post en el blog de Neus Virgili, (el post más personal que he escrito hasta ahora, de temas que no trato aquí), me di cuenta que en Wordpress hay la posibilidad de añadir de manera sencilla una biografía del autor debajo del post.

La verdad es que me encantó la idea.

Me puse manos a la obra y hoy te presento el resultado!

El tutorial de como poner una biografía es de lo mejor que he escrito últimamente!

Te encantará!!!

Biografia Blogger



Seguro que en uno u otro blog has visto alguna vez una pequeña biografía del autor al final del post.

Pero claro, esto sólo lo hace quien tiene un blog Wordpress, ¿verdad?

No!

Hoy te enseño a poner en tu blog una pequeña biografía en tus posts, que quedará más que fantástica!

Cada vez que pienso en ello, me parece más fabulosa la idea!

Para que te hagas la idea, aquí tienes un ejemplo de como puede quedar (la de la foto no soy yo y el texto no dice nada! :) )

Biografia final post

¿Quedará bonito en tu blog, verdad?

Empieza la cuenta atrás para que también lo tengas en tu blog!

3, 2, 1…

Este tutorial lo he separado en varios apartados porqué hay bastantes cosas a hacer y no quiero que te lies!

Debo dejar claro que este tutorial funciona para la plantilla sencilla original de Blogger. Si has instalado otra plantilla muy personalizada, puede ser que no te funcione.



Las medidas


La biografía que hay más arriba tiene una altura de 150px y en mi opinión es una buena altura para una biografía.

El ancho debería ser el de tus posts:

el ancho de tu blog - el ancho de la barra lateral - 100px

Apúntate estas medidas en algún lugar, porque más adelante las necesitarás. (En un trozo de papel cualquiera!!)



La foto


Escoge la foto que quieras poner en tu biografía.

No tiene que ser una foto tuya.

Aquí encontrarás miles de fotos que te pueden servir para tu biografía.

Para que la foto quede como en el ejemplo de arriba, tiene que tener las medidas 150px x 150px. 

Si no tiene estas medidas la puedes recortar con cualquier programa/web de edición de imágenes.

Lo que necesitarás será la URL de tu foto (por si no te acuerdas qué es, te cuento donde la puedes encontrar).


  1. Crea una entrada nueva
  2. Sube la foto en la entrada, como lo haces siempre.

    Post blogger bio
  3. Passa al formato HTML del post.
    tutorial biografia
  4. Copia la URL de la imagen en algún lugar, porqué la necesitarás más adelante.
    La URL de la imagen es lo que hay después de

    href=" URL QUE NECESITAS"


Código HTML


Debes añadir un poco de código en tu plantilla HTML.

Antes de hacer cualquier cambio no olvides en hacer una copia de tu plantilla, por si acaso te pasa algo!

  1. Entra en Plantilla
    codigo biografia blogger
  2. Pincha en Editar HTML
    Css bio blogger
  3. Clica en el código.
  4. A continuación presiona Control f (o Command f si estás en Mac) y te aparecerá la caja de búsqueda.
    Crear biografia blogger
  5. Busca el siguiente código


      post.hasJumpLink

  6. Deberás ver este código


    <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link'>
            <a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Leer más</a>
          </div>
        </b:if>


  7. Justo encima del código anterior, pega este código si en tus posts tienes la opción de "Leer más" (en la página principal no muestras todo el post)


      <b:if cond='data:blog.pageType == "item"''>
       <div class='biografia'>
         <p class='bio-contenido'>AQUI VA TU BIOGRAFIA</p>
       </div>
      </b:if>


    Si en la página principal muestras el post entero, pega este otro codigo


      <div class='biografia'>
         <p class='bio-contenido'>AQUI VA TU BIOGRAFIA</p>
      </div>


  8. Donde pone AQUI_VA_TU_BIOGRAFIA tienes que escribir el texto que quieres mostrar debajo de tus posts.

    Te recomiendo que no sea muy extenso.

    Vale más bueno y breve, que largo y mal redactado.
  9. No olvides de guardar los cambios realizados!!
    Biografia post

Código CSS


Ahora te falta añadir un poco de código CSS y ya habrás terminado.


  1. Entra en Plantilla

    Codigo blogger tutorial
  2. Pincha en Personalizar
    Blogger bio post
  3. Clica en Avanzado --> Añadir CSS

    Platilla blogger

  4. Añade el código siguiente en el recuadro blanco de la derecha

    Este es el código que he utilizado para el ejemplo, pero tu puedes personalizarlo a tu gusto.


     .biografia {    
       background: #fee202 url("URL_DE_TU_FOTO") left no-repeat;
       width: 625px;    
       height: 150px;
     }

     .bio-contenido {    
       width: 400px;    
       font-size: 15px;    
       padding-left:170px;    
       padding-top: 20px;    
       color: #666666;    
       position: relative;
     }



    ¿Qué puedo cambiar del código anterior?

    URL_DE_TU_FOTO --> Debes poner la URL que has buscado en el apartado de arriba "Foto".
    width --> Es en ancho de la biografía entera. Mira en "Medidas".
    height --> Es la altura de la biografía, o sea, la altura de la foto que hayas escogido.

    width --> es el ancho del texto.
    font-size --> el tamaño de la fuente.
    padding-left --> el espacio  entre el lado izquierdo de la biografía (foto) y donde empieza el texto.
    padding-top --> el espacio de encima del texto.
    color --> el color del texto



  5. No olvides de aplicarlo a tu blog!!

    aplicar blog


Espero que te haya gustado!

La verdad sea dicha es que es un tutorial muy completo y muy original!

Sé que sabrás apreciar el trabajo que hay detrás de este post!

¿Lo puedes compartir para que llegue al máximo de gente posible? Hoy vale mucho la pena! :)

Muchas gracias y buena semana.

Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.