Widget Slideshow para blogger

Conseguir nuevos trucos para blogger e implementarlos en nuestro blog de blogger, es presentar nuestro blog de una forma diferente de los demás blogs. Ayudadeblogger.com te mostrara un nuevo y fabuloso Slideshow para blogger, con un estilo totalmente diferente a los demás.  El Slideshow esta creado para que muestre nuestras ultimas publicaciones con el titulo de su publicación y una pequeña descripción de su articulo, lo podrán poner debajo de la cabecera principal de su blog o al final de su blog de blogger, es un simple código que no le dará ni un tipo de error. Este nuevo widget Slideshow para blogger funciona perfectamente en todos los navegadores web como, Firefox, Internet Explorer, Google Chrome etc. La instalación de este Slideshow es muy fácil, solo tendrán que copiar el código, e insertarlo en un solo widget y cambiar una sola URL para que muestre sus últimas publicaciones. Así que no es complicado en obtener este Slideshow para blogger


Widget Slideshow para blogger

Anteriormente presente algunos tipos de Slideshow para blogger de los cuales tal vez les pueda interesar:

  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 hacer un Slideshow Carrusel basado en etiquetas para blogger
  5. Instalar un Slideshow para blogger con un solo widget
  6. Mostrar un Slideshow con mis entradas populares para blogger
  7. Necesito un Slider para mi blog de blogger
  8. Nuevo estilo de Slideshow para blogger
  9. SlideShow con control deslizante para blogger
  10. Slider para blogger en 3D
  11. Slideshow con Entradas Populares Nuevo estilo
  12. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  13. Slideshow para Blogger
  14. Slideshow para blogger blogspot con etiquetas
  15. Slideshow para blogger con un solo widget
  16. Slideshow para blogger manual nuevo estilo
  17. Slideshow para blogger nuevo estilo
  18. Slideshow vertical para usarlo en blogger
  19. Widget Slider galería de imágenes acordeón para blogger
  20. 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 Da un clic en “Diseño

Widget Slideshow para blogger

3 Abre un gadget “Añadir un gadget

Widget Slideshow para blogger

4 Busca el widget que dice “HTML/Javascript

