Tutorial:Efecto Amigas Flotante

Hola como estan? Ace una semana creo que no entro ¡ wa¡ pero ya regrese,es por que paro ocupada por mis estudios de lunes a viernes y ya les avise que solo entraria sabado y domingo al blog  ¡
Bueno ya se presento una autora Kotomi ¡ Falta que se presente Alice ,para que la conoscan todas,ya le avise ,espero que se presente pronto y bueno las nuevas autoras ya pueden hacer las entradas de cualquier recurso o tutorial  ¡ Por Fas ,por que sino estara vacio esos dias de mi ausencia.
Bueno Ya muchos dias an pasado que no ago un tutorial de efecto .Aora les enseñare como poner efecto a algunos afiliados ,yo le pongo de nombre amigas 



Bueno para que entiendas mejor les muestro una imagen

Y para verlo mejor clic en :

Vista Previa

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>

right: Significa que estara al lado derecho este efecto si lo quieres al lado izquierdo lo cambias por left 
250:Esa es la posicion si aumentas se ira mas asia izquierda y si disminuyes se ira mas hacia la derecha
Amigas♥:Puedes cambiar el titulo por otro.
Bueno eso es todo ,espero que les haya gustado