Tutorial:Efecto Amigas Flotante




imageHola 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 


14 comentarios :

  1. Wow esta bastante bueno y muy lindo :3

    Muchos besos y se me cuida!!

    ResponderEliminar
  2. Tu blog siempre muy lindo >w< y AWWWWWWWWWW estoy en las amigas ;w; yey! me hizo feliz darme cuenta que estoy ahi TuT gracias... pronto rediseñaré mi blog y haré algo parecido a la sección Amigas ;0; yay!

    ResponderEliminar
  3. Muchas gracias por el tuto amiga y pues el menu amigas, yo lo tengo ya en mi plantilla jeje un saludo amiga n_n y bienvenidas las nuevas autoras

    ResponderEliminar
  4. muy bonito !!! me encanta los efectos asi!!! <3<3
    hace tiempo que no venia mi tiempo ya no me deja hasta ya hay autoras new saludos a ellas jejeje
    aun asi kiaaa adoro ese efecto
    gracias very gracias por tus recursos luna
    saludos y muchos hehehee

    ResponderEliminar
  5. wow que bonito y queda genial, encerio me encanta este blog, porfavor alguien se pasa a mi blog? acabo de empezar porfavor no sean malis y denle un vistazo http://pandita-diary-thinkin-post.blogspot.mx/ onegai n/////n

    ResponderEliminar
  6. aaaaaaaaaaaaaaaaaaa que lindooooo esta me enamore del efecto y todo

    ResponderEliminar
  7. buen aporte, no sabia como hacerlo ^^ gracias por ello

    ResponderEliminar
  8. ¡Hola! Me encantó tu post, quería avisarte que hago un súper-concurso, vista esta dirección para saber más:
    http://elenabeatofficial.blogspot.com.es/2013/05/semana-especial-promociones-de-blogs.html
    ¡Y recuerda hacer publi del concurso! ¡Gracias!
    Elena Beat

    ResponderEliminar
  9. yo quiero este efecto si o si realmente lo amooo!!!!

    ResponderEliminar
  10. Me encanto claro que lo usare
    Cuando haga una plantillita y te dare creditss
    M enmcanttoo
    Por casualidad sigues buscando escritoras ..
    si no .. no importa xP

    ResponderEliminar
  11. buen tuto!!!!! ^v^
    gracias por compartirlo!! >u<

    besos!!! ^-^

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