SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
CONSEGUIR LO QUE QUIERES

NUNCA FUÉ TAN FÁCIL

Si quieres conseguir ciertos cambios en tu blog, renovar el diseño, arreglar algún problema, instalar alguna plantilla que te crea problemas...¡Puedo ayudarte! Envíame un e-mail a contacto@bloggerpasoapaso.com y hablemos.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger: Como personalizar gadget "Entradas relacionadas" de LinkWithin



No sabes lo mucho que tardé en darme cuenta de que en realidad es muy sencillo modificar este gadget que LinkWithin nos ofrece. Me pasé días, horas, buscando tutoriales y formas de poder personalizarlo. 

Con tanta búsqueda encontré otras alternativas a esta plataforma que nos proporciona un código muy simple aunque muy útil que más adelante os compartiré. Pero en este caso sé que muches de vosotres tenéis este gadget en vuestro blog (yo misma hasta el día de hoy por lo menos) y , quiero que aprendas ya a personalizarlo, para que no pierdas tanto tiempo como he perdido yo buscando y buscando la forma de lograrlo.

Si resulta que no tienes este gadget instalado en tu blog, te lo recomiendo ahora mismo, y también que sigas este tutorial que ya tengo publicado desde hace tiempo para instalarlo.

Una vez que lo tengas instalado vuelve aquí para poder personalizar por completo este gadget que te devolverá muchas visitas a tu blog.

Vamos a hacer primero una balanza de pros y contras de este complemento para nuestro blog, de entradas relacionadas, u otra forma de llamarlo gadget de "Quizás te interese..."


Pros y contras de usar LinkWithin para tu gadget de "Entradas relacionadas"

En realidad existen muchos más pros que contras, confieso que es el gadget que menos problemas me ha dado desde siempre y esto hace que la decisión sea sencilla de tomar, aunque siempre hay que tener en cuenta los contras para futuras mejoras.

CONTRAS de usar entradas relacionadas con LinkWithin


 Solo debe verse en la página de entrada completa, no en el inicio del blog o página principal, por que esto hará que tu blog tarde mucho más en cargarse y por lo tanto perjudicará mucho en todos los sentidos. Así que para esto debemos añadir un código que envolverá al que LinkWithin nos proporciona. (con el tutorial te lo explico)

 El diseño y estructura no son 100% personalizables, ya que el tamaño de las imágenes no se puede modificar, y si en algún momento se pudiera actualizaría este post, porque es algo super interesante. Pero por el momento no se puede, y tampoco se puede modificar el número de posts relacionados, más que 3, 4 o 5 post.

 Los posts sugeridos no se suelen relacionar con las etiquetas que se usa en el posts en el que se está, pero si tu blog tiene una temática concreta (que es lo más recomendable) esto no será un gran problema porque siempre estarán de alguna manera relacionados. 

PROS de usar entradas relacionadas con LinkWithin


  Es muy fácil de instalar.

 No da ningún tipo de problema y suele funcionar siempre.

 Puedes personalizar casi al completo su diseño de forma muy sencilla con un poco de HTML y CSS.

 Genera más páginas vistas enganchando al lector o a la lectora visitando más posts.



Con esto ya podemos pasar al

Tutorial para personalizar nuestro gadget de "Entradas relacionadas" con LinkWithin


Lo primero que debemos hacer es modificar el código si ya lo tenemos instalado y para eso, casi os recomiendo empezar de cero siguiendo los pasos que os comento en el post de instalación.


El código que LinkWithin nos proporciona (el mío es este pero no te valdrá a ti, tendrás que seguir el tutorial de instalación que te he compartido antes :)

<div class='linkwithin_div'/><script>var linkwithin_site_id = 2477629;</script><script>linkwithin_text=&#39; Seguro que también te gusta: &#39;</script><script src='http://www.linkwithin.com/widget.js'/>

Puedes observar que he subrayado en amarillo la parte que podemos modificar, ya que podremos poner lo que queramos o dejarlo en blanco.

Después ya podemos irnos al estilo :)

Para esto simplemente nos vamos a

1- Plantilla

2- Copia de Seguridad

3- Editar HTML

4- Buscar  (si no sabes cómo , mira este vídeo)

</b:skin>

Si no está expandido tendremos que darle a los puntitos azules que le preceden y volver a buscarlo.

5- Antes de este código que hemos buscado, vamos a añadir este Código CSS (este es el estilo que uso yo):



/* ESTILO LinkWithin personalizado de www.bloggerpasoapaso.com
--------------------------------- */
.linkwithin_div { /* Estilo del gadget completo, la "caja" donde está integrado*/
background: #fff; /* Color de fondo */
border-top: 1px solid #ccc; /* Estilo Línea superior */
border-bottom:1px solid #ccc;/* Estilo línea inferior */
height: 100%; /* Ancho */
    min-height: 100%; /* Ancho mínimo */
}

.linkwithin_text { /* Título del gadget  */
font-family: 'Lato' , sans-serif !important; /* Tipo de letra del título */
letter-spacing: 2px; /* Espacio entre caracteres */
font-size:12px; /* Tamaño del título  */
color:#000; /* Color del título */
font-weight: normal !important; /* Estilo del título, si lo quieres en negrita pon "bold" sin las comillas  */
text-transform: uppercase; /* Transformar título a mayúsculas, si no lo quieres elimínalo */

}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Eliminamos el enlace  publicitario de LinkWithin*/
}

