► dicas valiosas -DV -: Aprenda com é feito:..."Galeria de imagens no Blogger"

Este é um resumo de
um blog que adotei
para divulgar ,
pois

estou participando do
"Adote um Blog Amigo".

Não citei o nome do blog para
gerar curiosidade de quem tem interesse em acessar.

Espero que ao acessar você goste!
Pois é de uma pessoa muito querida!
Se você foi indicado deverá "adotar um blog amigo" e falar sobre ele.

Não esquecendo de colocar junto com a postagem o passo a passo ou indicar o link de como participar do Adote um Blog Amigo!
Adote e divulgue um blog amigo!
"Faça amigos não faça guerra"

Bom, vamos ao blog amigo indicado:

blog amigo indicado:

Pesquisando dentro da comunidade diHITT,
encontrei um blog, que tem muitos artigos de grande utilidade!

Dentre eles, o artigo postado:

Então, você que curte

e quer

aprender mais sobre o assunto;

acesse
este "blog amigo"

clique na frase a seguir:

▼

Saiba + : "Como economizar água e energia na hora de lavar roupa"

► |Veja conteúdo Completo|

veja ►►► "Como participar do Adote um Blog Amigo?Acesse Aqui"!
e/ou

"veja como"

aqui ▼

Como participar!

1º . Escolha um blog amigo

2º . Escreva sobre o tema abordado ou sobre ou dono(a) do blog

Obs: dar um título bem bacana para que o blog indicado realmente seja visitado

3º . Adicione o link do blog no resumo que você fará.

4º . Copie o texto de como participar ou esta frase "Como participar do Adote um Blog Amigo?Acesse Aqui"

e cole no final do resumo do blog indicado. Se

não souber, basta indicar o link ,deste texto, dentro do seu resumo.

5º Depois de escrito e postado no seu blog ou no próprio diHITT

6º Envie a indicação do blog amigo para o diHITT

7º . Depois indique para todos os teus amigos dentro da comunidade diHITT .

8º . Fale para seu amigo(a) indicado que você está participando do "Adote um Blog Amigo".

9º . Incentive seu amigo (a) também a participar da "brincadeira" que só trará benefícios a quem indicar e a quem for indicado.

10º . Se você foi indicado e não quiser participar; passe a vez pra outro amigo.

"Pois,

ninguém é obrigado a participar ,

se não acha cabível ,
dentro do seu conceito humanitário.

Nós iremos respeitar a decisão de quem não quiser participar!"

Regras:

Não pode indicar o próprio blog

O que pode ocorrer é:

... o blog ser "acidentalmente" indicado várias vezes e isso foge do nosso domínio.

Mais uma vez, com um magnífica idéia, de nossa amiga

Valquiria, do blog gata interativa

O bom disso,
é que ,
a gente pode receber muitas visitas,
conseguir mais seguidores para os nossos blogs,
e subir no rank do google!!!!!!!!!!!!!!!!!!!!!
Isso nos dará resultado permanente,
porque
receberemos visitas, praticamente,
para sempre,
pois sempre estará nas buscas via google!
Essa ajuda mútua é mui relevante!

~~"Dica de como mudar e dar mais vida ao seu blog"~~
Nosso blog foi indicado por gatainterativa

palavras-chaves: adote, adote um blog amigo, amigo, blog, buscas, dicas, diHITT, google, idéia, visitas,

Galeria de imagens no Blogger

" Faça uma galeria de imagens

para colocar em

seu

blog."

DEMO

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

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

]]></b:skin>

"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;}

..."abaixo de...

]]></b:skin>

Cole o seguinte código:

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

..." 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>


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



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

fonte e créditos:

Templates & Acessórios

Páginas

Pesquisar

... Bom, vamos ao blog amigo indicado: "Adote um Blog Amigo"

... Bom, vamos ao blog amigo indicado: "Adote um Blog Amigo"

Saiba + : "Como economizar água e energia na hora de lavar roupa"

"Dica de como mudar e dar mais vida ao seu blog"

Nosso blog foi indicado por gatainterativa

Aprenda com é feito:..."Galeria de imagens no Blogger"

Nenhum comentário:

Postar um comentário

Seguidores

Arquivo

Postagens populares

Translate

agregadores

Marcadores