Galeria de imagens

Colocando um galeria de imagens no Blogger

Parace um slide, e é muito útil pra blogs que querem demontrar uns produtos, ou vender, ou demonstrar imagens ou enfeitar...

É só usar a criatividade,  fica assim:

Para ver uma demonstração de como funciona

CLICK AQUI

Gostou? Se quiser colocar um no seu blog siga as instruções abaixo:

Vá no HTML do seu blog e procure por (procure com Ctrl+f):

]]></b:skin>

E cole acima dele o seguinte códico:

/* Gallery images-------------------------------------- */

#gallery{

-moz-box-shadow:0 0 3px #AAAAAA;

-webkit-box-shadow:0 0 3px #AAAAAA;

box-shadow:0 0 3px #AAAAAA;

-moz-border-radius-bottomleft:4px;

-webkit-border-bottom-left-radius:4px;

border-bottom-left-radius:4px;

-moz-border-radius-bottomright:4px;

-webkit-border-bottom-right-radius:4px;

border-bottom-right-radius:4px;

border:1px solid white;

background:#FEe9ea;/*cor de fundo do slide menor*/

width:540px;

margin: 2px 3px 1px 8px;

border: 2px dotted #FCB4B7;/*cor da borda mude se quiser*/

overflow:hidden;

}

#slides{

height:350px;

width:920px;

overflow:hidden;

}

.slide{

float:left;

}

#menu{

height:60px;

}

ul#gal{

margin:0px;

padding:0px;

}

#gal li{

width:57px;

display:inline-block;

list-style:none;

height:55px;

overflow:hidden;

}

#gal li.inact:hover{

background:transparent;

}

#gal li.act,li.act:hover{

background:#FEe9ea; /*cor do menu mude se quiser*/

}

#gal li.act a{

cursor:default;

}

.fbar{

width:2px;

background:transparent;

}

#gal li a{

display:block;

background:#FCB4B7;/*cor de cima do menu pequeno*/

height:35px;

padding-top:10px;

}

.a img{border:none;}

Agora abaixo de:

]]></b:skin>

Cole este código:

               <!-- slide-->

style="color: #444444; font-family: Georgia,"Times New Roman",serif;"> <!--[if lte IE 7]>

<style type="text/css">

ul li{

    display:inline;

    /*float:left;*/

}

</style>

<![endif]-->

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

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

    /* This code is executed after the DOM has been completely loaded */

   

    var totWidth=0;

    var positions = new Array();

    

    $('#slides .slide').each(function(i){

        

        /* Traverse through all the slides and store their accumulative widths in totWidth */

        

        positions[i]= totWidth;

        totWidth += $(this).width();

        

        /* The positions array contains each slide's commulutative offset from the left part of the container */

        

        if(!$(this).width())

        {

            alert("Please, fill in width & height for all your images!");

            return false;

        }

        

    });

    

    $('#slides').width(totWidth);

    /* Change the cotnainer div's width to the exact width of all the slides combined */

    $('#menu ul li a').click(function(e){

            /* On a thumbnail click */

            $('li.menuItem').removeClass('act').addClass('inact');

            $(this).parent().addClass('act');

            

            var pos = $(this).parent().prevAll('.menuItem').length;

            

            $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

            /* Start the sliding animation */

            

            e.preventDefault();

            /* Prevent the default action of the link */

    });

    

    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');

    /* On page load, mark the first thumbnail as active */

    

});

//]]> 

</script> 

Agora procure por:

<div id='main-wrapper'>

E cole abaixo dele este seguinte códico:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<!-- TROQUE ABAIXO O ENDEREÇO PELO DE SUAS IMAGENS -->

<div id='contentWrapperPortfolio'><div id='gallery'><div id='slides'>

   

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 1' width='572'/></div>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 2' width='572'/></div>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 3' width='572'/></div>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 4' width='572'/></div>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 5' width='572'/></div>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 6' width='702'/></div>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 7' width='572'/></div>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 8' width='572'/></div>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 9' width='572'/></div>

  

     

</div><div id='menu'><ul id='gal'>

<!-- AQUI É A PARTE MENOR MAIS JA TA CONFIGURADO PRA FICAR PEQUENO ENTÃO TROQUE ABAIXO O ENDEREÇO PELAS MESMAS FOTOS MAIORES -->

          

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 1' width='70px'/></a></li>

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 2' width='70px'/></a></li>

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 3' width='70px'/></a></li>

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 4' width='70px'/></a></li>

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 5' width='70px'/></a></li>

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 6' width='70px'/></a></li>

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 7' width='70px'/></a></li>

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 8' width='70px'/></a></li>

<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 9' width='70px'/></a></li>

        <li class='fbar'/>

        </ul>

</div>

</div>

</div>

</b:if>

</b:if>