[TUTORIALES] Pestaña flotante con video de youtube~!

Nehhh~!!Hola~!Como estas?Pues yo muy bien,espero que todos iguales...por que si no me pondre muy triste,por que saben que los quiero mucho....Bueno aunque tengo mucho trabajo(es de ingles)que hacer,he sacado tiempo para pasar por sus blogs,jejje aunque tambien tengo que sacar tiempo para contestar las preguntas de mis seguidores en tumblr..(uhhh muchas cosas que hacer)pero bueno,hace poco me pidieron una tutorial,,,,bueno resivi dos,pero una se borro sola y no se por que?~jejje pero bueno,el pedido de tuto,era si podia hacer la tuto de una pestana flotante con un video de youtube.....pues lo logre~!!!Aqui vamos:

| vista previa |
1.Primero sigue los pasos de la siguiente imagen^^:
*Pega el codigo que escogistes en word o notas.*
2.Ahora en el codigo a donde  dice "560" y "315" lo vamos a cambiar a lo siguientes numeros.
560 cambialo a 238
315 cambialo a 325
3.Diseno | Anadir un gadget | HTML/javacrips y pegas el siguiente codigo:
<style>
#flotante1 {
position:fixed;
top:50px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>
<div id='flotante1'>
<img src='URL DE IMAGEN' style='float:left;'/>
<div style='background: #COLOR DE BORDE; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>CODIGO DE TU VIDEO</div></span></div></div>
EDITA:
URL DE IMAGEN:Te dejare varias aqui abajo.
COLOR DE BORDE:El codigo del color que quieras.
CODIGO DE TU VIDEO:Pega el codigo que tenias antes y recuerda editar los numeros.










Luego guardas y listo~!!Facil,no?Pues espero que les guste^^Y que sea de muchas ayuda!
Pronto pasare por sus blogs^^los adoro~Cualquier duda me avisam^^
Recuerda dejar tu comentario*3*
Les dejo besos cherryT.O.P
Att:Lee rae mi{dayi}







21 comentarios:

  1. Oh! Pero que tutorial, esta muy bueno. He aprendido algo nuevo, de seguro lo pondré en practica en estos días.

    ¡saludos!

    ResponderEliminar
  2. Ayy que chulo si tuviera espacio donde ponerlo lo pondria ya mismo XD

    ResponderEliminar
  3. se ve muy waii no se si llegue a usarlo pero se ve muy bien

    ResponderEliminar
  4. Muy lindo me encanta ah y por se acaso tienes un premio en mi blog:
    http://yvonne2608.blogspot.com/2014/10/premios-xd.html

    ResponderEliminar
  5. Gracias por el tuto~ andamos igual apenas actualice mi blog después de 2 meses ;O;

    Bueno, que tengas bonito día :)

    ResponderEliminar
  6. ¡Wooooow! Tu blog está hermoso *-* Y yo desaparecida por aquí que no lo había visto... ¡es muy lindo!

    Gracias por el tutorial, estuvo interesante :3 Veré si después de tanto tiempo logro aprender a manejar los códigos *^*

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. waaa ha pasado mucho tiempo~!!!como estas?

      Me alegra que te guste^^
      saludos~

      Eliminar
  7. Qué chulo el tutorial!! *O* yo ahora ando aplicando cosas a mi blog pero mi plantilla al ser antigua, la mayoria de cosas que encuentro no me funcionan U.u en fin, iré poco a poco ^^
    Saludos!!

    ResponderEliminar
  8. Que cool el tutorial! Y la decoración está preciosa, que niño tan bonito! :3
    Besos***

    ResponderEliminar
  9. Hola Dayi, ya tenia tiempo sin pasarme por aquí lo siento, ya estoy de vuelta con todo y me veras mas seguido por aqui ^^
    Me gusta el diseño del blog, se ve genial :3 .. Interesante tutorial nunca habia pensado utilizar algo similar ahora un par de ideas han surgido a ver que pasa ^^ gracias!!
    Un abrazo!

    ResponderEliminar
  10. ¡Muchas gracias por el tutorial *3*! espero que encuentres tiempo libre :)
    Saludos.

    ResponderEliminar
  11. Muy bueno el tutorial no sabia que podia poner un video en una pestaña gracias ^_^

    ResponderEliminar
  12. Hola!! *.* Que lindo! tu blog!! me encanta tu nuevo diseño~
    Muchas Gracias por el tutorial! hace ratos que estaba buscando como hacer eso! jeje
    Saluditos!^^~

    ResponderEliminar
  13. buenisimo me gusto mucho este tuto!

    ResponderEliminar

Puedes dejar cualquier tipo de comentario(*≧m≦*)Pero si el comentario no es de gusto del blog sera borrado..
No insultes.
No spam(;¬_¬)
Si tienes algo que decirme privado:
dayi123466@gmail.com