Tutorial : Efecto amigas flotantes (para blogger)

Hola  como estan? espero que  bien .

hoy les traigo este tutorial para blogger, de que se trata?

Bueno es de poner tipo un efecto de amigas flotantes  no se como se lo puede llamar XD
para que entiendan mejor aqui les dejo esta vista previa :3

Este gadget va al costado del blog

Como han visto a un ladito aparece una cajita donde dice amigas  y al pasar el cursor muestra unas imagenes pequeñas, son tus amigas que afiliastes 

Si lo desean en su blog solo sige los pasitos :
1.Van a plantilla /Edicion de HTML
Y ponen Ctrl+F y ponen ]]></b:skin>
ponen atras de ]]></b:skin> el siguiente codigo

.caji {
position: absolute;
bottom: 0px;
padding: 3px;
width: 200px;
background: #F3D0FF; /* Color de fondo del titulo */
color: #DC82FF;/* Color del titulo */
overflow: hidden;
text-align: left;
height: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}
.caji:hover {
height: auto;
}
.caji img {
display: none;
opacity: 0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}
.caji:hover img {
display: inline-block;
opacity: 100;}
.titulox {
background: #fff; /* Color de fondo del titulo */
border-top-left-radius: 10px;border-top-right-radius: 10px;color: #CE66F7; /* Color de la letra */
font: bold 12px Verdana; /* Estilo de la letra del titulo*/
margin-bottom: 5px;
text-align: center;
padding: 2px;
text-transform: lowercase;
font-variant: small-caps;}

Todo lo que significa esta a su ladito entre "/* "y "/*"
Y si quieres que no tenga bordes redondas la cajita y que sea cuadradita , tonces borra lo siquiente del codigo anterior que aparece dos veces este codigo:

  border-top-left-radius: 10px;
border-top-right-radius: 10px;

Depues sige el segundo paso :
Ir a Diseño/Añadir un gadget/HTMLJavascript
y pegan el siguiente codigo

<div style="position:fixed; bottom:0px;top:600px;right:250px;"><div class="caji">
<div class="titulox">Amigas♥</div>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
<a href="Url del blog de tu amiga">
<img src="Url de la Imagen" width="45px" />
</a>
</div></div>

Bueno espero que te alla servido :D

Nos vemos prontoo!! XD