Slideshow son las últimas publicaciones

Comparteme :

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.

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

Demostración

1- Ir a Blogger

2- Un clic en “Plantilla”

3- Un clic en “Editar HTML”

Ahora se le 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 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqn1-NN-orriXksRgj7bi-5zSyqxksVgd1lVgZnv8sYmlMXQSoRJJhDZmrPAe3o4Ls_n2i1hDDzArpCOoyQZTEnD_K5o9a0V6Y8CB_ueUrs7rJhbb_e1fPS5_eT6JTBaQkGQdGv8JS0g8/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

7- Ahora diríjase a Diseño

8- Un clic en Añadir un gadget

9- Busca el widget HTML/Javascript, ábrelo

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>

11- Un clic en Guardar

12- Ubique su widget slideshow en el sidebar de su blog

Eso es todo.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Slideshow son las últimas publicaciones.

Comparte

BLOGUERO TUTORIAL