.linkwithin_posts {
width: 700px !important; /* Ancho del gadget */
}

.linkwithin_posts a { /* Estilo de la caja donde se encuentra cada post recomendado */
border: 0 !important; /* Si le quieres un borde sustituye el cero por ejemplo por; 1px solid #000; y tendrás una línea negra alrededor */
padding-right: 10px !important;/* Espacio a la derecha */
}
.linkwithin_posts a:hover { /* Estilo de la caja donde se encuentra cada post recomendado cuando se pasa el ratón por encima */
background: #fff5f5 !important; /* Color de fondo de cada post al pasar el ratón */
}

.linkwithin_title { /*Estilo del título de los posts recomendados  */
color: #000 !important; /* Color de los títulos de las entradas */
font-family: 'Lato' , sans-serif !important; /* Tipo de fuente de los títulos de las entradas */
font-size: 9px !important; /* Tamaño de los títulos de las entradas */
line-height: 14px !important; /*Espacio entre líneas */
text-align:left; /* Texto alineado a la izquierda*/
letter-spacing: 1px; /*Espacio entre caracteres*/
text-transform: uppercase; /*El texto se transforma a mayúsculas*/
text-decoration: none; 
padding-bottom:-8px; /*Espacio debajo del título*/

}
.linkwithin_title:hover { /* Estilo del título de los posts recomendados al pasar el ratón */
color: #000 !important; /* Color de los títulos al pasar el cursor */
/* Puedes añadir más estilos si quieres */
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 { /* Estilo de la caja donde se encuentran las imágenes o miniaturas */
border:0 !important; 
/* Para poner imagen en redondo añade 
-webkit-border-radius: 50px !important;-moz-border-radius: 10px;
border-radius: 10px; 
*/
}
/* FIN ESTILO LinkWithin personalizado de www.bloggerpasoapaso.com
--------------------------------- */



Para usar tus tipos de letra, los que quieras, puedes ver el tutorial de instalar fuentes en tu blog.

6- Una vez añadido, tienes que ir viendo lo que quieres cambiar, con calma, teniendo cuidado de lo que escribes, no te comas comillas, puntos y comas, dos puntos, paréntesis... Son muy importantes. :)

7- Guardas plantilla y listo! :)


Ahora puedes jugar con diferentes opciones y conseguir el estilo que más te guste. Puedes eliminar partes, modificarlas, añadirlas... lo que sea para conseguir el diseño que más se adapte a tu blog a tus gustos y a tus necesidades.

¿Qué te ha parecido? No he hecho vídeo porque considero que ha quedado bien explicado de esta forma con anotaciones en cada parte del código, pero esto no significa que no me puedas pedir un vídeo si así lo ves necesario. Estaré encantada de resolver tus dudas, sean cuales fueren.

Cuéntame qué tal te ha resultado y si has modificado mucho el estilo para echarle un vistazo :)



Además recibirás una Check-List para que tus entradas siempre estén perfectamente preparadas para conseugir muchas más visitas y ganar buena reputación.

   

9 comentarios

  1. Llevaba tiempo buscando una ayuda así pero lo cierto es que no me ha quedado como el tuyo. No se ajusta al ancho de la entrada, no se cambiar el nombre (no encuentro donde está ese título) y tampoco me salen las rayas arriba y abajo... me ayudas?

    ResponderEliminar
    Respuestas
    1. Hola!!

      está todo lo mejor explicado que he podido, espero que ya lo hayas solucionado y si no es así ponte en contacto vía email conmigo,
      Gracias!

      contacto@bloggerpasoapaso.com

      Eliminar
  2. hola necesito ayuda ago todo al pie de la letra pero no aparece en mi blogs ya lo agregue automaticamente me sale que se agrego correctamente el gatget pero no aparece en mi blogs, restableci mi plantilla y nuevamente lo agregue manualmente y tampoco aparece en mi blogs https://ventadepeliculasyseresuman-merida.blogspot.mx/2017/04/blog-post_16.html ayuda x fa

    ResponderEliminar
    Respuestas
    1. Hola ,
      Lo siento pero tu plantilla está totalmente personalizada y no te puedo ayudar más que insistiendo en que repases bien cada paso.

      Espero que se solucione! Un saludo!

      Eliminar
  3. hola monica, hay alguna forma de quitar "you might also like" de la pagina principal?
    http://blogdeprueba1230.blogspot.com

    ResponderEliminar
    Respuestas
    1. En este post está explicado Aurora.
      Es lo que pone "Seguro que también te gusta..."
      Un saludo y gracias.

      Eliminar
  4. Hola buenas tardes. Primero la enhorabuena por el tutorial, perfectamente explicado, y lo he realizado a la primera. Solo me falta una cosita, jejeje, centrar el gadget. Como podría hacerlo? Mil gracias.

    ResponderEliminar
    Respuestas
    1. Genial Penelope, inténtalo poniendo la etiqueta central al principio y al final de esta forma (ignora los puntos!!!)

      código de LinkWithin

      A ver si así...

      Muack

      Eliminar
    2. Aun con puntos no me ha salido..

      Enviame un email desde contacto y te lo envío por correo. 💚👌

      Eliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.