add

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

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