[Tutoriales] Gadget Amigos #2

Holiiii!! Como el internet aun me va lento, os traigo un tutorial bien sencillito, que es otra forma de poner un gadget de amigos:







Es fácil, solo hay que ir a Diseño, Añadir Gadget, Gadget HTML, y pegamos lo siguiente:

<style>
.amigosg {
padding: 0px;
margin: 3px;
border-width: 4px;
border-style: solid;
border-color: #008000;
border-radius: 100px;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
}
.amigosg1 {
padding: 0px;
margin: 3px;
border-width: 4px;
border-style: solid;
border-color: #F9725C;
border-radius: 100px;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
.amigosg:hover {
border-color: #F9725C;
border-radius: 0px;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
-webkit-transform: scale(1.5) rotate(360deg);
}
.amigosg1:hover {
border-color: #008000;
border-radius: 0px;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
-webkit-transform: scale(1.5) rotateY(360deg);
}
</style>
<center>
<a href="URL_DE_TU_AMIGA" target="_blank" title="TEXTO">
<img width="70px" height="70px" class="amigosg" src="URL_DE_LA_IMAGEN"/>
</a>
<a href="URL_DE_TU_AMIGA" target="_blank" title="TEXTO">
<img width="70px" height="70px" class="amigosg1" src="URL_DE_LA_IMAGEN"/>
</a>
<a href="URL_DE_TU_AMIGA" target="_blank" title="TEXTO">
<img width="70px" height="70px" class="amigosg" src="URL_DE_LA_IMAGEN"/>
</a>
<br />
<a href="URL_DE_TU_AMIGA" target="_blank" title="TEXTO">
<img width="70px" height="70px" class="amigosg1" src="URL_DE_LA_IMAGEN"/>
</a>
<a href="URL_DE_TU_AMIGA" target="_blank" title="TEXTO">
<img width="70px" height="70px" class="amigosg" src="URL_DE_LA_IMAGEN"/>
</a>
<a href="URL_DE_TU_AMIGA" target="_blank" title="TEXTO">
<img width="70px" height="70px" class="amigosg1" src="URL_DE_LA_IMAGEN" />
</a>
</center>

Ahora lo único que tienes que hacer es personalizarlo. Cambias lo que hay en negrita por lo que quieras y el resto:

• Rojo: Es el espacio entre cada imagen
• Naranja: Es el grosor del borde
• Amarillo: es el estilo del borde (en ESTA entrada verás más estilos)
• Verde: el color de los bordes. Tienen que cambiarlos con colores de AQUÍ
• Azul: bordes redondeados.
• Rosa: tamaño de las imágenes. Width es el ancho, y height el alto

Beshus y hasta mañana!!