DISEÑO DE SLIDESHOW PARA BLOGGER

PASO 1


Lo primero que tenemos que hacer es ir a

Diseño > Añadir un gadget HTML

Allí pegamos esto:

CODIGO 1
<div class="main_view">
  <div class="window">
    <div class="image_reel">
      <a href="#"><img src="URL_IMAGEN_1.jpg" /></a>
      <a href="#"><img src="URL_IMAGEN_2" /></a>
      <a href="#"><img src="URL_IMAGEN_3" /></a>
    </div>
  </div>
  <div class="paging">
    <a href="#" rel="1">1</a>
      <a href="#" rel="2">2</a>
      <a href="#" rel="3">3</a>
  </div>
</div>




 DONDE DICE : URL_IMAGEN_1.jpg    SE SOMBREA Y SE PEGA la URL de la imágen que queramos.

  ESE PASO SE REPITE CON LAS DEMAS IMAGENES

Y se pueden poner tantas queramos, añadiendo debajo lo que sería:

<a href="#"><img src="URL_IMAGEN_1.jpg" /></a>



PASO 2


ENTRAR AL MENU PLANTILLA
                 EDITAR HTML


Debemos tener el jQuery agregado en nuestro head:

PULSAR TECLAS "CTRL F" PARA ABRIR EL MENU DE BUSQUEDA

BUSCAR LA PALABRA HEAD Y DEBAJO DE ELLA PEGAR EL CODIGO 2

CODIGO 2

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>




PASO 2.2

PEGAR EL CODIGO 3 DEBAJO DEL CODIGO 2


CODIGO 3


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $(".paging").show();
  $(".paging a:first").addClass("active");
  var imageWidth = $(".window").width();
  var imageSum = $(".image_reel img").size();
  var imageReelWidth = imageWidth * imageSum;
  $(".image_reel").css({'width' : imageReelWidth});
  rotate = function(){
    var triggerID = $active.attr("rel") - 1;
    var image_reelPosition = triggerID * imageWidth;
    $(".paging a").removeClass('active');
    $active.addClass('active');
    $(".image_reel").animate({left: -image_reelPosition}, 500 );
  };
  rotateSwitch = function(){
    play = setInterval(function(){
      $active = $('.paging a.active').next();
      if ( $active.length === 0) {$active = $('.paging a:first');}
      rotate();
    }, 7000); // este es el valor que define la velocidad (7 segundos)
  };
  rotateSwitch();
  $(".image_reel a").hover(function() {clearInterval(play);}, function() {rotateSwitch();});
  $(".paging a").click(function() {$active = $(this);clearInterval(play);rotate();rotateSwitch();return false;});
});
//]]>
</script>




PULSAR "TECLA GUARDAR PLANTILLA"





PASO 3

AÑADIR CSS

ENTRAR AL MENU PLANTILLAS
                PERSONALIZAR
                  AVANZADO
                    AÑADIR CSS

ALLI PEGAR EL CODIGO 4


COGIGO 4

<style>
  .main_view { /* el contendor principal */
    position: relative;
  }
  .window {  /* el contendor con las imágenes */
    overflow: hidden;
    position: relative;
    /* debemos dimensionarlo */
    height: 175px;
    width: 550px;
  }
  .image_reel { left: 0; position: absolute; top: 0; }
  .image_reel img {
    float: left;
    /* conviene dimensionarlas */
    height: 175px;
    width: 550px;
  }
  .paging { /* la navegación a gusto de cada uno */
    background-color: rgba(146, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80920000,endColorstr=#80920000);
    zoom: 1;
    border-radius: 4px;
    bottom: 10px;
    display: none;
    height: 42px;
    line-height: 40px;
    position: absolute;
    right: 10px;
    text-align: center;
    width: 178px;
    z-index: 100;
  }
  .paging a { /* los números */
    color: #FFF;
    font-size: 20px;
    padding: 5px;
    text-decoration: none;
  }
  .paging a.active {
    background: #920000;
    border: 1px solid #610000;
    border-radius: 3px;
    font-weight: bold;
  }
  .paging a:hover { font-weight: bold; }
</style>



"PULSAR TECLA APLICAR AL BLOG"


LISTO YA ESTA EL SLIDER EN SU BLOG.

NOTA:
PARA COLOCAR LOS NUMEROS DE LAS IMAGENES CERCA DE LAS MISMAS:

ENTRER EN:
           EDITAR GARGET DEL SLIDESHOW
              BORRAR EL SEGUNDO CODIGO <DIV>


PARA BORRAR LA PUBLICIDAD DEL SLIDESHOW: (EN CASO DE QUE LA TENGA)

               ENTRER EN:
                         EDITAR GARGET DEL SLIDESHOW
                         BORRAR ULTIMAS DOS LINEAS DONDE DICE:

Read more: http://elrincondeirle.blogspot.com/2012/02/rotador-de-imagenes.html#ixzz2yD4iP8sd