add

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?


¿Cargar videos en una caja widget y mostrarlo? ¿Crear un widget de videos de Youtube? ¿Mostrar videos de Youtube en un widget? ¿Insertar hasta 5 videos de Youtube en un widget? Para realizar este truco en nuestro blog de Blogger deberán seguir las instrucciones tal como lo mostrare en este Tutorial de Blogger. Lo que vamos hacer es ingresar unos códigos CSS en nuestra plantilla, luego nos dirigiremos al Diseño de nuestra plantilla he ingresaremos un código en un widget HTML/Javascript y realizaremos unos simples cambios. Este widget de Videos de Youtube funciona perfectamente en todos los navegadores web como FireFox, Google Chrome, Internet Explorer, etc.

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

Mire su demostración a continuación

DEMO

¡Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Da un clic en “Plantilla

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

3 Un clic en “Editar HTML

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

Ahora se te abrirá el editor HTML de su plantilla, se mostrara igual como la imagen que esta a continuación

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

4 Busca este código

]]></b:skin>

Ingresa las siguientes líneas de código justo arriba del código que encontraste

/*---VIDEO star--*/
.yt-general{padding:0 0 10px;box-sizing:border-box;text-align:center;line-height:0;font-size:0}
.yt-cargador{max-width:100%;margin:0 auto;padding:4%;background:#333}
.yt-video{position:relative;max-width:100%;padding-bottom:45%;height:0;overflow:hidden;background:#000}
.yt-video iframe,.yt-video object,.yt-video embed{width:1600px;max-width:100%;height:100%;position:absolute;top:0;left:0}
.yt-miniaturas{width:1000px;max-width:100%;margin:0 auto;padding:1% 1% 2%;background:#0A8A94;box-sizing:border-box}
.yt-miniaturas a{position:relative;display:inline-block;width:20%;height:0;overflow:hidden;padding:0 0 13% 0;vertical-align:top;margin:1% 0 0;border:2px solid #333;box-sizing:border-box;transition:.3s all}
.yt-miniaturas a:hover{z-index:2;transform:scale(1.2)}
.yt-miniaturas a img{width:100%;padding:0;background:transparent}
.yt-miniaturas a div{position:absolute;width:100%;overflow:hidden;padding:0 4px;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;bottom:0;left:0;font-size:14px;line-height:18px;font-family:Arial;color:white;background:#CC181E;opacity:.8}
/* Símbolo cargador CSS Ayudadeblogger.com  */
.yt-video:before{content:'';display:inline-block;margin:20% auto;border-width:30px;border-radius:50%;animation:spin 1s linear infinite;border-style:double;border-color:#999 transparent}
@keyframes spin{100%{transform:rotate(359deg)}}
@media (max-width:470px){.videominiaturas a div{display:none!important}}

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

5 Busca este código

</body>

Ingresa las siguientes líneas de código justo arriba del código que encontraste

<script type='text/javascript'>
    //<![CDATA[
var _0x619f=["\x73\x72\x63","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x79\x6F\x75\x74\x75\x62\x65\x2E\x63\x6F\x6D\x2F\x65\x6D\x62\x65\x64\x2F","\x3F\x72\x65\x6C\x3D\x30"];function cargarVideo(_0x98f3x2,_0x98f3x3){document[_0x619f[1]](_0x98f3x2)[_0x619f[0]]=_0x619f[2]+_0x98f3x3+_0x619f[3]}
    //]]>
</script>

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

6 Un clic en “Guardar plantilla

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

7 Un clic en “Diseño

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

8 Un clic en “Añadir un gadget

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

9 Busca el widget que dice “HTML/Javascript” ábrelo

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

10 Ingresa las siguientes líneas de código en su interior

<div class="yt-general">
<div class="yt-cargador">
  <div id="yt-video" class="yt-video">
    <!-- CODIGO COMPLETO PRIMER VIDEO CON ID=ID-FRAME-->
    <iframe id="id-frame" width="420" height="315" src="https://www.youtube.com/embed/iusFM2EowiQ" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
  <div class="yt-miniaturas">
  <!-- INCLUIR LA ID DE CADA VIDEO 2 VECES EN CADA ENLACE: PARA VÍDEO Y PARA MINIATURA -->
  <a href="javascript:cargarVideo('id-frame', 'ykImslIykpc');"><img src="http://img.youtube.com/vi/ykImslIykpc/1.jpg" />
    <div> INGRESE AQUÍ EL NOMBRE DEL VIDEO 1</div>
  </a>
  <a href="javascript:cargarVideo('id-frame', '7IjgZGhHrYY');"><img src="http://img.youtube.com/vi/7IjgZGhHrYY/1.jpg" />
    <div> INGRESE AQUÍ EL NOMBRE DEL VIDEO 2 </div>
  </a>
  <a href="javascript:cargarVideo('id-frame', 'noE1u3Xu6Vg');"><img src="http://img.youtube.com/vi/noE1u3Xu6Vg/1.jpg" />
    <div> INGRESE AQUÍ EL NOMBRE DEL VIDEO  3</div>
  </a>
  <a href="javascript:cargarVideo('id-frame', 'ty31QY5ZGHo');"><img src="http://img.youtube.com/vi/ty31QY5ZGHo/1.jpg" />
    <div> INGRESE AQUÍ EL NOMBRE DEL VIDEO 4 </div>
  </a>
  <a href="javascript:cargarVideo('id-frame', 'u0yGXKoA6Ek');"><img src="http://img.youtube.com/vi/u0yGXKoA6Ek/1.jpg" />
    <div> INGRESE AQUÍ EL NOMBRE DEL VIDEO 5 </div>
  </a>
</div>
</div>

Realiza estos cambios

1.1 Elimina el código que está marcado de color Azul y reemplázalo por el código de tu video, si no sabes cuál es el código de tu video, mira la siguiente imagen para que tengas una mejor idea.

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

2.2 Elimina los 10 códigos que están marcados de color rojo, y remplaza cada uno de ellos por el código correspondiente de tu video

Por ejemplo:

Tenemos el siguiente código:

<a href="javascript:cargarVideo('id-frame', 'ykImslIykpc');"><img src="http://img.youtube.com/vi/ykImslIykpc/1.jpg" />
    <div> INGRESE AQUÍ EL NOMBRE DEL VIDEO 1 </div>

Vas a borrar los dos códigos que están marcados de color rojo, y los vas a reemplazar por el código de tu video, recuerda poner el mismo código en los dos códigos que están marcados de color rojo.

Nota: si no sabes cuál es el código de tu video mira la siguiente imagen para que así te puedas guiar.

¿Cómo insertar un widget de videos de Youtube en mi blog de Blogger?

3.3 Elimina el la frase que está marcada de color verde que dice INGRESE AQUÍ EL NOMBRE DEL VIDEO 1 por el nombre de tu video

11 Eso es todo, da un clic en “Guardar” y ubica tu nuevo widget de videos de Youtube donde tú quieras y mira en tu blog como funciona este espectacular widget de videos de Youtube.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

8 comentarios:

  1. saludos tengo un problema, el primer vídeo se ve genial, y las miniaturas de los otros tambien, pero al hacer click no carga los otros vídeos

    gracias

    ResponderEliminar
  2. mi página es http://www.ahoraajedrez.com/ puede observar que solo fundiona el primer vídeo

    ResponderEliminar
    Respuestas
    1. Hola, he revisado su blog, y el código esta perfectamente ingresado, el problema se puede deber a que usted tiene un script insertado en su plantilla y este esta ocasionando este inconveniente, por favor pruebe este tutorial en un blog de ejemplos, y mirara que funciona correctamente.

      Saludos

      Eliminar
  3. Buenos días, Luis. Mi blog "EL BLOG DE PATTY'S DOGS" lo he creado con la ayuda de diferentes tutoriales de internet. Hoy he podido añadir los comentarios recientes después de mil intentos. Lo hacia a través de otro blog que no es el tuyo y me enviaba a una página que no existe. Gracias a ti lo he conseguido :)
    Hay muchas cosas que deseo hacer y desde hoy leeré detenidamente tu página para así mejorar mi blog. Uff no es fácil cuando no sabemos :(
    Ahora estoy con lo de los vídeos de you tube. Te quería pedir un consejo y espero que me respondas. ¿Crees que vale la pena incluir esto en mi blog?
    Si tienes un poco de tiempo y deseas echarle un vistazo te lo agradecería.
    Todos los consejos que vengan de una persona que sabe tanto como tú valen oro.
    Mil gracias :)
    PATTY

    ResponderEliminar
    Respuestas
    1. Hola Patricia, los videos de Youtube claro que sirven enn tu blog de Blogger siempre y cuando sena tuyos.

      Sobre su otra pregunta, le sugiero me haga saber cual es la dirección URL de su blog de Blogger y así poderle dar un vistazo he indicarle que mas se puede hacer por su blog

      Saludos.

      Eliminar
  4. hola amigo espero contestes , probé el widget y esta genial pero hay forma de que se alargue ? y que los cuadritos de abajo del video principal sean mas grandes y se ve el titulo de cada uno ?

    ResponderEliminar
    Respuestas
    1. Hola David, con respecto a su pregunta claro que es posible, por favor cambien donde dice width="420" height="315"

      Saudos

      Eliminar
  5. hola amigo luis super interezante tu blog, este widget es responsible, hay algun widget responsible , si este no lo es, o como se puede hacer un widget responsible de video de youtube

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios