Slideshow para blogger con un solo widget


En este nuevo y fabulo tutorial de Slideshow para blogger, van ha aprender a instalara un slideshow para blogger en un solo widget. No vamos a ingresar a nuestro Editor HTML, lo vamos hacer tan fácil y practico. Lo que va hacer nuestro nuevo widget es mostrarse de forma automática en nuestro blog de blogger, lo que hará es mostrar las 8 ultimas publicaciones de nuestro blog, y si quieren aumentar las vistas en su slideshow lo podrán hacer. El slideshow funciona en todos los navegadores como Firefox, Google Chrome, Bing, etc.

Slideshow para blogger

Pueden ver como funciona este nuevo Slideshow para blogger en mi página de demos. A continuación mire su demostración


Anteriormente publique 18 Slideshow para blogger de los cuales les dejo los enlaces a continuación:

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

1 Ir a blogger

2 Da un clic en “Diseño

Slideshow para blogger

3 Abre un gadget “Añadir un gadget

Slideshow para blogger

4 Busca el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior

Slideshow para blogger

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#229322;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #229322;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#229322;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/1906523361/slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://ayudadeblogger.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Realiza este cambio:

Ahora solo basta con borrar el link que esta marcado de color azul http://ayudadeblogger.com/  y poner ahí el link de tu blog de blogger.

Si quieres aumentar el número de post que se muestren en tu slider, tienes que borrar el número 8 que esta marcado de color rojo y poner el número que tú quieras

Además si quieres cambiar el color del slideshow solo tienes que encontrar los tres códigos que están marcados de color verde 229322 y poner el código de color que tú quieras.

Eso es todo, ahora dale un clic en “Guardar” y ubícalo en la cabecera principal.

Fácil verdad!

¿Necesitas ayuda?

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

Saludos




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: