Personalizar el gadget de LinkWithin

LinkWithin es un gadget que muestra las entradas relacionadas con una imagen en miniatura, y aunque no es un gadget nada nuevo, muchos no se animan a usarlo por su falta de personalización.

Así que en esta entrada vamos a ver cómo poner LinkWithin en el blog, y cómo personalizarlo.

Lo que le haremos al gadget será lo siguiente:

• Cambiar la ubicación del gadget.
• Agregarle un color de fondo.
• Cambiar el texto "Quizás también le interese" por algún otro.
• Pasarlo a castellano en caso de que esté en inglés.
• Eliminar el enlace de LinkWithin.
• Eliminar el borde que separa las entradas.
• Poner las imágenes redondeadas.
• Cambiar el color de fondo al pasar el cursor.
• Cambiar el formato de los títulos de las entradas.

Empecemos. Primero que nada hay que instalar el gadget, para ello entra a la página de LinkWithin, ahí llena los datos que te pide.

Aunque nos ofrece la opción de seleccionar Blogger como plataforma, seleccionaremos Other, para poner el código directo en la plantilla y así poder manipularlo. En el número de entradas (stories) selecciona un número de acuerdo al ancho de tus entradas, es decir, si el ancho de tus entradas es muy reducido entonces elige un número pequeño.

Al dar click en Get widget nos dará el código que debemos usar, es un código como este:

<script>
var linkwithin_site_id = XXXXX;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

Ese es el código básico, ahora entra a la Edición HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y pega el código debajo de:

<div class='post-footer'>

Al hacerlo eso ya tendrás el gadget de LinkWithin en tu blog, y el resultado será este.

Ahora será momento de comenzar a personalizarlo.

Si quieres que se vea sólo en las entradas individuales, encierra el código con una condicional.

Te darás cuenta que pongas donde pongas el código éste siempre se acomodará justo al terminar las entradas.

En las FAQ de la página de LinkWithin nos explican cómo solucionarlo, sólo hay que añadir, arriba del código que hemos pegado, esta línea:

<div class='linkwithin_div'/>

Eso hará que el gadget se muestre justo donde has colocado el código.
Aun cuando no quieras cambiar el gadget de lugar, agrega esa línea para poder personalizarlo como mencionaremos más adelante.

Algunas veces el gadget viene en inglés, o bien, el texto "Quizás también le interese" no es el que más nos gusta. Así que podemos cambiar ese texto por el que queramos, para ello agregaremos a nuestro código la parte que está en color rojo.

<div class='linkwithin_div'/>
<script>
var linkwithin_site_id = XXXX;
</script>
<script>linkwithin_text=' Entradas relacionadas: '</script>
<script src='http://www.linkwithin.com/widget.js'/>

Ahí podemos cambiar el texto por algún otro, en este caso hará que diga "Entradas relacionadas" en lugar de "Quizás también le interese".

El resto de la personalización la haremos con CSS, así que antes de ]]></b:skin> pegaremos lo siguiente:

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #EFF8FB; /* Color de fondo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamaño del título del gadget */
color:#084B8A; /* Color del título del gadget */
}
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; /* Con esto quitamos el enlace */
}

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

.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #819FF7 !important; /* Color de fondo al pasar el cursor */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
}
.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 { /* Bordes redondeados */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #0431B4 !important; /* Color de los títulos de las entradas */
font-family: Verdana !important; /* Tipo de fuente de los títulos de las entradas */
font-size: 13px !important; /* Tamaño de los títulos de las entradas */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}

.linkwithin_title:hover {
color: #000 !important; /* Color de los títulos al pasar el cursor */
font-weight: bold !important;
}

En color verde puedes ver a qué corresponde cada área que puedes personalizar, puedes agregar más estilos si lo deseas hasta obtener el diseño visual que más te guste.
El resultado será como este.

Como puedes ver, el resultado puede ser muy diferente al gadget original, y claro, puede adaptarse al diseño de cada plantilla y a los gustos personales de cada quien. De esta forma podrás ofrecerle a tus lectores entradas relacionadas al tema que están leyendo, y permanecerán más tiempo en tu blog.