¿Cómo colocar un widget de tu canal YouTube en Blogger?


por Violeta León

   Debido a la gran necesidad que tenemos de aumentar la cantidad de minutos en nuestros videos, es vital utilizar todos los medios a disposición para dirigir tráfico a los vídeos de dicho canal; por ello, Blogger se ha convertido en una herramienta esencial, no sólo para compartir información, sino para promocionar los vídeos de Youtube. Dicho esto, les traigo diferentes widgets que pueden adaptar al estilo de su canal y al tipo de exposición que quieren alcanzar. Cabe destacar que el diseño de los widgets son completamente responsive, por lo que se adptaran a cualquier tamaño de pantalla, incluso si es móvil.

1. Widget "Vídeo Destacado de Youtube"

Vista del Vídeo Bajo el Título del Blog

   Está creado para ser utilizado debajo del título del blog, con la intención de destacar un único vídeo del canal. Para actualizarlo, debe hacerse de manera manual. Ló unico que se debe hacer es cambiar "url de tu video" por la dirección de tu vídeo en youtube. Para ello, copias la dirección y le agregas "/embed/". Ejemplo, esta es la url de mi vídeo: https://www.youtube.com/watch?v=NN7Nw3c-fNU y la debo cambiar a: https://www.youtube.com/embed/NN7Nw3c-fNU. De esta manera se visualizará tu vídeo en blogger.

<div class="table-responsive"><table width="100%" border="0" cellpadding="0" position:"fixed"> <tr> <td> <div class="responsiveContent"> <iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </td> </tr> </div> <style> .responsiveContent { position: relative; height: 0; overflow: hidden; padding-bottom: 56.2%; margin-bottom: 20px; } .responsiveContent iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

 2. Widget "Vídeos del Mes"

Vista de Varios Videos Debajo del Titulo
 

   Fue creado con la intención de destacar aún mas vídeos del canal al ser colocado debajo del titulo del blog; quedando alineados de manera horizontal. Sólo debes agregar 3 vídeos diferentes.  Para actualizarlo, debe hacerse de manera manual. Ló unico que se debe hacer es cambiar "url de tu video" por la dirección de tu vídeo en youtube. Para ello, copias la dirección y le agregas "/embed/". Ejemplo, esta es la url de mi vídeo: https://www.youtube.com/watch?v=NN7Nw3c-fNU y la debo cambiar a: https://www.youtube.com/embed/NN7Nw3c-fNU. De esta manera se visualizarán 3 vídeos en tu blogger.

<div class="table-responsive"> <table width="100%" border="0" cellpadding="0" position:"fixed"> <tr> <td> <div class="responsiveContent"> <iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </td> <td> <div class="responsiveContent"> <iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </td> <td> <div class="responsiveContent"> <iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </td> </tr> </div> <style> .responsiveContent { position: relative; height: 0; overflow: hidden; padding-bottom: 56.2%; margin-bottom: 20px; } .responsiveContent iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

3. Widget "Vídeo Destacado" barra lateral


Vista de los Vídeos desde la Barra Lateral

   Para que sea visto en todas las pantallas del blog, se puede ubicar el vídeo en la barra lateral del blog, quedando alineado de manera vertical. Se puede realizar esta vista con 1 sólo vídeo o con varios vídeos. Al igual que en los widgets anteriores se debe actualizar manualmente e incluir las url de cada vídeo respectivamente. Debe ser utilizado sólo con fondos blancos.

Código Para 1 Vídeo:

<div class="table-responsive"><table width="100%" border="0" cellpadding="0" position:"fixed"> <tr> <td> <div class="responsiveContent"> <iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </td> </tr> </div> <style> .responsiveContent { position: relative; height: 0; overflow: hidden; padding-bottom: 56.2%; margin-bottom: 20px; } .responsiveContent iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

Código Para 3 Vídeos:

<div class="table-responsive"> <table width="100%" border="0" cellpadding="0" position:"fixed"> <tr> <td><img src="http://img.fenixzone.net/i/QKonl1g.jpeg" width="100%" /></td> </tr> <tr> <td> <div class="responsiveContent"> <iframe src="url del vídeo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </td> </tr> <tr> <td><img src="http://img.fenixzone.net/i/QKonl1g.jpeg" width="100%" /></td> </tr> <tr> <td> <div class="responsiveContent"> <iframe src="url del video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </td> </tr> <tr> <td><img src="http://img.fenixzone.net/i/QKonl1g.jpeg" width="100%" /></td> </tr> <tr> <td> <div class="responsiveContent"> <iframe src="url del video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </td> </tr> </div> <style> .responsiveContent { position: relative; height: 0; overflow: hidden; padding-bottom: 56.2%; margin-bottom: 20px; } .responsiveContent iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

¿Cómo se utiliza el código?

   Accedes a tu blog, en la pantalla principal haz clic en "diseño", luego en "añadir un gadget", buscas la opción de agregar un html y pegas el código. Lo actualizas con las url de tus vídeos y lo ubicas, bien debajo del título de tu blog o en la barra lateral (todo depende al código que hayas escogido) y para finalizar, haces clic en "guardar disposición".

Paso 1: diseño/ añadir gadget


Paso 2: HTML

Paso 3: Pegas el Código y agregas las urls de tus vídeos

Paso 4: una vez ubicado el gadget, guardas los cambios.
 

  • Puedes ver el vídeo explicativo:


 Si lo has probado en tu blog, comparte el enlace para darle el visto bueno! O si tienes dudas, estaré atenta para solventarlas. Éxitos!

Comentarios

  1. Gracias linda! me sirvió mucho tu recomendación ya que ahora las personas que pasen por mi blog podrán ver de manera inmediata uno de mis vídeos, así que quedó genial en mi blog. Cariños.

    ResponderEliminar
    Respuestas
    1. Me pasé por tu blog y ha quedado fenomenal el widget! Gracias por compartir tu experiencia!

      Eliminar
  2. oh que bien me viene, voy a ver, porque el mio se quedo inactivo y no habia encontrado ningunos que me resultaran comodos, asi que tu post me viene de perlas MIL GRACIAS!!!!

    ResponderEliminar
    Respuestas
    1. Siempre a tu orden! dejame el enlace a tu blog cuando ya lo hayas agregado y cualquier cosa estamos aquí para ayudar :)

      Eliminar
  3. Gracias, los widget son muy útiles para las webs, sobre todo cuando tienes canal y blog ligarlo es indispensable para la difusión del mismo, a la primera parece complicado pero es más sencillo de lo que parece, tú lo explicaste a la perfección, ya lo he usado y queda perfecto.

    ResponderEliminar
  4. ¡Hola!
    Pues no tenía ni idea que se podía poner un widget de Youtube en Blogger, y sinceramente, me parece una idea genial para que las personas que pasen por el blog, puedan visualizar alguno de los vídeos, incluso percatarse que se tiene canal de Youtube, que a veces puede pasar desapercibido.
    Aunque no es mi caso, puesto que no tengo canal, lo tendré en cuenta porque nunca se sabe.
    Gracias por la información.
    Besotes

    ResponderEliminar
  5. Está genial este widget Violeta, gracias por compartirlo, aunque estuve haciendo el ejercicio en uno de mis blogs y no me funcionó muy bien, pero voy a guardar este post entre mis favoritos porque de seguro nuevamente recurro a él.

    ResponderEliminar
  6. Hola. Excelente instructivo aunque la verdad a mi no me sirve de mucho porque yo no tengo blog en blogger, el mio esta en wordpress y mi canal de youtube lo uso para guardar los videos que me gustan y playlist pero no para subir contenido asi que supongo que no me sirve de mucho tu tutorial aunque si me parecio super interesante porque pense que esto de los widget era cosa solo de wordpress no sabia que se podian usar en blogger y mucho menos en youtube jejeje

    ResponderEliminar
  7. Hola bella, pues no tenía ni idea que podía, poner un widget, hace mucho tiempo cree en canal en YouTube pero apenas le doy uso pero me guardo tu post porque creo que aporta mucha info y que es muy interesante y de mucha ayuda

    ResponderEliminar
  8. Es cierto, ahora que Youtube se ha puesto más estricto con el tema de la monetización tenemos que buscar la manera de llevar tráfico hacia el canal, en mi blog tengo un widget de suscripción pero me vendría bien poder subir algún video destacado, gracias por la información!

    ResponderEliminar
  9. Qué post tan útil has escrito para todos aquellos que tengan blogger. Yo hasta ahora no tenía ni idea de como hacerlo o sea que me ha encantado leerlo. Hoy en día los vídeos son muy importantes para crear tráfico hacia el blog y además en una sociedad tan visual como la nuestra tener vídeos en youtube es imprescindible.

    ResponderEliminar
  10. Yo no tengo canal de YT pero reconozco que lo pones en bandeja con los códigos. Y es una forma más de ir generando visitas extra de quienes visiten tu blog sin necesidad de entrar en el canal, bss!

    ResponderEliminar
  11. Hola guapa, está genial poder añadir este u otros widgets al blog para enlazarlo con nuestras otras rrss. En mi caso no tengo canal de youtube pero sí tengo que ponerme al día con esto porque lo quité ya que los que tenía me dieron error y ahora echo en falta ese tráfico. Muaksss

    ResponderEliminar
  12. Hola, como estas?
    gracias por el tutorial. Suelo compartir videos de youtube en las entradas de mi blog y siempre es bueno tener diferentes tips sobre el tema.
    saludos

    ResponderEliminar

Publicar un comentario