Siempre que entro en un blog nuevo y me encuentro con el gadget que me muestra entradas relaccionadas, me engancho y acabo viéndome el blog pinchando links y voy de uno a otro sin parar.
Creo que es una de esas herramientas que facilitan la vida al blogero y que para el seguidor son un auténtico lujazo, como además el gadget de
LinkWithin es aleatorio, cada vez que vas y vuelves algo ha cambiado, y simepre encuentras entradas nuevas y vuelves a pinchar.
Una compañera blogera me pregunta cómo personalizarlo, así que voy a aprovechar para ponerlo en este blog, que aún no lo había puesto y así hago un tutorial de recuerdo para mí misma, porque soy de las que si no apuntan las cosas es como si nunca hubieran existido!!
Pirmero vamos a la página de
LinkWithin y rellenamos todos los datos que nos pide, y sobre todo recordar que al desplegar en las opciones de plataforma, tendremos que marcar
other.Y al aceptar nos generará un código.
Ahora vamos a blogger y en plantilla vamos a la edicion en html.Te aconsejo que guardes primero ( y que lo hagas frecuentemente, incluso exportando el blog!) Expandimos la casilla artilugios y buscamos el div post footer .Control + F si usas firefox. <div class='post-footer'>
Justo ahí debajo es donde pegaremos el código que nos dio linkwithin para empezar a cambiarle el aspecto.
Para que nos aparezca en cada entrada añadimos una línea delante del código: <div class='linkwithin_div'/>
Para cambiarle el título al gadget añadimos otra línea, el script del texto con lo que ahora ya vamos teniendo esto:
<div class='linkwithin_div'/>
<script>
var linkwithin_site_id = XXXX;
</script>
<script>linkwithin_text=' AQUI ESCRIBIMOS NUEVO TÍTULO: '</script>
<script src='http://www.linkwithin.com/widget.js'/>
Ahora volvemos a buscar en nuestra plantilla lo siguiente: ]]></b:skin> y subimos una línea para pegar más código encima.
.
linkwithin_div {
background: #XXXXX; /* EL COLOR QUE QUERAMOS PARA EL FONDO */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* TAMAÑO DE LA FUENTE DEL TÍTULO */
color:#XXXX; /* COLOR DE LA FUENTE DEL TÍTULO */
}
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 {
}
.linkwithin_posts {
width: 500px !important; /* TAMAÑO DEL GADGET A LO ANCHO */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #XXX !important; /* COLOR QUE QUERAMOS QUE APAREZCA AL PASAR EL RATON POR ENCIMA*/
-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 { /* CON ESTO CONSEGUIMOS QUE LOS BORDES DE NUESTRAS MINIATURAS SE VEAN REDONDEADOS EN ESTE CASO LE DOY UN RADIO DE 10PX*/
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #XXX !important; /* COLOR DE LA FUENTE EN LOS TITULOS DE LAS ENTRADAS*/
font-family: Verdana !important; /* FUENTE DE LOS TITULOS DE LAS ENTRADAS */
font-size: 13px !important; /* TAMAÑOS DE LA FUENTE PARA LOS TÍTULOS DE LAS ENTRADAS */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #XXX !important; /* COLOR QUE APARECE EN LOS TÍTULOS AL PASAR EL RATÓN POR ENCIMA */
font-weight: bold !important;
}
Este sería el código y tendríais que sustituir las XXX por los colores que queraís para vuestro widget.
El mío queda así con los colores elegidos:
.linkwithin_div {
background: #FFFFFF; /* */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* */
color:#3B0B24; /* */
}
a#linkwithin_logolink_0 {
display:none; /* */
}
.linkwithin_posts {
width: 500px !important; /* t */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #F2E0F7 !important; /* */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
}
.linkwithin_img_0 div, div.linkwithin_img_0 {
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #5f184a !important; /* */
font-family: Indie Flower !important; /* */
font-size: 10px !important; /* */
line-height: 14px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #9b82dd !important; /* */
font-weight: bold !important;
Podeis darle una vista previa y si os gusta, guardar la plantilla y a disfrutarlo.
Espero que se haya entendido, pero por supuesto cito la fuente de la que he aprendido yo y donde está el código original,es el blog de
ciudad blogger que está lleno de buenísimos tutoriales.
