13 marzo 2016

2 Gadgets para sugerir entradas al final de tus posts, totalmente personalizables [Tutorial]

sugerir-entradas-al-final-de-tus-posts


Conseguir que nuestras visitas, se queden más tiempo navegando en nuestras páginas es un objetivo esencial para lograr que nuestro blog crezca a buen ritmo. El número de páginas vistas es un ingrediente importantísimo para conseguir posicionar mejor en buscadores.

Por eso hoy quiero mostrarte 2 maneras de sugerir otras entradas del blog al final de tus posts. Y lo mejor de todo es que son 100% personalizables. Además en la segunda te doy 3 opciones de personalización diferentes, para que se ajuste al máximo a la estética de tu blog. ¿Qué me dices? ¿Empezamos?







Como ya habrás visto, al final del post, tienes un nuevo elemento para que puedas seguir descubriendo contenido interesante en el blog. Este gadget, junto al Indice tienen el objetivo de poder darte un mejor servicio y que no te pierdas información que te ayude a seguir avanzando con tu blog.

Además es maravilloso para aumentar el tiempo de estancia de las visitas y que nuestros posts no queden en el olvido porque...


Con nuestros contenidos pasa lo mismo que con el dinero: cuesta mucho generarlos y muy poco consumirlos.Tuitéalo



Así que sin más, vamos a meternos en faena para que lo tengamos funcionando en un plis-plas.




1. GADGET DE ENTRADAS RECOMENDADAS CON LINKWITHIN



Este ya es un clásico y es muy conocido en la comunidad Blogger, por eso es uno de los más usados. El problema que tiene, es que hay que saber instalarlo para que se muestre correctamente y que incluye su publicidad en la parte inferior derecha. Pero tanto una cosa como la otra, la vamos a solucionar ahora mismo.




como-instalar-gadget-entradas-relacionadas-linkwithin


  Antes de empezar, dirígete a Plantilla>Editar HTML (recuerda hacer siempre tu copia de seguridad antes de realizar un cambio en la plantilla). Clica en cualquier lugar dentro de la plantilla y pulsa Ctrl+F para que se abra la cajita de búsqueda. Ahora pega dentro este texto <data:post.body/>  y dale a intro para comenzar la búsqueda.
Si tienes dos líneas con <data:post.body/> pon este código justo debajo de la segunda:





<b:if cond='data:blog.pageType == "item"'>

<!--Entradas relacionadas con miniaturas. -->

<!--El script del proveedor que selecciones va debajo de esta linea -->



</b:if>



  Guarda la plantilla y dirígete a Linkwithin. Nada más entrar, encuentras un recuadro en la esquina inferior derecha, donde deberás introducir tu correo electrónico, la dirección del blog, la plataforma donde se encuentra (no pongas Blogger, clica en Others), el número de entradas sugeridas que quieres que aparezcan bajo tu post y en caso de que tu blog contenga texto claro sobre fondo oscuro, marca la casilla, antes de darle a Get Widget.



tutorial-linkwithin-sugerir-entradas-al-final-del-post


  Cuando te lo muestre, copia sólo el ID, que es lo que tendrás que pegar en el siguiente código que te muestro (te aconsejo que copies los códigos que te voy dando en un documento de texto, para editarlos cómodamente). Además podrás personalizar también el texto que quieres que aparezca:



<div class='linkwithin_div'/>

<script>

var linkwithin_site_id = TU_ID_AQUI ;

</script>

                                      <script>linkwithin_text='Texto para sugerir tus entradas'</script>

<script src='http://www.linkwithin.com/widget.js'/>

<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>






tutorial-linkwithin-sugerir-entradas-blog


  Una vez que has rellenado el ID y has escrito tu texto personalizado para presentar otras entradas del blog (por ejemplo, Quizás te pueda gustar), tienes que introducir este script , dentro del código que te mostré al principio del post, y que debes situar debajo del segundo <data:post.body/> . Quedaría de la siguiente forma:



<b:if cond='data:blog.pageType == "item"'>

<!--Entradas relacionadas con miniaturas. -->

<!--El script del proveedor que selecciones va debajo de esta linea -->

<div class='linkwithin_div'/>

<script>

var linkwithin_site_id = TU_ID_AQUI ;

</script>

<script>linkwithin_text='Texto para sugerir tus entradas'</script>
<script src='http://www.linkwithin.com/widget.js'/>

