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>

Gente é só isso, e já sabem né?! Se aprendeu aqui creditem.

Beijão