Widget Slideshow para blogger

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>
<style scoped="" type="text/css">
#areatmpx {width: 100%;margin: 0 auto;}
.ei-slider{position:relative;width:100%;max-width:1000px;height:350px;margin:0 auto 35px;padding:0;background-color:white}
.ei-slider-loading{width: 100%;
height: 100%;
z-index: 997;
position: absolute;
top: 0;
left: 0;
background-color: white;
text-indent: -9999px;
background-image: url(http://2.bp.blogspot.com/-aFHDAB82tQw/UCEoDlHaNOI/AAAAAAAAEUg/J5hyAZvUVxo/s1600/loading.gif);
background-position: 50% 50%;
background-repeat: no-repeat;}
.ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #9E0505;border-radius:2px}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}
.ei-slider-large li img{width:100%;border: 0;padding:0;}
.ei-title{position:absolute;right: 8%;left: 8%;bottom:20%;color:#fff;opacity:0.8}
.ei-title p{text-align:left}
.ei-title h2{font-family: Georgia, Times, "Times New Roman";text-align:right; margin-left: auto;font-size:18px;line-height: 20px;color:#b5b5b5;max-width: 80%;text-transform:capitalize;background:#000;padding:5px;}
.ei-title h2 a{color:white}
.ei-title h2 a:hover{text-decoration:none;color:#9E0505}
.ei-title p{font-family: Verdana, Geneva, sans-serif;margin-left: auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position: relative;left: -5%;}
.ei-slider-thumbs{padding: 0 0;height:13px;margin:0 auto;width:100%;position:relative;}
.ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#9E0505;}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
@media only screen and (max-width:660px){
#areatmpx {width: 100%;}
}
@media only screen and (max-width:479px){
.ei-slider {height: 200px;}
.ei-title {bottom: 5%;}
.ei-title h2 {font-size: 14px;line-height: 17px;}
}
</style>

<div id="areatmpx">
<script src="http://yourjavascript.com/0015470133/autoelastic-min.js" type="text/javascript"></script>
<div id="randompostxx"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
AutoElasticSlideshow({
blogURL:"http://ayudadeblogger.com",
MaxPost:7,
idcontaint:"#randompostxx",
ImageSize:400,
Summary:100,
animation:'center',
speed:800,
easing:'',
titlesFactor:0.60,
titlespeed:800,
titleeasing:'',
thumbMaxWidth:150,
Interval:3000,
autoplay:true,
pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
tagName:false
});
});
//]]>
</script></div>

Realiza este cambio

Cambia la URL que esta marcada de color azul http://ayudadeblogger.com, por la URL de tu blog, eso es todo, y si quieren aumentar el numero de los post a mostrar, solo basta con cambiar el numero 7 por el numero que quieran. Ahora es momento de dar un clic en “Guardar”. Ubica tu widget Slideshow debajo de la cabecera principal.

Fácil verdad!

¿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



Share:

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.

Related post

Comentarios

8 comentarios:

  1. Primero, muchas gracias por el efuerzo diario Luis. El slideshow es muy chulo.
    Tengo una duda o mejor dicho un problema despues de agregar el widget, y es que las imagen no marchan ( aqui si quieres ver el blog: http://geniologico.blogspot.com/).
    He probado de cambiar el tamano de la imagen y todavia no marcha.
    y muchas gracias..

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, el problema es que las imagenes que tienes incrustadas en tus post, no probienen de tus post o no son subidas por ti, tienes que subir una imagen a tu post y no copiar la imagen desde otra direccion web y ponerlo en tu blog es por eso que no se muestran las imagenes. Por ejemplo esta es una de tus imaganes http://t2.gstatic.com/images?q=tbn:ANd9GcRI0guemClsH3RtaDqPGt1rKt-hSiqzTZjq1dy6i9LLYy3J5VAi-Q
      esta imagen probiene desde otro sitio web o adecuado.
      Saludos.

      Eliminar
  2. primero q todo quiero agradecerte esta genial el slider me fue de mucha ayuda gracias pero me gustaria saber como hacer para que muestre mas tiempo la imagen por ejemplo la muestra durante 2 segundos y yo quiero que la muestre durante unos 8 segundos que parte del código midifico por favor te lo agradecería mucho

    ResponderEliminar
    Respuestas
    1. Hola, cambia el numero Interval:3000 por el numero 6000, eso es todo
      Saludos

      Eliminar
  3. TENGO UNA PREGUNTA QUE ME HA HECHO REVOLCAR TODO GOOGLE Y NO ENCUENTRO RESPUESTA, A VER SI ME PUEDES AYUDAR, YO PUEDO COLOCAR DOS SLIDER EN UN MISMO BLOQ????

    ResponderEliminar
  4. Hola gracias ante todo...yo manejo solo una entrada en mi blog, pero tengo varias paginas, quiero que roten las imagenes de mis paginas, como hago? http://fiestaimpresa.blogspot.com

    ResponderEliminar
  5. primero que todo muchas gracias por compartir tus conocimientos, pero tengo un inconveniente y es que el slider no avanza .. se queda en una sola entrada, no se que pueda estar ocurriendo, este es mi blog http://tibutarium.blogspot.com.co, y si le doy click a la barrita azul me dirige a la parte de arriba del blog, me gutaria me ayudara a solucionar el inconveniente ya que me gustaría no prescindir de este slider... Gracias....

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta, si usted ya cuenta en su blog de Blogger un script como el siguiente:

      http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js

      Ya no debe insertarlo en su blog de Blogger ya que crea conflictos al tener dos script.

      Es por eso, que se recomienda tener uno solo, si usted esta utilizando dos Slideshow, se recomienda eliminar un script de uno de los slideshow y así no se le presentara este inconveniente.

      Saludos.

      Eliminar