<a href='http://www.linkwithin.com/'><img alt='Related Posts Plugin for WordPress, Blogger...' src='http://www.linkwithin.com/pixel.png' style='border: 0'/></a>

</b:if>




  Guarda los cambios en la plantilla y con esto, ya deberías visualizar tus entradas sugeridas bajo cada una de tus entradas. Eso si, si hace poco que has comenzado con el blog y tienes pocas entradas publicadas, no aparecerán hasta que tengas las suficientes para que puedan ser recomendadas. Esto se hace más patente aún, si has elegido el máximo de entradas en Linkwithin, que son 5. Hasta que no tengas mínimo esas 5 entradas para sugerir, no se visualizará.

Con Linkwithin, las entradas aparecen cuadradas y un poco sosillas, además de incluir su branding en la parte inferior, pero no te preocupes porque tiene remedio. Si te gusta personalizarlo todo, échale un vistazo a este post de Creative Mindly, que May te explica cómo añadirles color, quitar el enlace a Linkwithin y hasta poner las imágenes redondas.



Los códigos y el script, para crear las entradas sugeridas, se lo debemos a Jesús de Inicia Blog, que se ha molestado en buscar una fórmula que nos minimice los problemas a la hora de instalar este gadget tan eficaz en nuestro blog. No dejes de visitarlo, porque tiene muy buenos contenidos que te ayudarán a avanzar en Blogger y además, en el enlace que te he dado, te muestra otras maneras de incluir entradas relacionadas en tu blog (aunque menos personalizables).



2. GADGET DE ENTRADAS RELACIONADAS TOTALMENTE PERSONALIZABLE



Fíjate que en la 1ª opción decía Entradas recomendadas y en esta lees Entradas relacionadas. Y esa es una de las ventajas de este gadget con respecto a Linkwithin , aunque tiene muchas más como vas a comprobar.

Para mí el poder mostrarle al lector entradas relacionadas, es fundamental para darle una mejor experiencia de navegación en mi blog, porque considero que si esa entrada le ha gustado, también le puede interesar descubrir otros contenidos relacionados que ofrezco. Para esto es necesario que tengas organizadas tus entradas por etiquetas. Yo por ejemplo en mi blog, tengo 9  etiquetas fundamentales: Blogging, Freebies, Marketing, Motivación, Normativa 2.0, Organización, Photoscape, Seo y Tutoriales. Cada vez que edito una entrada, me preocupo de asignarle la etiqueta correspondiente. De esa manera las visitas, pueden investigar en profundidad la temática que le interesa.

Este gadget es fantástico, porque toma como referencia las etiquetas, para mostrar entradas que las contengan. Pero no sólo eso, para instalarlo no necesitas de ningún servicio externo, por lo que te ahorras registros y que la aplicación en cuestión te añada su branding o condiciones. Y por si fuera poco, lo puedes personalizar completamente a tu gusto. Yo te voy a sugerir 3 formas distintas, pero si te das traza con el CSS, le puedes hacer lo que te dé la gana. Además te lo voy a enseñar con detalle en videotutorial, para que lo hagas paso a paso, sin ningún problema. Pero antes, te voy a mostrar las 3 opciones de personalización.




1ª OPCIÓN

La primera es la que puedes ver al final de la entrada. Es la más sencilla de todas, pero es que a mí me gusta que el diseño sea minimalista, por eso he adecuado el gadget para que no contenga demasiadas florituras. Este es el resultado, si te gusta, podrás adecuarlo a la paleta de tonos de tu blog, sin problemas:



gadget-de-entradas-recomendadas-html

La tabla que contiene el fondo de color rosa pálido, te muestra el efecto de cambio de color al pasar el ratón. Puedes verla con detalle, al final del post.



2ª OPCIÓN


Otra alternativa es añadirle relieve y redondear el marco de la imagen. Pero además podrás crear el efecto rotación, que es muy atractivo y se activa al pasar el ratón. Puedes verlo en acción, en este blog de pruebas:


gadget-entradas-recomendadas-efecto-rotacion-html




3ª OPCIÓN


Si prefieres que las imágenes sean redondas, puedes tener idéntico resultado a la 2ª opción, variando un poquito el código. También le puedes añadir el efecto rotacíon. En esta plantilla prediseñada, puedes ver cómo queda:


gadget-entradas-relacionadas-tutorial-html


