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'/>
<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() {
$('.owl-carousel').owlCarousel({
items: 1,
merge: true,
loop: true,
margin: 10,
video: true,
lazyLoad: true,
center: true,
responsive: {
480: {
items: 2
},
600: {
items: 4
}
}
})
})
</script>
$(document).ready(function() {
$('.owl-carousel').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>
#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>
<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
Fuente; ayudadeblogger
Publicado por;
0 comentarios: