Efecto Glub

Hey babies! Últimamente no dejaba de darle vueltas a una estupidez, pero que me traía de cabeza y es cómo enseñar las previews de los menús y efectos... hoy (cuando estoy escribiendo esto) por fin hallé la solución y es que hace unos meses me cree un tumblr nuevo para promocionar el blog y a pesar de que lo tengo abandonado desde hace un tiempo, he decidido crear ahí las previews, así están individualizadas y me gusta más, a ver qué os parece. Para celebrarlo (lol, cualquier excusa es buena para celebrar), hoy traigo un efecto súper cute llama Glub, que hace mucho que no traigo ninguno.

P R E V I E W

1. Vamos a Tema > Personalizar > Editar HTML y buscamos ]]></b:skin> y encima pegamos el siguiente código:

.glub {
background: #C6D5FE;
padding: 4px;
border: 1px solid #BDCFFF;
box-shadow:inset 2px 2px 2px 2px #BDCFFF;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
-webkit-transition-duration: .80s;
}

.glub:hover {
background: #C6D5FE;
border: 1px solid #BDCFFF;
padding: 4px;
box-shadow:inset 2px 2px 2px 2px #BDCFFF;
-webkit-border-radius: 60px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 60px;
-moz-border-radius-bottomright: 0;
border-radius: 60px;
border-bottom-right-radius: 0;
-webkit-transition-duration: .80s;
}

Por supuesto, todo es personalizable, pero lo que está en negrita es lo que yo recomiendo cambiar.

2. Ahora lo único que hay que hacer es añadir un nuevo gadget HTML/Javascript y añadir el siguiente código tantas veces como nos interese, cambiando lo que está en negrita:

<a href="LINK" title="Título"><img src="LINK IMAGEN" class="glub" /></a>
<a href="LINK" title="Título"><img src="LINK IMAGEN" class="glub" /></a>
<a href="LINK" title="Título"><img src="LINK IMAGEN" class="glub" /></a>

Y voilà, tenemos un efecto muy bonito para usar, por ejemplo, en nuestros afiliados. ¿Qué os parece?