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.
Pueden ver su demostración en la siguiente página web
Instrucciones:
1 Ir a Blogger
2 Un clic en “Plantilla”
4 Busca este código
</head>
5 Ingrese las siguientes líneas de código justo arriba del código que encontró
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
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
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
Video Tutorial
Instrucciones:
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("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");
/* Pre carga */
.flexslider.loading:after {
content:
'';
position:
absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5MaY4UgoFY3Oo07mb4DJeRcf7hsYo_7Vm8zC0VJX7_gUjnpAk70Fu2cWGXZhB2a82fr2-qJxS-7jtk9ueJ8HKRHaKk1csrDvnJ0tBzTx6ubxOfPPAP4-kAzkLQrKVB5wTWlyRndbOkcUK/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:
'Open Sans', 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
¡Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios