Efecto zoom para los afiliados

Buenos días para todos mis angelitos, hoy les traigo otro nuevo tutorial. Este es sobre como colocar un efecto zoom a los links de afiliados ♥

Vista previa:

Love Love Love Love

También puedes verlo ya personalizado en el sidebar de mi blog de pruebas♥

Para tener este efecto en tu sección de afiliados debes  seguir los siguientes pasos:

Paso 1

Ve a la edición HTML de tu plantilla y con Ctrl + F busca ]]></b:skin y arriba el siguiente código:

.sunny {
background:#000 url(urldetuimagen) top right;
color: #fff;
padding-top: 30px;
text-align: center;
display: inline-block;
width: 75px;
height: 45px;
text-decoration: none;
box-shadow: 0px 0px 20px #fafafa;
text-shadow: 0px 3px 2px #fafafa;
white-space: nowrap;
font: 15px 'Arial'; letter-spacing: 0px;
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
border-radius: 100px;}
.sunny:hover {
-webkit-transition-duration: 1s;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
border-radius: 100px;}
a.sunny {
color: #fff;}

Paso 2

Modifica los colores y tamaños señalados arriba. Y luego pega el siguiente código en donde quieres que se encuentren tus afiliados. Si es en una entrada o página de tu blog debes pegarlo en la edición HTML del post.

<a target="_blank" class="sunny" href="link"> Love </a>
<a target="_blank" class="sunny" href="link"> Love </a>
<a target="_blank" class="sunny" href="link"> Love </a>
<a target="_blank" class="sunny" href="link"> Love </a>

Para agregar mas botones solo copia y pega cuantas veces desees la línea entera que señalé en negrita.

Espero les haya servido el tutorial .. besos ♥