add

Slideshow de videos de Youtube en Blogger - Video Tutorial


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.

Slideshow de videos de Youtube en Blogger - Video Tutorial

¿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


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


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

Blogger

3 Un clic en “Editar HTML

Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Blogger

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.

 Blogger


4 Busca este código

<head>

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

<link href='https://dl.dropboxusercontent.com/s/61amcj1gump3si9/unite-gallery.css' rel='stylesheet' type='text/css'/>
<link href='https://dl.dropboxusercontent.com/s/6cpcibdwbwu96cf/ug.css' rel='stylesheet' type='text/css'/>

7 Busca este código

</body>

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

<script src='https://code.jquery.com/jquery-1.11.2.min.js' type='text/javascript'/>    
<script src='https://dl.dropboxusercontent.com/s/y0i3y2o20bf16lx/unitegallery.min.js' type='text/javascript'/>             
<script src='https://dl.dropboxusercontent.com/s/hpao2oejudr0eeb/ug.js' type='text/javascript'/>

  <script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>

<script type='text/javascript'>

                               jQuery(document).ready(function(){

                                               jQuery(&quot;#gallery&quot;).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:&quot;default&quot;,                                                                 //default,compact,grid,slider - select your desired theme from the list of themes.
                                                               gallery_skin:&quot;default&quot;,                                                                                       //default, alexis etc... - the global skin of the gallery. Will change all gallery items by default.

                                                               gallery_images_preload_type:&quot;minimal&quot;,                  //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: &quot;&quot;                                                         //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

<div id="gallery" style="display:none;">
               
<img alt="Youtube Video 1"
 data-type="youtube"
 data-videoid="CyOMgwGiYBc"
 data-description="Videos de Youtube Responsive para Blogger" />
                              
<img alt="Youtube Video 2"
 data-type="youtube"
 data-videoid="93u_-WJnHQU"
 data-description="Videos de Youtube Responsive para Blogger" />

<img alt="Youtube Video 3"
 data-type="youtube"
 data-videoid="28uH4ZMC494"
 data-description="Videos de Youtube Responsive para Blogger" />
                                                
<img alt="Youtube Video 4"
 data-type="youtube"
 data-videoid="Bs3PVtjoONs"
 data-description="Videos de Youtube Responsive para Blogger" />

<img alt="Youtube Video 5"
 data-type="youtube"
 data-videoid="T4M7VMpTcf0"
 data-description="Videos de Youtube Responsive para Blogger" />
                                              
<img alt="Youtube Video 6"
 data-type="youtube"
 data-videoid="actb5T4qbos"
 data-description="Videos de Youtube Responsive para Blogger" />
                              
<img alt="Youtube Video 7"
 data-type="youtube"
 data-videoid="6v2L2UGZJAM"
 data-description="Videos de Youtube Responsive para Blogger" />

<img alt="Youtube Video 8"
 data-type="youtube"
 data-videoid="0vrdgDdPApQ"
 data-description="Videos de Youtube Responsive para Blogger" />
                                                              
<img alt="Youtube Video 9"
 data-type="youtube"
 data-videoid="ifEc6TLtYHk"
 data-description="Videos de Youtube Responsive para Blogger" />

<img alt="Youtube Video 10"
 data-type="youtube"
 data-videoid="gQxQ9K4gnn0"
 data-description="Videos de Youtube Responsive para Blogger" />

<img alt="Youtube Video 11"
 data-type="youtube"
 data-videoid="iNJdPyoqt8U"
 data-description="Videos de Youtube Responsive para Blogger" />
                                                
<img alt="Youtube Video 12"
 data-type="youtube"
 data-videoid="mcixldqDIEQ"
 data-description="Videos de Youtube Responsive para Blogger" />
                                                
<img alt="Youtube Video 13"
 data-type="youtube"
 data-videoid="brB1Yqqt1DM"
 data-description="Videos de Youtube Responsive para Blogger" />
                              
<img alt="Youtube Video 14"
 data-type="youtube"
 data-videoid="PIZL7-HGKkI"
 data-description="Videos de Youtube Responsive para Blogger" />
                                                
<img alt="Youtube Video 15"
 data-type="youtube"
 data-videoid="8gD_9WPPFb4"
 data-description="Videos de Youtube Responsive para Blogger" />
                                                
                </div>



Realice estos cambios:

Diríjase a Youtube, y abra un video, se deberá copiar solo los números y letras que se encuentra justo después de watch?v=

Mire la siguiente imagen como ejemplo



Una vez que tenga una idea clara, elimine uno por uno el código de video que se encuentra marcado de color azul, por el código de video que usted quiere mostrar.

Además, elimine las palabras que se encuentran marcadas de color rojo, remplácelo por una pequeña descripción de su video

Eso es todo

Es momento de dar un clic en Guardar

14 Ubique su widget Slideshow videos de Youtube justo debajo de la cabecera principal de su blog de Blogger



15 Si quiere que su widget de videos se muestre solo en la página principal de su blog de Blogger y no cuando se habrá una entrada, tendrá que seguir las instrucciones del siguiente tutorial


- El plugin jQquery que se encuentra en este tutorial fue desarrollado por VVVMAX, adaptado a Blogger por Ayudadeblogger.com

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

0 comentarios:

Publicar un comentario en la entrada

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