Home Slideshow Tutorial de Slideshow para Blogger

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.

Tutorial de Slideshow para Blogger

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

  1. Como agregar a mi blog de blogger un Slideshow automatico
  2. Como crear un Slideshow manual para mi blog de blogger
  3. Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
  4. Como insertar un Menú desplegable y un Slideshow para blogger
  5. Como insertar un Slideshow en Blogger simples pasos
  6. Galería de imágenes para blogger
  7. Galería de imágenes para blogger V3
  8. Instalar un Slideshow para blogger con un solo widget
  9. Mostrar un Slideshow con mis entradas populares para blogger
  10. Necesito un Slider para mi blog de blogger
  11. Nuevo estilo de Slideshow para blogger
  12. SlideShow con control deslizante para blogger
  13. Slider para blogger en 3D
  14. Slideshow con Entradas Populares Nuevo estilo
  15. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  16. Slideshow galería de imágenes para blogger
  17. Slideshow para Blogger
  18. Slideshow para blogger blogspot con etiquetas
  19. Slideshow para blogger con un solo widget
  20. Slideshow para blogger manual nuevo estilo
  21. Slideshow para blogger nuevo estilo
  22. Slideshow para blogger versión 4
  23. Slideshow vertical para usarlo en blogger
  24. Widget Galería de Imágenes para blogger V2
  25. Widget Slider galería de imágenes acordeón para blogger
  26. Widget Slideshow para blogger
  27. Widget para blogger, Slideshow con Entradas Populares

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”

Tutorial de Slideshow para Blogger

3 Abre un gadget “Añadir un gadget”

Tutorial de Slideshow para Blogger

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

Tutorial de Slideshow para Blogger

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

<style type="text/css">
#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(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/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(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/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>
<script src="http://yourjavascript.com/50017214373/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/110361282221/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="AQUÍ LA URL DEL ARTICULO"><img src="http://1.bp.blogspot.com/-RLV0RYfogx4/UiNGMi_T9zI/AAAAAAAAEj4/D1sVQhDdc1A/s1600/dise%C3%B1o+web.PNG" alt="#htmlcaption1" /></a>
<a href=" AQUÍ LA URL DEL ARTICULO "><img src="http://4.bp.blogspot.com/-W7jD5whB3vI/UiNNMuLS29I/AAAAAAAAEkI/PPaezfL3Rd8/s1600/dise%C3%B1o+web+profesional.PNG" alt="Ayudadeblogger!" /></a>
<a href=" AQUÍ LA URL DEL ARTICULO "><img src="http://2.bp.blogspot.com/-Uf3WFvGfZqg/UiNUgwETRyI/AAAAAAAAEkg/4_sv1IXmsIM/s1600/venta+de+paginas+web+ecuador.PNG" alt="Lo mejor de Blogger" /></a>
<a href=" AQUÍ LA URL DEL ARTICULO "><img src="http://2.bp.blogspot.com/-cB2XLwj4Jvs/UiNPyG3eUXI/AAAAAAAAEkU/Ux3sLmaCCIw/s1600/dise%C3%B1o+web+profesional+ecuador.PNG" alt="#htmlcaption2" /></a>
<a href=" AQUÍ LA URL DEL ARTICULO "><img src="http://2.bp.blogspot.com/-Uf3WFvGfZqg/UiNUgwETRyI/AAAAAAAAEkg/4_sv1IXmsIM/s1600/venta+de+paginas+web+ecuador.PNG" alt="Widgets y plugins para blogger"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
El poder de Blogger <a href="http://ayudadeblogger.com/" target="_blank">Ayudadeblogger.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.ayudadeblogger.com/" target="_blank">Widgets</a> <a href="http://www.ayudadeblogger.com/" target="_blank">Plantillas</a> Gratis.
</div>
</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?
Si

TAGS:


Share:

Related post

Comentarios

26 comentarios: