Tutorial de Slideshow para Blogger

En este nuevo tutorial de Slideshow para Blogger aprenderán a instalar un código en un solo widget, con el cual les mostrara un fantástico Slideshow en su blog de Blogger. Los Slideshow se los utiliza para mostrar lo mejor de nuestras categorías que estemos promocionando y así los nuevos usuarios que visitan su blog lleguen a conocer sus novedades. Lo que van a realizar es copiar un código he insertarlo en un widget, realizar algunos cambios en las imágenes, luego guardarlo y ubicarlo debajo de la cabecera principal de su blog, y si solo quieren que se muestre este Slideshow en su página principal y no en las entradas de su blog, pueden seguir el siguiente enlace en el cual se explica cómo realizar este truco. Como ocultar widgets página principal y en las entradas. Este nuevo Slideshow funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc. La facilidad con la que van a instalar este Slideshow en su blog de Blogger es tan simple y lo vamos a realizar en este tutorial para Blogger.

Además, si necesitan otros tipos de Slideshow para Blogger les dejo algunos post que publique anteriormente

A continuación mire su demostración en mi blog de demos

Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” ábrelo

5 Ingresa las siguientes líneas de código en su interior

#sliderFrame {position:relative;width:930px;margin: 0 auto 40px;}

#slider {

width:930px;height:360px;/* Si se modifica el tamaño del slider, también tendrán que modificar el tamaño de las imágenes */

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPH-7GBqCn-5ceMx4Hs6wq3ie6NR43q-SD3Mou5vXR_Hqc_YT58_QcQh-4ngSMYLIlwaYsn1RbbddJjUpwsGKPm1wwPIguJCR5bmNDlUSu2yv8aM6FvgHjEctjEX8zt0NuO9qyx5xROPy/s1600/loading.gif) no-repeat 50% 50%;

position:relative;

margin:0 auto;/*centrado de la imagen slider center-aligned */

box-shadow: 0px 1px 5px #999999;

}

#slider img {

position:absolute;

border:none;

display:none;

}

/* the link style (if an image is wrapped in a link) */

#slider a.imgLink {

z-index:2;

display:none;position:absolute;

top:0px;left:0px;border:0;padding:0;margin:0;

width:100%;height:100%;

}

/* Estilos Caption */

div.mc-caption-bg, div.mc-caption-bg2 {

position:absolute;

width:100%;

height:auto;

padding:0;

left:0px;

bottom:15px;

z-index:3;

overflow:hidden;

font-size: 0;

}

div.mc-caption-bg {

background-color:black;

}

div.mc-caption {

font: bold 14px/20px Arial;

color:#EEE;

z-index:4;

padding:10px 0;

text-align:center;

}

div.mc-caption a {

color:#FB0;

}

div.mc-caption a:hover {

color:#DA0;

}

/* ------Centrado ubicación de puestos------*/

div.navBulletsWrapper {

top:360px; left:400px; /* Este punto es la posición relativa del #slider */

width:150px;

background:none;

padding-left:20px;

position:relative;

z-index:5;

cursor:pointer;

}

/* Realizador bullet */

div.navBulletsWrapper div

{

width:11px; height:11px;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFphM69qWiK8Y_mZ8eTxQK9UiloWC96cf0KUdQztVOJUU_AHy6AWn_GHU_qSLZdR2KH2JeGip_opFDbKSzfiz8Z3l7wEaxzUL8ITZt4UnneLa2JzO6p1zfMRTD7_atgFiFrpbIPNjPq8Hp/s1600/bullet.png) no-repeat 0 0;

float:left;overflow:hidden;vertical-align:middle;cursor:pointer;

margin-right:11px;/* distance between each bullet*/

_position:relative;/*IE6 hack*/

}

div.navBulletsWrapper div.active {background-position:0 -11px;}

.intro {

bottom: 0;

color: rgba(0, 0, 0, 0.2);

font-size: 16px;

position: absolute;

right: 0;

text-decoration: none;

z-index: 99999;

}

/* --------- Start jQuery y Agregar URLs imágenes, URLs de páginas, descripción------- */

#slider

{

transform: translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

-o-transform:translate3d(0,0,0);

}

</style>

</div>

El poder de Blogger <a href="http://ayudadeblogger.com/" target="_blank">Ayudadeblogger.com</a>

</div>

<a href="http://www.ayudadeblogger.com/" target="_blank">Widgets</a> <a href="http://www.ayudadeblogger.com/" target="_blank">Plantillas</a> Gratis.

</div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que ustedes tendrán que realizar sus diferentes cambios

Cambia las URls que están marcadas de color rojo, estas son las responsables de mostrar las imágenes en el Slideshow. Les recuerdo que las imágenes que vayan a mostrar en el Slideshow deben tener una dimensión de 940x360 pixeles, así que deberán colocar de ese tamaño.

Para poner las direcciones URLs de sus artículos es donde dice “AQUÍ LA URL DEL ARTICULO” como también debes borrar las URLs que están marcadas de color azul http://ayudadeblogger.com/.

Y por último, la pequeña descripción que se mostrara en su Slideshow son las palabras que están marcadas de color verde, bórralas y pon ahí la descripción que tú quieras.

Eso es todo, es momento de dar un clic en “Guardar” y ubícalo debajo de la cabecera principal de tu blog

Nota: Si quieres reducir el tamaño del Slideshow, solo tienes que cambiar en los números que están marcados de color amarillo, además al reducir el tamaño, también tendrán que reducir el tamaño de las imágenes.

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

TAGS: Slideshow

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

AMP Carrusel video

26 comentarios:

WILLY SANCHEZ11 de noviembre de 2013, 22:34
Hola Luis, agregue mas fotos alSlideShow, pero los botocitos que presentan debajo del slideshow se pusieron verical , como puedo eliminarlos ó ponerlos hrizonla como salen cuando son 5 fotos y como puedo eliminarle el link de ayudadeblogger que se presenta debajo.
ResponderEliminar
Respuestas
Unknown16 de noviembre de 2013, 11:08
Buenos dias

Luis, con solo comocar el tamaño exacto que dices, podre colocar todas las fotos que desee y no habra problema..

he tratado de darle el tamaño a las fotos pero no he podido , con cual aplicacion puedo darle el tamaño que indicas sin inconveniente?

gracias y disculpa tantas pregutantas
ResponderEliminar
Respuestas
Unknown18 de noviembre de 2013, 23:43
muchas Gracias Luis por Tu ayuda y el SlideShow, segui tus instrucciones y logre ponerlo a funcionar, pero hay algo que quisiera poder quitar y es en la parte central abajo del slideshow me aparece el nombre de tu Blog, Ayudadeblogger como un Link, quiero eliminarlo, como sabras es necesario para que se vea mas bonito., donde puedo eliminarlo. Mi Blog se llama apetae.com
ResponderEliminar
Respuestas
Unknown20 de noviembre de 2013, 10:06
Buenos dias, gracias por tus instrucciones

como puedo eliminar el codigo https://ivyth.googlecode.com? no se como eliminarlo
para arreglar el error que me sale en el blog
ResponderEliminar
Respuestas
Unknown21 de noviembre de 2013, 8:28
Muchas Gracias, lo encontre, estaba en otro widget.

Mil gracias por tu ayuda y tu atencion
ResponderEliminar
Respuestas
Unknown21 de noviembre de 2013, 8:30
Te envie el email, para que me envies las intrucciones de como borrar el link de ayudadeblogger.com que aparece debajo del slide show.

gracias, mi correo es apetae.tkd@gmail.com
ResponderEliminar
Respuestas
Marisol Alba28 de enero de 2014, 6:10
Hola Luis
Realmente estoy desesperada, porque por más que intento no hay forma. Soy novata y tengo muchísimo interés en esta preciosa galería.
Cambié el tamaño de la galería a 300 x 200. (el de mis fotos)
Creo que sustituí bien las urls, y borré todo lo que era texto.
Si quieres ver una prueba: http://yaestoydesesperada.blogspot.com.es/
o dime donde te puedo mandar el .txt

te lo agradecería enormemente
Un saludo
marisol (msolalba@gmail.com)

ResponderEliminar
Respuestas
Unknown31 de enero de 2014, 4:14
Hola, gracias por el tutorial. Me funciona perfectamente.
No se si sería posible quitar el link de ayudadeblogger.
Si?

Muchas gracias
ResponderEliminar
Respuestas
DAVID RODRIGUEZ2 de septiembre de 2014, 23:07
hola luisito, me gustaría disminuir la velocidad de cambio de imagenes. Gracias.
ResponderEliminar
Respuestas
Unknown11 de septiembre de 2014, 19:17
hola Luis puse el slider en mi blog y me funciona bien PERO HAY UN PROBLEMA al ponerlo me pone toda la fuente del blog en negrita ya intente corregir las lineas del slider pero no doy cual sea el problema. ojala me puedas ayudar
ResponderEliminar
Respuestas
MarioMG25 de octubre de 2015, 12:00
Hola Luis,
Gracias por el slider, funciona muy bien. Me gustaría saber si es posible quitar el enlace a ayudadeblogger.com
ResponderEliminar
Respuestas
mentira mundial29 de octubre de 2015, 3:02
la verdad no entiendo yo necesito la caja de comentarios
ResponderEliminar
Respuestas
mentira mundial29 de octubre de 2015, 3:02
la verdad no entiendo yo necesito la caja de comentarios
ResponderEliminar
Respuestas
Herib2 de marzo de 2016, 13:04
Es genial tu aporte, pero me es incomodo que aparezca en sello de agua "ayuda de blogger" ya elimine todos los textos pero me sigue saliendo. Respeto tu trabajo, me gustaría saber si se puede quitar o no.
ResponderEliminar
Respuestas

Añadir comentario