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

•   La actividad debe ser realizada de forma individual desde su respectivo hogar, para luego ser revisada en el colegio.

•   Para realizar la siguiente actividad deberá elegir cuatro (04) imágenes diferentes que podrían ser fotografías, dibujos, caricaturas, entre otras,  para hacerle diferentes correcciones, así como también cambiarle el fondo original según lo aplicado en la asignación número 4.

•   Una vez realizadas las correcciones a las imágenes, deberá montarlas en una presentación de Power Point, con el formato que se le indicara en el video tutorial de esta asignación.

•   Al final de esta asignación encontrará tres videos tutoriales donde se indica la forma de realizar la presente actividad y el formato que deberá utilizar para la presentación de Power Point.

•   Para cualquier duda o inquietud no dude en realizar su planteamiento por medio de la casilla de comentarios de esta asignación.