Slideshow de videos de Youtube en Blogger

Insertar de forma fácil y segura un slideshow que muestren los videos de Youtube en Blogger, es lo que aprenderán a realizarlo en este tutorial creado para usuarios de Blogger.

¿El slideshow de videos funciona en teléfonos inteligentes?

Si su blog de Blogger es responsive, el slideshow de videos se mostrara correctamente en dispositivos móviles, tanto para tabletas, Smartphone, y ordenadores.

¿Cómo se va a ingresar el código?

Lo que vamos hacer es ingresar los CSS y JS dentro del HTML de la plantilla, luego el ultimo código donde se encuentran los videos de Youtube, lo insertaremos en un widget HTML/Javascript y lo ubicaremos justo debajo de la cabecera principal del blog.

Nota: Habilitar el widget Slideshow de videos en la página principal, si no saben cómo ocultar widgets, pueden leer la información que se encuentra en el siguiente tutorial

Como ocultar widget gadgets de Blogger

Puede ver su demostración en el siguiente blog de demos

Demo Clic aquí

Video Tutorial

Instrucciones

Nota importante: Antes de realizar cualquier paso de este tutorial, siempre se recomienda realizar una copia de seguridad de su blog de Blogger.

Empezamos

1 Ir a Blogger

2 Un clic en “Plantilla”

3 Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

4 Busca este código

<head>

6 Justo abajo del código que encontró, inserte los siguientes estilos

7 Busca este código

</body>

8 Ingrese el siguiente código, justo arriba del código que encontró

window.setTimeout(function() {

document.body.className = document.body.className.replace('loading', '');

}, 10);

</script>

jQuery(document).ready(function(){

jQuery("#gallery").unitegallery({

gallery_width:900, //gallery width

gallery_height:500, //gallery height

gallery_min_width: 400, //gallery minimal width when resizing

gallery_min_height: 300, //gallery minimal height when resizing

gallery_theme:"default", //default,compact,grid,slider - select your desired theme from the list of themes.

gallery_skin:"default", //default, alexis etc... - the global skin of the gallery. Will change all gallery items by default.

gallery_images_preload_type:"minimal", //all , minimal , visible - preload type of the images.

//minimal - only image nabours will be loaded each time.

//visible - visible thumbs images will be loaded each time.

//all - load all the images first time.

gallery_autoplay:false, //true / false - begin slideshow autoplay on start

gallery_play_interval: 3000, //play interval of the slideshow

gallery_pause_on_mouseover: true, //true,false - pause on mouseover when playing slideshow true/false

gallery_control_thumbs_mousewheel:false, //true,false - change this option, add more mousewheel choices

gallery_control_keyboard: true, //true,false - enable / disble keyboard controls

gallery_carousel:true, //true,false - next button on last image goes to first image.

gallery_preserve_ratio: true, //true, false - preserver ratio when on window resize

gallery_debug_errors:true, //show error message when there is some error on the gallery area.

gallery_background_color: "" //set custom background color. If not set it will be taken from css.

});

</script>

9 Un clic en Guardar plantilla

10 Un clic en Diseño

11 Un clic en Añadir un gadget

12 Busca el widget HTML/Javascript, ábrelo

13 Ingrese las siguientes líneas de código en su interior

<img alt="Youtube Video 1"

data-type="youtube"

data-videoid="CyOMgwGiYBc"