add

Agregar un Slideshow de videos en Blogger – Video Tutorial


Necesitas insertar un Slideshow carrusel de videos de Youtube en tu blog de Blogger de una forma fácil y segura, sobre todo que no tenga complicaciones alguna?

En Blogger.com podemos crear cientos de widgets, plugins, con los cuales mejoraremos nuestro blog

Slideshow de videos en Blogger – Video Tutorial

¿Cómo funciona?

Insertaremos dos CSS y dos JS en la plantilla, ademas de unos dos códigos

Luego copiara un código, podrá insertarlo en un widget HTML/Javascript y ubicarlo donde usted guste.

Por lo general se recomienda insertarlo justo debajo de la cabecera principal

¿El Slideshow de videos es Responsive?

Efectivamente, el slideshow de videos fue creado para que se muestre correctamente tanto para ordenadores de escritorio, Tabletas y Smartphone.

Video Tutorial


Pueden ver su demostración en el siguiente blog de Ejemplos


Vamos a Trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

Slideshow de videos en Blogger – Video Tutorial

3 Un clic en “Editar HTML

Slideshow de videos en Blogger – Video Tutorial

Ahora se le abrirá el Editor HTML de su plantilla

Slideshow de videos en Blogger – Video Tutorial

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.

Slideshow de videos en Blogger – Video Tutorial

4 Busca el siguiente código

<head>

Inserte los siguientes CSS justo abajo del código que encontró

<!-- Owl Stylesheets -->
<link href='https://dl.dropboxusercontent.com/s/zarescu82a60wxs/owl.carousel.min.css' rel='stylesheet'/>
<link href='https://dl.dropboxusercontent.com/s/fuo0qcby8llujsj/owl.theme.default.min.css' rel='stylesheet'/>

5 Busca el siguiente código

</head>

Inserte los siguientes JS, justo arriba del código que encontró

<!-- javascript -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'/>
<script src='https://dl.dropboxusercontent.com/s/iwmx0z2xvsarmqu/owl.carousel.js'/>

Nota importante: Si ya utilizas un Jquery.min.js en tu blog de Blogger, no es necesario insertar la línea de código que está marcado de color amarillo. Pero si no utilizas, ingrese todo el código

6 Busca el siguiente código

</body>

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

<script>
            $(document).ready(function() {
              $(&#39;.owl-carousel&#39;).owlCarousel({
                items: 1,
                merge: true,
                loop: true,
                margin: 10,
                video: true,
                lazyLoad: true,
                center: true,
                responsive: {
                  480: {
                    items: 2
                  },
                  600: {
                    items: 4
                  }
                }
              })
            })
          </script>

7 Busca el siguiente código

]]></b:skin>

Ingrese las siguientes líneas justo abajo del código que encontró

<style type='text/css'>
  #ayudadeblogger .owl-carousel{margin:2rem 0}#ayudadeblogger .owl-carousel .item{height:10rem;background:#4DC7A0;padding:1rem}#ayudadeblogger .owl-carousel .item h4{color:#FFF;font-weight:400;margin-top:0rem}#ayudadeblogger .owl-carousel .item-video{height:300px} 
</style>

Puede modificar la altura del Slideshow, a partir de lo siguiente:

height:300px

Cambie la altura donde dice 300, por el tamaño que usted necesite

8 Un clic en Guardar plantilla

Slideshow de videos en Blogger – Video Tutorial

9 Un clic en Diseño

Slideshow de videos en Blogger – Video Tutorial

10 Abrir Añadir un gadget

Slideshow de videos en Blogger – Video Tutorial

11 Un clic en el widget HTML/Javascript, ábrelo

Slideshow de videos en Blogger – Video Tutorial

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

<!--  Slideshow Carrusel -->
 <section id="ayudadeblogger">
<div class="row">
<div class="large-12 columns">  
<div class="owl-carousel">
<div class="item-video" data-merge="3">
<a class="owl-video" href="https://www.youtube.com/watch?v=cjj2E9dwjjU"></a>
         </div>
<div class="item-video" data-merge="1">
<a class="owl-video" href="https://www.youtube.com/watch?v=Z9LQhTPhAnY"></a>
            </div>
<div class="item-video" data-merge="2">
<a class="owl-video" href="https://www.youtube.com/watch?v=bkP1nmEXhSs"></a>
            </div>
<div class="item-video" data-merge="1">
<a class="owl-video" href="https://www.youtube.com/watch?v=HwctEiWLe84"></a>
            </div>
<div class="item-video" data-merge="2">
<a class="owl-video" href="https://www.youtube.com/watch?v=JXRN_LkCa_o"></a>
            </div>
<div class="item-video" data-merge="3">
<a class="owl-video" href="https://www.youtube.com/watch?v=MW5YfEEtO68"></a>
            </div>
<div class="item-video" data-merge="1">
<a class="owl-video" href="https://www.youtube.com/watch?v=IajZTuxdv3Q"></a>
            </div>
<div class="item-video" data-merge="2">
<a class="owl-video" href="https://www.youtube.com/watch?v=cP1sws_dMFs"></a>
            </div>
</div>
</div>
</div>
</section>

Realice estos cambios:

Cambia todas las direcciones URLs de los videos de Youtube que se encuentran en el ejemplo, he ingrese las direcciones URLs de los videos de Youtube que quieran mostrar en el Slideshow carrusel

13 Un clic en Guardar

Eso es todo, ahora ubica tu nuevo widget Slideshow de videos de Youtube, donde mejor le parezca

¡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