Rotulo

EL MUNDO DE KIKO

Ultimas entradas

Entrada Destacada

PÁGINA DE BIENVENIDA

Insertar un Slideshow de Vídeos para Blogger. Necesitas insertar un Slideshow carrusel de videos de Youtube en tu blog de Blogger...

Insertar un Slideshow de Vídeos para Blogger

Insertar un Slideshow de Vídeos para Blogger.



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 podemos crear cientos de widgets, con los cuales mejoraremos nuestro bloc no digo que es tarea fácil sin saber lo que tocas, pero vamos a ver si lo podemos explicar de una manera fácil y practica para los menos entendidos.



¿Cómo funciona?

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

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

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

 1 Ir a Blogger

1 Un clic en Tema
                                                           
                                                             
2 Un clic en “Editar HTML”

                                                                 

Ahora set te 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 el siguiente código

<head>


Inserta los siguientes CSS justo abajo del código que encontráste

                                                                                 



<!-- javascript -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'/>
<script src='https://cdn.rawgit.com/grupodelecluse/slideshow-video/079ad07d/video-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>

Ingresa el siguiente código justo arriba del código que encontráste




<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>

Ingresa las siguientes líneas justo abajo del código que encontráste

                                                                 


<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>

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

height:300px

Cambia la altura donde dice 300, por el tamaño que necesites

8 Un clic en Guardar plantilla



9 Un clic en Diseño



10 Abrir Añadir un gadget

                                                                   


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


12 Ingresa 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>

Realiza estos cambios:

Cambia todas las direcciones URLs de los videos de Youtube que se encuentran en el ejemplo, he ingresa las direcciones URLS de los vídeos de Youtube que quieras mostrar en el Slideshow carrusel

13 Un clic en Guardar
                                                               

Eso es todo, ahora ubica tu nuevo widget Slideshow de vídeos de Youtube, donde mejor te parezca




Fecha de la Publicación; 27-12-2018

 Fuente; ayudadeblogger

 Publicado por;                                                      











0 comentarios:

Paginacion