27 de dez. de 2010

Galeria de imagens no Blogger

Faça uma galeria de imagens para colocar em seu blog.



Vá até o HTML de seu blog e procure por :


]]></b:skin>

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI
Acima dele cole o código abaixo.


/* Gallery styles-------------------------------------- */

#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:#FEDEEF;/*cor de fundo do slide menor*/
width:540px;
margin: 2px 3px 1px 8px;
border: 2px dotted #F672B6;
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:#FEDEEF;
}
#gal li.act a{
cursor:default;
}
.fbar{
width:2px;
background:transparent;
}
#gal li a{
display:block;
background:#F672B6;/*cor cima menu pequeno*/
height:35px;
padding-top:10px;
}
.a img{border:none;}



Agora abaixo de:

]]></b:skin>

Cole o seguinte código:


<!-- slide-->

<!--[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 cole abaixo de :

<div id='main-wrapper'>

Este próximo código, fazendo a modificação pelas suas imagens. (REPITA A IMAGEM CONFORME MOSTRA O CÓDIGO)


<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 FOTOS -->

<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'>

<!-- TROQUE ABAIXO O ENDEREÇO PELO DE SUAS FOTOS MENORES -->
         
<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>

12 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. como eu faço para colocar link nas imagens maiores da galeria tipo si eu clicar na imagen grande ela redireciona para uma pagina predeterminada? momo eu faço por favor responde ;}

    ResponderExcluir
  3. Como eu faço para mudar o fundo, tirar o rosa?

    ResponderExcluir
  4. Suas informações são muito importantes para meu blogger, andei procurando muito esse tipo de galeria para imagens, porém não consegui fazer "linkar"... porém agradeço muito pois sua postagem foi de grande ajuda!!!

    ResponderExcluir
  5. não encontro no html esta parte

    div id='main-wrapper'

    o resto deu tudo certinho

    ResponderExcluir
  6. O meu template não tem a div id='main-wrapper'

    ResponderExcluir
  7. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  8. <nem eu condegui, não achei o div id=' no meu templaste

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube