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.
