Slideshow para Blogger V6


Nuevo y espectacular Slideshow para Blogger completamente gratis. Esta es una imagen sensible de slider jQuery. Este control deslizante simple pero increíble fue desarrollado para utilizarlo en cualquier página web. Tiene algunas características muy agradables que hace que les guste mucho a los usuarios que visitan sus blogs. La característica más interesante es que es extremadamente sensible y ligero, usted no tiene que ajustar en el código la anchura y la altura al momento de insertar una imagen ya que todas las imágenes tanto como su anchura y altura son ajustables automáticamente. En este tutorial está personalizado para Blogger, por lo que sólo puede copiar y pegar el código para instalarlo en un widget de su blog de Blogger.

Slideshow para Blogger V6

Pueden ver su demostración en la siguiente página de demos

Slideshow para Blogger V6

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

Slideshow para Blogger V6

3 Abre un gadget “Añadir un gadget

Slideshow para Blogger V6

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

Slideshow para Blogger V6

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

<!-- SLIDER CSS converted by ayudadeblogger.com -->
<style type="text/css">
/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2014 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}


/* FlexSlider Necessary Styles
*********************************/
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element by grupodelecluse.com*/
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme*****/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 45px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent; left: -50px; }
.flex-direction-nav .flex-next { background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent; right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.5; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.5; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 0.9; }

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}
</style>
   
<!-- SLIDER HTML -->
      <div id="flex-isfb">
        <!-- Preloader -->
        <div id="preloader"></div>
        <style>
        /* Preloader */
        #preloader {
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:#fff; /* change if the mask should have another color then white */
            z-index:999999999999; /* makes sure it stays on top */
        }
         </style>
        <div class="flexslider">
          <ul class="slides">
            <li>
                <a href="http://ayudadeblogger.com">
                <img src="http://3.bp.blogspot.com/-zK7gQSY62u8/UuqlJaYH12I/AAAAAAAAGgs/MDO9Y4QtH5U/s1600/ayudadeblogger1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://ayudadeblogger.com">
                <img src="http://2.bp.blogspot.com/-AfUAVI-i1EE/Uuqk8uWfjYI/AAAAAAAAGgk/C1POFVduGPs/s1600/ayudadeblogger1.jpg" />
                </a>
            </li>
            <li>
                <a href="http://ayudadeblogger.com">
                <img src="http://3.bp.blogspot.com/-hUju0jhPNBE/UuqktBsayVI/AAAAAAAAGgc/aoPS10PRi18/s1600/ayudadeblogger1.jpg" />
                </a>
            </li>
          </ul>
        </div>
      </div>

<!-- SLIDER JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://yourjavascript.com/1123117413/ayudadeblogger-jquery-flexslider-min.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
                        animation: "slide",
                        controlNav: true,
                        directionNav: true,
                        easing: "swing",
                        slideshowSpeed: 3000,       
                        animationSpeed: 600,
      });
    });
    //<![CDATA[
        $(window).load(function() {
            $('#preloader').delay(350).fadeOut('slow');
        })
    //]]>
</script>

Realiza estos cambios:

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

Las direcciones URLs que están marcadas de color rojo, deben cambiarlas por las direcciones URLs de sus imágenes.

Además, tienes que cambiar las direcciones URLs que están  marcadas de color azul, por las direcciones URLs de los post que quieras dar a conocer.

Si necesitan aumentar más puestos de imágenes en el Slideshow, basta con insertar el siguiente código que está marcado de color amarillo justo arriba del </ul>

<li>
                <a href="http://ayudadeblogger.com">
                <img src="http://3.bp.blogspot.com/-hUju0jhPNBE/UuqktBsayVI/AAAAAAAAGgc/aoPS10PRi18/s1600/ayudadeblogger1.jpg" />
                </a>
            </li>


Eso es todo, es momento de dar un clic en “Guardar” y ubica tu nuevo widget Slideshow justo debajo de la cabecera principal de tu blog.

Fácil verdad!

Recuerda suscribirte y recibirás mis nuevas actualizaciones diarias directamente en tu correo electrónico.

¿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

13 comentarios:

  1. Saludos amigo... la pregunta (y disculpa mi ignorancia) la URL de la imagen implica que debo subir la imagen a un hosting en internet o la imagen a utilizar puede estar simplemente guardada en mi pc? y en este ultimo caso, la imagen se grabaría automáticamente en el blog dentro del slide?

    ResponderEliminar
  2. Buenas amigo, de nuevo yo por acá. Tengo un problema que por ahora no he podido solucionar por mi cuenta, coloqué este Slideshow en la cabecera de mi blog, todo bien, cuando voy a ingresar a la página pareciera que se tardara en cargar pero no es así, es un efecto que trae el Slideshow que me tarda unos segundos en cargar la parte superior de la página, te dejo el link del blog para que lo revises y me ayudes, muchas gracias http://camisetasnacionales.blogspot.com/

    ResponderEliminar
  3. Hola Luis, Bienvenido, que bueno que has regresado, porque para sesoria no hay como el creador de toda esta tecnologia, gracias por tu ayuda y saludos.

    Te pongo mi link para que veas el slideshow que he insertado, noticiags.com, esto para que me digas si hay modo de hacer un poco mas grandes las imagenes, que cubra lo maximo permitido en la imagen.

    ResponderEliminar
  4. saludos amigo muchas gracias por tu ayuda hice todo lo que indicaste y todo me salio bien solo tengo una pregunta como puedo aumentar el tiempo de duracion de cada fotografia ya que cambian muy rapido?

    ResponderEliminar
    Respuestas
    1. Hola, para detener el tiempo de a imagen, solo basta con cambiar en la siguiente linea: slideshowSpeed: 3000 cambia 3000 por otro valor y andalo probando.
      Saludos.

      Eliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. He visto este truco y funciona perfectamente, tal vez algo estas haciendo mal o algun script de tu pagina esta ocacionando este conflicto, saludos.

      Eliminar
  6. disculpa te hago una consulta me queda muy angosto la relacion de imagen, es decir ocupa el ancho de la pagina hasta ahi todo bien pero el alto es demasiado corto

    ResponderEliminar
  7. si quiza algo estoy haciendo mal, vi en otro post tuyo algo de eliminar el jQuery, podrias decirme en que caso seria y quiza ahi esta el problema o como podria ver que script esta fallando?, saludos.

    ResponderEliminar
  8. Hola, es posible cambiar las proporciones del slide?
    muchas gracias.

    ResponderEliminar