Banners con rotación en la sidebar de Blogger

Anteriormente había creado 2 variables para insertar banners en la sidebar en Blogger, uno constaba en añadir 4 banners sencillos en la sidebar, mientras que el otro era un multibanner (distintos tamaños). En esta oportunidad les dejo a su disposición esta nueva versión la cual consta en un espacio para 4 banners con ángulos distintos.

Vista previa de los banners:

Cómo añadirlos en Blogger?

Paso 1: Añadiendo los estilos:

En ''Diseño | Edición HTML'' marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente línea:

]]></b:skin>

Arriba de esta, pega el siguiente código:

#banners {
margin-bottom:20px;
padding-left:10px;
}

.banner1 {-webkit-transition:  -webkit-transform .15s linear;
margin-left:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform:  rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner1:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner2 {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.banner2:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner3 {-webkit-transition:  -webkit-transform .15s linear;
margin-left:20px;
margin-bottom:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform:  rotate(+12deg);
-moz-transform: rotate(+12deg);
}
.banner3:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

.banner4 {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform:  rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner4:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

Paso 2: Añadiendo los banners:

Ahora busca la siguiente sección:

<div id='sidebar-wrapper'>

Arriba de esta, pega el siguiente código:

<div id='banners'>
<a href="URL1" target="_blank">
<img class="banner1" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="105" border="0" height="105"></img></a>

<a href="URL2" target="_blank">
<img class="banner2" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="125" border="0" height="125"></img></a>

<a href="URL3" target="_blank">
<img class="banner3" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="70" border="0" height="70"></img></a>

<a href="URL4" target="_blank">
<img class="banner4" src="http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg" width="110" border="0" height="110"></img></a>     
</div>

Guarda los cambios y listo: