Slideshow para Blogger video tutorial


En la plataforma de Blogger.com podrás ingresar todo tipo de widgets, códigos, estilos CSS, que mejor se visualice. Una de las mejores formas de crear una página web gratis es el sitio web Blogger.com.

Si dispones de un blog de Blogger, tendrás la opción de agregar un Slideshow en el sidebar de su blog.

¿Cómo funciona?

Lo que va a mostrar nuestro Slideshow son las últimas publicaciones que se hayan realizado en sus blogs, y cada vez que vayan publicando se actualizara.

Slideshow para Blogger video tutorial

Pueden ver su demostración en la siguiente página web


Video Tutorial


Instrucciones:

1 Ir a Blogger

2 Un clic en “Plantilla

Slideshow para Blogger video tutorial

3 Un clic en “Editar HTML

Slideshow para Blogger video tutorial

Ahora se le abrirá el Editor HTML de su plantilla

Slideshow para 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 para Blogger video tutorial

4 Busca este código

</head>

5 Ingrese las siguientes líneas de código justo arriba del código que encontró

<!-- Estilos CSS Slideshow sidebar -->
<style type='text/css'>
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url(&quot;https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css&quot;);

/* Pre carga */

.flexslider.loading:after {
    content: &#39;&#39;;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://lh3.googleusercontent.com/-WWve06d4dB4/Vq28tN4LMUI/AAAAAAAAFcM/k8IQajpDnS4/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}

.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}

.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.flexslider a {
    text-decoration: none;
}

/* Título de post */

.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: &#39;Open Sans&#39;, sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}

.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}

.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}

ul.slides li a {
    display: block;
    overflow: hidden;
}


/* Css Blogger css Arreglos */

.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}

.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}

.flexslider ul li {
    margin-bottom: 0 !important;
}

.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

ul.flex-direction-nav {
    position: static;
}

ul.flex-direction-nav li {
    position: static;
}

.error {
    font-family: monospace, sans-serif;
}

@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Incluye Scripts dependientes -->
<script src='https://code.jquery.com/jquery-1.12.0.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js' type='text/javascript'/>
<script src='http://shuvojitdas.com/script/jquery.bdslider.min.js' type='text/javascript'/>
<!-- Fin Estilos CSS Slideshow sidebar -->

6 Un clic en Guardar plantilla

Slideshow para Blogger video tutorial

7 Ahora diríjase a Diseño

Slideshow para Blogger video tutorial

8 Un clic en Añadir un gadget

Slideshow para Blogger video tutorial

9 Busca el widget HTML/Javascript, ábrelo

Slideshow para Blogger video tutorial

10 Ingrese el siguiente código

<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 295, // Ancho de la imagen en px value
        imageHeight: 250, // Largo de la imagen px value
        maxItem: 6, // El número máximo de imágenes a mostrar
        animation: "slide", // Seleccione el tipo de animación, "fade" or "slide"
        showPostTitle: true, // Muestra de títulos ? (true/false)
        postTitleStyle: "overlayLight", // Estilos: "default, "overlayDark" or "overlayLight"
    });
});
</script>

Slideshow para Blogger video tutorial


11 Un clic en Guardar

12 Ubique su widget slideshow en el sidebar de su blog

Eso es todo

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: