No sabes lo mucho que tardé en darme cuenta de que en realidad es muy sencillo personalizar gadget «Entradas relacionadas» de 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 muchas de vosotras tenéis este gadget en vuestro blog y , quiero que aprendas ya a personalizar gadget «Entradas relacionadas» de LinkWithin.
Si resulta que no tienes este gadget de «entradas relacionadas» 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 gadget «Entradas relacionadas» de LinkWithin 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 este gadget con LinkWithin
- Solo debe verse en la página de entrada completa, no en el inicio del blog o página principal, porque 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.
- 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 este gadget 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 «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 de este ejemplo 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=' Seguro que también te gusta: '</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 vamos a seguir los siguientes pasos para personalizar gadget «Entradas relacionadas» de LinkWithin:
1- Vamos en nuestro Blog de Blogger al apartado Tema del menú principal
2- Realizamos una Copia de Seguridad como siempre
3- Luego clicamos en Editar HTML
4- Vamos a buscar en nuestra plantilla HTML el siguiente código (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- Justo antes de este código que hemos buscado, vamos a añadir este Código CSS (este es el estilo del ejemplo):
/* ESTILO LinkWithin personalizado de www.monicalemos.es --------------------------------- */ .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.monicalemos.es --------------------------------- */
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 se adapte a tu identidad de marca. Puedes eliminar partes, modificarlas, añadirlas… lo que sea para conseguir el diseño que más se adapte a tu marca.
¿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.
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 🙂