domingo, 8 de abril de 2012

Reproductor Kawaii [yOutube]


Weno ya por fin voy a poner este tuto que hace tiempo me pidieron y no habia tenido tiempo de hacerlo, espero y aun tengan ganitas de ponerlo en su blog ^^



para ver como queda da clic en mi nuevo blog de pruebas

oki empezemos con los pasos

como siempre ir a:

Diseno >> Elementos de Pagina >> Anadir gadget html

Copiar este codigo y pegarlo en el gadget:

<div style="position:absolute; top:-310px; left:200px;"><img src="URL DE LA IMAGEN" /></div><div style=" position:absolute; top:-265px; left:244px;"><center>DIRECCION DE TU VIDEO<center></center></center></div>


Como obtener el codigo del video que quiero o me gusta?

1.- Entras a YOUTUBE
2.- Eliges el video de tu preferencia
3.- sigue las instrucciones de la siguiente imagen




el codigo que tome es este:

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/XeHTLONNbzY?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XeHTLONNbzY?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Ahora lo que debes de tomar en cuesta son las medidas del video para que quede justa a la imagen. Como vez las medidas del video original de youtube son width: 420 y height 315 tu las debes cambiar a : WIDTH = 160 HEIGHT = 140

Entonces en RESUMEN el codigo deberia quedar asi:

<div style=" position:absolute; top:-310px; left:200px;"><img src="http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog7.png" /></div><div style=" position:absolute; top:-265px; left:244px;"><center><object width="160" height="140"><param name="movie" value="http://www.youtube.com/v/XeHTLONNbzY?version=3&hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/XeHTLONNbzY?version=3&hl=en_US" type="application/x-shockwave-flash" width="160" height="140" allowscriptaccess="always" allowfullscreen="true"></embed></object><center></center></center></div>

Y para los que quieren hacer la reproduccion automatica ^^ (notaa solo para los que quieren automatica) la reproduccion el codigo quedaria asi:

<div style=" position:absolute; top:-310px; left:200px;"><img src="http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog7.png" /></div><div style=" position:absolute; top:-265px; left:244px;"><center><object width="160" height="140"><param name="movie" value="http://www.youtube.com/v/XeHTLONNbzY?version=3&autoplay=1&hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/XeHTLONNbzY?version=3&autoplay=1&hl=en_US" type="application/x-shockwave-flash" width="160" height="140" allowscriptaccess="always" allowfullscreen="true"></embed></object><center></center></center></div>

Aqui algunas imagenes que hice ^^


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog2.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog4.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog3.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog6.png


http://i1085.photobucket.com/albums/j433/Annyz-chan/skinyoutubeannyzblog7.png


NOTITA: si no te queda centrado el video ni la imagen solo mueve el " position:absolute;" del top y el left.

espero haya sido clara sino dejame un comentario ^^ besos


30 comentarios:

  1. que liindas!! me encanto el tuto ... graciias tomare uno para un nuevo blog q estoy haciendo!! bay

    ResponderEliminar
  2. Anyz-chan,como haces para poner las imagenes asi?
    que se agrandan OwO
    y y como haces ese mensajito que cae de tu titulo OwO
    waaaaaaaaaa como te admiro >////<

    ResponderEliminar
  3. que lindo no me gustan los videos you tube pero igual el tuto es muy util para otras cosillas mil gracias byebye

    ResponderEliminar
  4. wi! primera en comentar ewe X3

    ResponderEliminar
  5. ame esta entradaaa enseguida la pondre en practica XD mi niña queria consultarte una cosa no sabes de algun gadget para cambiar el estilo de letra de mi blog, encontre uno en una pagina en ingles me funciono espectacular pero, cuando veo mi blog veo que la letra si sale , pero cuando veo donde puse el gadget me sale resto del codigo html es un poco enredado u.u

    ResponderEliminar
  6. Naoto uchiha:

    awww si es tuto pero en estos dias lo pongo sip?? besos

    ResponderEliminar
    Respuestas
    1. Si,Annyz-chan >///<
      es la verdad quiero llegar a ser como tu >:3
      Gracias por entregarnos sonrisas dia a dia!♥

      Eliminar
    2. Si,Annyz-chan >///<
      es la verdad quiero llegar a ser como tu >:3
      Gracias por entregarnos sonrisas dia a dia!♥

      Eliminar
  7. haha yuui fuiste la 4 xD saludos y grax por dejarme un comentario =D

    ResponderEliminar
  8. awww grax Naotooo que linda n.n de nada me da emocion ver que te guste el blog xD besos

    ResponderEliminar
  9. por alguna razon del maldito destino no me sale :( nisiquiera copiando el mismo codigo que pusiste que sera?

    ResponderEliminar
    Respuestas
    1. haha sakuchan sabes creo que el problema es tu plantilla veo que casi no puedes poner gadgets o cosas..que plantilla usas?

      Eliminar
  10. Annyz... tengo una duda... se puede poner centrado? quiero decir, en la columna no fuera, esque se me sale T_T y si se puede, ¿te importaría decirme las dimensiones que tendría que poner? Gracias :D
    *Sorry por ser pesada* D:

    ResponderEliminar
    Respuestas
    1. amm si se puede pero no te puedo decir medidas porque varian.. si tu quieres moverlo de lugar cambia el (position:absolute; top:-310px; left:200px;") como veras primero se movera el skin osea la imagen y el video quedara arriba acomodala dondee quieres ponerla y luego ya que la tengas en la posicion que quieres mueve el video en el otro (position:absolute; top:-265px; left:244px;)no se si me hago entender x.x

      el top es para ver que tan arriba o abajo lo quieres

      y el left que tan a la izquierda o derecha segun los valores que le pongas lo puedes poner donde quieras es solo cuestion de cambiarle los valores de top o left

      ayy espero no haberte confundido o.o

      Eliminar
  11. anyzz plisss contestame!
    oye como le cambio lo de top y left si al skin para el video no me sale con el video?
    gracias

    ResponderEliminar
    Respuestas
    1. hola reggie por lo que vi en tu blog tienes problemas en los 2 (top y left ) y el codigo del video.

      el top y el left es para mover el video y es skin osea la imagen detras del video

      y lo del codigo por lo que vi no esta bien puesto sino te hubiera salido bien.. checa bien los pasos y copia y pega bien el codigo sin comerte ningun signo o letra es importante o.o

      Eliminar
  12. Annyz usrgente porfis me decis donde apreto para que me saga el codigo del video????

    ResponderEliminar
    Respuestas
    1. hola batata ahi mismo arriba puse la imagen donde debes de presionar para que te salga el codigo del video.. amm en embed

      Eliminar
    2. Si, ya se pero yo te digo antes de poner embed que tengo que apretar para que me salga esa pantallita con el embed porfis annyz respondemeeee!! n.n

      Eliminar
    3. Si, pero antes de poner embed donde aprieto para que salga embed :O

      Eliminar
  13. Si pero que apreieto antes para que me salga embed (Nota: porque yo digo que preciono me gusta el video no me gusta para que salga embed ¿soy clara?) =(

    ResponderEliminar
    Respuestas
    1. okiii solo sigue esta imagen

      http://2.bp.blogspot.com/-T6B4Ci9B5sE/T4JE-HflhgI/AAAAAAAADwE/LIj7vSoS4uU/s1600/youtube.jpg

      Eliminar
  14. mm batata dame la direccion de tu video y te pongo aqui tu embed sip?? asi ya nos dejamos de tanto lio xD

    ResponderEliminar
  15. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.