Y ahora llega el momento de los códigos y el videotutorial. Pero como hoy toca publicar contenido exclusivo en el blog privado, tendrás que unirte a la Comunidad Demo 2.0 para verlos. Si ya lo has hecho, no tienes más que entrar y acceder al post de hoy. Si aún no te has registrado, no esperes más para hacerlo porque es totalmente gratuito y te esperan muchos recursos e información exclusiva, para avanzar a paso firme con tu blog. ¿Quieres conocer todas sus ventajas? pulsa el botón y te las cuento  










No pierdas esta gran oportunidad de aprender a sacarle todo el jugo a tu blog, porque te vas a sorprender de lo que puedes obtener con él.

Y ahora, toca disfrutar del estupendo día que está haciendo, así que me marcho a tomar todo el sol que pueda y más. Espero que tú también exprimas al máximo el domingo, que el inicio de semana hay que afrontarlo con mucha energía.

Pero antes de irme, tengo unas preguntillas porque ya sabes que me encanta charlar en los comentarios. Así que, cuéntame ¿tenías ya un gadget de entradas recomendadas en tu blog? ¿qué modelo te ha gustado más? ¿cuales son tus planes para hoy?


Te espero abajo, que tengas un gran día!



Imagen portada: PinkPot



¿Te gustaría seguirme en tu lector de feeds favorito?





¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:




