Home Slideshow Widget Slideshow para blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2dLUpp1F_8tfNmqcvZ6yZDeQdGB_bvyS66V8JNKsWwb70dz9hEN33JNMe-LvfbN1_bm25e7v2rPVzFheCQaqj14uXUalhQyYEk9e4JKkWG5r3x6fdD_oVg-mOVGhqPgCM99KFXtGAyg/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

TAGS:


Share:

Related post

Comentarios

7 comentarios: