Círculos en el gadget linkwithin o quizá te interese

Hola a todos!! Recuperamos la normalidad en el blog, por lo menos por esta semana. Ya os contaré ya... en diciembre la que se va a montar. Pero bueno, mientras ultimo los detalles del nuevo curso (cruzo los dedos para que los vídeos se suban esta semana) os traigo un tutorial para blogger muy sencillito. Hacía tiempo que lo tenía pensado y hoy, por fin, me lanzo a escribirlo.

Se trata de poner unos círculos, en vez  de cuadrados en nuestro gadget de quizá te interese o Linkwithin. Yo lo tengo puesto así y la verdad es que me encanta. Si os interesa os lo intento explicar con todo detalle

Ah! y aprovecho para disculparme con todas las colaboraciones acumuladas, poco a poco iréis apareciendo en el blog, que no me olvido. Yo tenía todos los post organizados... pero al final me he pasado la organización por el arco del triunfo!! Así tal cual!! Pero ahora vamos con lo que nos interesa, el tutorial.

Lo más probable es que todos, o casi todos, tengáis este gadget instalado en vuestro blog. Si no lo tenéis yo os recomiendo que lo tengáis para facilitar la navegación a vuestros lectores. Es el mejor método para que alguien se pierda un ratico en nuestro blog y quede enganchado totalmente.

Tutoriales para instalar gadget Linkwithin o historias similares:

Hay muchos blogs donde nos explican cómo instalar este gadget: personalización de blogs, las creaciones de Bea y Natalia... Así que por instalar el gadget no va a haber ningún problema. Id a uno de los tutoriales e instaladlo, que se hace un momentín (yo os espero) ;)

Una vez que tengamos instalado este gadget y colocado debajo de nuestras entradas, llega la hora de tunearlo. No os asustéis. Vais a ver una parrafada de código increíble, pero yo os voy a decir qué tenéis que hacer para que quede perfecto.

Código que vamos a copiar y pegar:

Este es el jaleo de código que vamos a tener que copiar y pegar. Yo lo he dejado preparado para que ya salgan los círculos. No obstante os he remarcado algunas de las partes que podéis cambiar para que quede bien con vuestro blog. AH! y doy por hecho que ponéis alguna imagen en vuestros posts, porque las necesitamos para que salgan en el círculo. Con que pongamos una será suficiente 

*Consejo: a veces sale la imagen que aparece en este gadget en negro, eso es porque la primera imagen que aparece en nuestro post es un PNG si no quieres que pase eso, sube la imagen en JPG.

Una vez que lo copiemos vamos a:

• Plantilla
• Personalizar
• Avanzado
• Añadir CSS: ahí mismo lo vamos a pegar y desde ahí lo vamos a modificar. Esto nos permite ver los cambios que vamos haciendo.

/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #FFFFFF;
padding: 0 10px;
}
.linkwithin_text {
font-size:16px; 
color:#cccccc;
}
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; 
}
.linkwithin_posts {
width: 500px !important; 
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: none !important; 
-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 { 
-webkit-border-radius: 50px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #aaaaaa !important; 
font-family: Verdana !important; 
font-size: 13px !important;
line-height: 14px !important;
text-align:center;
text-decoration: none;
}

.linkwithin_title:hover {
color: #FAA394 !important;
font-weight: normal !important;
}

Personalizar el gadget:

Ahora os voy a indicar los cambios que podéis hacer. Si copiáis y pegáis el código tal cual os lo he puesto va a funcionar perfectamente, pero puede ser que los colores no vayan con vuestro blog o que vosotros prefiráis otra cosa, así que os voy a desglosar las partes que he señalado. 

Todas las modificaciones las vamos a hacer desde el apartado de Añadir CSS, donde habéis tenido que pegar este código. Podréis ir viendo los cambios a medida que los hagáis

Este código es el que nos permite poner un fondo a todo el gadget. He puesto el color blanco como fondo predeterminado, pero podéis poner el color de fondo que vosotros queráis. 

background: #FFFFFF; /* COLOR DE FONDO*/ 

Para elegir un color:

• Solo tendréis que ir a esta página y elegir el que más os guste. 
• Abajo aparecerá el código de color correspondiente. 
• Lo copiáis y lo pegáis en esa parte del código.

Si queréis que el fondo sea transparente, tendremos que poner la palabra none. No os olvidéis del punto y coma al final, que sino no saldrá.

background: none; /* COLOR DE FONDO*/ 

El siguiente código que os he remarcado es el que corresponde al color del título del Gadget. Es decir, donde aparece el título quizá te interese o lo que vosotros hayáis elegido. Por defecto yo lo he puesto en gris, pero podéis seguir los pasos anteriores para cambiar el color del título:

color:#cccccc; /* COLOR TÍTULO GADGET*/

Como la idea de este tutorial es conseguir que las imágenes de los posts del gadget de Linkwithin salgan redonditas yo os aconsejo que no toquéis el código que he remarcado en amarillo. Si ponéis menos píxeles (px) en ves de circular se os redondearán las esquinas pero no quedará circular.

-webkit-border-radius: 50px !important; /* ESTO HACE QUE SEA REDONDO*/

El siguiente código es el que corresponde al color del título de la entrada sin seleccionar. También le podremos cambiar de color siguiendo los pasos anteriores (es  muy repetitivo, lo sé, pero no quiero que os perdáis).

color: #aaaaaa !important; /* COLOR DEL TÍTULO SIN SELECCIONAR*/

El código seleccionado en color naranja hace referencia al tamaño de la fuente del título de la entrada. Por defecto os he puesto el tamaño 13px que yo creo que es un buen tamaño para el texto. Si no lo modificáis mejor que mejor.

font-size: 13px !important; /* TAMAÑO DE LA FUENTE*/

Y por último el color azul nos indica el color que va a tener el texto cuando pasemos el ratón por encima. De forma predeterminada he puesto un color salmón pero, como ya os he dicho más arriba podéis elegir el color que más os guste.

color: #FAA394 !important; /* COLOR DEL TÍTULO SELECCIONADO*/

Cuando hagáis todas las modificaciones que queráis dentro del apartazo Avanzado< añadir CSS, pulsaremos en aplicar al blog y listo!! Ya tendremos nuestras imágenes redondeadas. Si os ponéis veréis lo fácil que es y así soluciono una duda que me llega mucho al email. 

cursos para mejorar tu blog

MEGA PACK DISEÑA TODO Y MÁS

pack carteles con todo el rollo

Curso diseño corporativo

pack emprendedor

75€ +INFO

35€ +INFO

35€ +INFO

50€ +INFO

catálogo completo  de cursos online

Y esto es todo por hoy. El próximo día que me leáis será para anunciar el nuevo curso de DISEÑO CORPORATIVO que será, yo creo, incluso mejor que el curso de diseño fácil con Power Point. Confío en que el jueves (a alguna hora del día) estará, sino es así, esperadme por favor!!!! ;)

Millones de gracias por ser taaaannn majos como sois y feliz martes!

N E W S L E T T E R

NO TE VAYAS SIN DESCARGAR  EL EBOOK GRATIS PARA EMPEZAR A DISEÑAR

SI TE HA GUSTADO ¡COMPÁRTELO!