47 comentarios:

  1. Me va a ser superutil esta entrada porque yo siempre pongo dos enlaces a otras entradas pero lo hago en plan básico y con tu ayuda me va a quedar más bonito y profesional, yo no entiendo de estas cosas pero tengo una amiga que me lleva todo esto y voy a ponerla a ello, ya te contaré, un saludo
    Walkingtopennylane

    ResponderEliminar
    Respuestas
    1. Genial, verás que bien te viene. Sobre todo si tienes organizados tus posts por etiquetas, vas a notar un aumento considerable de páginas vistas. Ya me contarás, un saludo Penny!

      Eliminar
  2. Me parece muy útil y creo que le voy a dar mucha utilidad a tu post la verdad es que llevo fatal la parte técnica del blog y me cuesta un mundo ponerlo en práctica pero espero poco a poco desenvolverme cada vez mejor, gracias por tu ayuda

    ResponderEliminar
    Respuestas
    1. Poquito a poco, verás como lo vas poniendo como quieres. Sólo tienes que ir aplicando los tutoriales y te aseguro que aprenderás mucho. Me alegro que te haya venido bien Divinas Sanchez, un beso!

      Eliminar
  3. Me van a venir genial estos consejitos, no es que se me de bien toquetear el blog pero yo creo que estos consejos son muy útiles para un blog

    ResponderEliminar
    Respuestas
    1. Haciendo una copia de seguridad primero, no tienes que tener miedo. Está paso a paso explicado, por lo que es complicado que te equivoques y verás cómo te alegras de los resultados, un abrazo Nick Rivers!

      Eliminar
  4. Qué buen post.
    Aunque yo ya lo tengo instalado en mi blog, no está nada mal, saber como personalizarlo. Tomo nota y me quedo por aquí.
    saludos

    ResponderEliminar
  5. Ala...y a las de wordpress....de verdad que me vais a hacer q me vuelva de blogger....

    ResponderEliminar
    Respuestas
    1. Yo es que en Wordpress estoy pez, pero creo que allí debéis tener infinidad de plugins para ponerlos automáticamente, estoy segura. Con que le preguntes a San Google por Plugins de entradas relacionadas para Wordpress, fijo que te salen tropecientos ;) un beso Iza, ya me contarás!

      Eliminar
  6. Creo que haberme suscrito a tu blog, aunque sea hombre XD, es uno de los mayores aciertos para mi blog. Esta entrada la necesitaba: http://oi63.tinypic.com/2meuwwx.jpg
    Lo he modificado completamente para que cuadre con mi página y el efecto giratorio circular, es brutal, porque tengo esos efectos en mi página y buscaba justamente este gadget que creía que no existía...
    Yo no necesito un video de 30 minutos para hacerlo, pero de todas formas, todo el trabajo que te curras simplemente para que cualquier persona pueda hacerlo paso a paso es digno de mención y quitarse el sombrero, que nadie te quite esta afición y esas ganas por esto, me declaro fan incondicional aunque te haya encontrado por casualidad y no me fijara mucho al principio en tu web porque no me consideraba un target para él.

    ResponderEliminar
    Respuestas
    1. Muchas gracias Raude, me alegra muchísimo ver lo bien que adaptais los tutoriales a vuestros blogs, te ha quedado fantástico. Sabes que aquí eres bienvenido, esa entrada tenía que hacerla, para explicaros a los chicos, por qué seguiré hablando en femenino y para que todos seáis conscientes de que debéis conocer a vuestro público ideal, sin apartar a nadie, pero sí teniendo claro cual es el sector mayoritario de vuestro blog. Para mí lo más importante es que os sirva lo que cuento y te agradezco mucho que valores el curro que tiene, yo lo hago encantada y más cuando veo el resultado en vuestros blogs, un abrazo!

      Eliminar
  7. Muchas gracias, me paso por el blog privado, porque la segunda opción me ha gustado muchísimo, tengo la primera, y la verdad, no es que sean entradas relacionadas realmente.

    ResponderEliminar
    Respuestas
    1. Encantada de que te unas Ana Mia, las entradas relacionadas funcionan mejor, porque complementan la lectura del artículo añadiendo información sobre un mismo tema. Además, le vas a sacar mucho partido a la Comunidad Demo 2.0, ya me contarás ;) un beso!

      Eliminar
  8. Me ha encantado tu post y creo que me resultará muy útil. Lo pondré en práctica seguro. Saludos y gracias por compartirlo.

    ResponderEliminar
    Respuestas
    1. Me alegro mucho, seguro que notarás la diferencia. Gracias a ti por pasarte :) !

      Eliminar
  9. ¡Yo sí que estoy pez en estas cosas! Madre mía, es ver una tabla de programación y me vuelvo loca. ¡Qué trabajazo que tiene lo que has compartido! Espero poder encontrarlo en Wordpress por ahí. Un beso, guapa! Por cierto, me encanta el nombre de tu blog. ¡Me identifico plenamente! :)

    ResponderEliminar
    Respuestas
    1. Jajajaa, poco a poco, yo tampoco entendía un pimiento de código y aquí me tienes. Cuando te interesa mucho un tema, si persistes lo dominas. Es cuestión de práctica y tiempo. Seguro que lo encuentras en Wordpress, con sus tropecientos plugins, lo tienes mucho más fácil que nosotros :) un besote!

      Eliminar
  10. Gracias Raquel, de nuevo esta entrada va genial para personas como yo, que hace poco tiempo están en el mundillo blogger van aprendiendo poco a poco.
    Un saludo!

    ResponderEliminar
    Respuestas
    1. Me alegro un montón de que te sirva Elisa, veras como poco a poco lo entiendes todo perfectamente, un saludo!

      Eliminar
  11. No conocía tu blog pero solo puedo decir que me ha ENCANTADO. La entrada la encuentro muy interesante y ahora que estoy haciendo cambios en mi web, me irán genial. Además me dejo tu blog en favoritos para ir leyendo las otras entradas que seguro me serán de mucha ayuda. Muchos besitos!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Elena, seguro que te va a venir muy bien para personalizarlo a tu gusto y sacarle mucho partido, besotes!

      Eliminar
  12. Ay me encantan tus recomendaciones, a ver si saco un huequito en mi apretada agenda divina para poner en marcha todo lo posible por mejorar mi blog al máximo :) GRACIAS POR LOS CONSEJOS. Besos pink.

    ResponderEliminar
    Respuestas
    1. Jajaja gracias a ti, Palabra de Diva. El blog también hay que divinizarlo lo máximo posible, un beso!

      Eliminar
  13. Un post totalmente útil y práctico :)

    Muchas gracias por ello, me estás ayudando mucho!

    Un besazo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Sann, me alegro que te esté ayudando, eso es lo principal. Otro besazo para ti!

      Eliminar
  14. Genial! Yo tengo uno que me venía por defecto con la plantilla, aunque de la plantilla apenas queda nada, lo he ido personalizando casi todo. Y me va a venir bien tu post para darle un toque más personal. Como siempre mil gracias por tanta información útil, ya no sé qué haría sin ti!!! Un abrazo!

    ResponderEliminar
    Respuestas
    1. Ay, muchas gracias preciosa. La verdad es que lo tienes muy bonito y me alegra que te esté ayudando. Me hará mucha ilusión verlo personalizado cuando pase a divertirme con tus estupendos vídeos, un besazo!!

      Eliminar
  15. gracias por los consejos, me apunto a la comunidad!

    ResponderEliminar
    Respuestas
    1. Gracias a ti por unirte Esther, bienvenida, espero que le saques mucho partido. Un beso!

      Eliminar
  16. No te conocía pero desde ya me quedo !!!

    No me ha llegado el correo de confirmación todavía, pero intentaré hacer la opción 2 !!!

    Encantada de conocerte !!!

    ResponderEliminar
    Respuestas
    1. Marta, mira en la bandeja de spam o correo basura, lo mismo tu gestor de correos, me ha enviado allí. Te veo en la lista de los inactivos, así que hasta que no confirmes, no puedo darte el alta. El sistema doble opt-in, puede parecer un peñazo, pero es necesario para evitar suplantaciones de identidad. En cuanto esté la confirmación, te mando la invitación al blog privado. Muchas gracias por unirte!

      Eliminar
    2. Lo he vuelto a intentar, pero no me llega ningún correo a ninguna carpeta de confirmación...

      Habrá que esperar, pero siempre me llegan al momento cuando me he suscrito a newsletter...

      Siento marearte...

      Eliminar
    3. Sí, ya está mandada la invitación Marta, bienvenida!!

      Eliminar
  17. upppssss una última cosa... yo tengo puesto el de linkwithin pero sin tocar la plantilla en un gadget html... se elimina el gadget antes de hacer lo nuevo y listo no??

    Gracias

    ResponderEliminar
    Respuestas
    1. Claro, debes eliminar el de Linkwithin y cuando entres en el blog privado, sigue paso a paso el tutorial. Es fácil, pero si tienes alguna duda, solo tienes que decírmelo, un beso!

      Eliminar
  18. Respuestas
    1. Me alegro que te haya servido, gracias a ti Gaby!

      Eliminar
  19. Cada dia encuentro cosas nuevas que me encantan, mil gracias por todo!

    ResponderEliminar
    Respuestas
    1. Me alegra mucho que te sirva Esther, gracias a ti por comentármelo ;) !

      Eliminar
  20. ¡Hola!
    Estoy en plan renove en el blog he intentado poner las entradas relacionadas siguiendo tu tutorial (sin LINKWITHIN) y no hay manera que me funcione. Vamos he probado con todas las opciones, cuadrados, redondas... y nada, no se ve. ¿Tarda en que funcione?
    Es que he seguido el tuto mil veces y nada.
    Gracias.
    Besotes

    ResponderEliminar
    Respuestas
    1. Hola Carolina!
      pues pueden pasar 2 cosas:
      1/ que la plantilla que tienes, no sea compatible con el gadget, porque sea una plantilla prediseñada y el diseñador, haya metido códigos que interfieran.
      2/ que te hayas saltado algún paso. Este gadget se sirve de tus categorías (etiquetas en Blogger) para sugerir entradas relacionadas. Imagino que ese no será el problema, porque tienes tu blog muy organizado. Ahora mismo, como no estoy en casa, no puedo acceder a la Comunidad privada, para ver el código, cuando llegue lo miro. Porque hay veces que un código está repetido en la plantilla y si se mete bajo el código que no es, no funciona. Asi que, asegurate tambien de que los códigos que te digo que busques, no están repetidos. Si alguno lo estuviera, pega el HTML esta vez, bajo el otro código.

      Si te siguen quedando dudas tras mi respuesta, no dudes en escribirme o enviarme un privado, que te ayudo. El gadget funciona sin problemas, porque además no se vale de un script externo, sino que está instalado directamente en la plantilla. De todas maneras, lo puedes ver activo tanto en este blog, como en los enlaces que pongo a lo largo del post.
      Asi que nada, si sigues con el problema, avísame. Un beso!

      Eliminar
  21. Pues no sé, porque lo he hecho en mi blog y nada, lo he puesto en un blog de pruebas y nada, y también en la plantilla que estoy usando para la nueva imagen del blog (me he creado un nuevo blog de pruebas para ir haciendo los cambios allí jejeje)
    Nada chica, quizás blogger me tiene manía, pero no consigo que me funcione en ninguno de los blogs, y como no me mola LINKWITHIN, ya veré que hago...

    ResponderEliminar
    Respuestas
    1. Perdona que no te haya contestado antes, Carolina, pero apenas he parado en casa. La verdad es que es muy raro, que no te funcione en ninguno de los 3 blogs. Si quieres, me contactas por privado y le echo un vistazo personalmente, a ver si puedo hacerlo funcionar. Ya me dices :)

      Eliminar

demo