agosto 17, 2011

Tutorial - Ampliar imagem na pagina do blog


Hi, meus amores esse tutorial de hoje é sobre o efeito de ampliar as imagens na mesma pagina do blog, clique na imagem acima e vai ver o efeito, é bem simples de fazer eu resumi o código pois tentei usar o original mas nao consegui e acho mais fácil para vocês entenderem o resumo, mas isso não altera em nada, todos os créditos do código Dicas para blogs, resumo do código por material-extra.
Layout > Adicionar um novo gadget > HTML JavaScipt > Adicione no lugar onde aparecera a imagem ampliada, no meu caso eu coloquei abaixo do cabeçalho, mas você pode colocar onde quiser, eu recomendo acima do cabeçalho,E cole o código abaixo:
<script language="JavaScript" type="text/javascript">var variaveis=location.search.split("?ampliar");var site = variaveis[1].split("=");document.write('<center><img style="border: solid 1px #000000;padding:2px;background-color: #FFFF00" src="'+site[1]+'"/></center>')</script>
O que voce deve alterar no código se quiser para deixar ideal com o layout do seu blog é a cor da Borda e o Fundo salve o gadget. Esse é o script para funcionar, abaixo segue o código que sera colocado nas postagens;
<a href="URL DO POST + ?ampliar= + URL DA IMAGEM"><img src="URL DA IMAGEM"></a>
exemplo pronto.
<a href="http://material-extra.blogspot.com/2011/08/qual-e-cor.html?ampliar=http://2.bp.blogspot.com/-pJWWtFzUY8Y/Tkm_UruO6II/AAAAAAAAENU/FTkCR2jt1is/s1600/5984145986_85871d0fb0_z_large.jpg"><img src="http://2.bp.blogspot.com/-pJWWtFzUY8Y/Tkm_UruO6II/AAAAAAAAENU/FTkCR2jt1is/s1600/5984145986_85871d0fb0_z_large.jpg"></a>
Em azul o link da postagem, em negrito o script do código e em verde o url da imagem, mas para que fique isso em todas as imagens você deve colocar isso em todas. Não é preciso ser o link do post, pode ser o link do blog, e qualquer imagem que quiser colocar, eu recomendo colocar o link do post nas imagens do post, isso é se a pessoa quiser ampliar a imagem nao saira da pagina, faça um teste,
http://material-extra.blogspot.com/2011/08/qual-e-cor.html?ampliar=
Depois do igual (=), coloque o URL da imagem que quiser, e veja como funciona.

21 comentários:

  1. Adorei o tutorial...

    Beijos,
    http://placestyle.blogspot.com/

    ResponderExcluir
  2. Nossa que tutorial util *-*
    depois vou tentar usar ele :)
    bjs, http://sweetgirl-blog.blogspot.com/

    ResponderExcluir
  3. Adorei o tutorial !

    Sorteio , http://blog-realgirls.blogspot.com/2011/08/sorteio.html

    ResponderExcluir
  4. muitoo lindoo to seguindo.. se puder segue de volta?
    swett-girls.blogspot.com

    ResponderExcluir
  5. seguindo......te espero no meu tbm
    swett-girls.blogspot.com

    ResponderExcluir
  6. to doidinhaa agr q te vi como seguidoraa aff apaga o comentarioo que envieii to lélé rsrs gosteii do post muitoo showw!!! ^^

    ResponderExcluir
  7. Nossa, obrigada pelo destaque *--*
    http://joy-teen.blogspot.com/

    ResponderExcluir
  8. G-Zuis, não acredito no seu comentário, que honra >.<
    Fico muuuito feliz que você tenha gostado do lay
    beijos
    blogloucamistura.blogspot.com

    ResponderExcluir
  9. Oi , Karoline , sou do http://palavras--escondidas.blogspot.com/ . e estou passando por uma reforma,. rs. bom , visitei seu blog,e achei o máximo , me ajudou bastante, bom , queria saber como faz para o título do blog ficar assim como o seu , o topo inteiro , me ajuda ?

    ResponderExcluir
  10. adorei o post, amo seu blog ♥
    Ah, eu mudei o meu, o nome e o lay, ve o que vc acha? :)
    Beeijos

    conspirantes.blogspot.com

    ResponderExcluir
  11. Você não faz encomendas? Tipo , só o cabeçalho?

    ResponderExcluir
  12. flor. sabe como deixar a sidebar fixa ? >< ja faz um mes que procuro como e nao acho. e teu blog tem tantos Tutus últeis. será que pode ensinar, se souber ?

    ResponderExcluir
  13. testando templates: flor meu cabeçalho é transparente, a imagem de fundo que pega o topo inteiro é um plano de fundo que eu coloquei apenas para repetir na horizontal.

    Gabriela: Flor eu fazia mas ando muito sem tempo então não tenho feito mais. Mas em breve farei novamente

    ResponderExcluir
  14. Yarahroliim: flor sei sim, vou fazer um tuto sobre isso.

    ResponderExcluir
  15. Muito legal, e simples mas ajuda muito.
    Adoooro o blog, parabéns.

    ResponderExcluir
  16. Ameiiii ♥
    Seguindo! Segue de volta??
    Aceita parceria??


    Sayonara


    J'

    ResponderExcluir
  17. Adoro o seu blog, sempre visito e aprendi muita coisa aqui quando ainda não era meio que ''profissional'' no assunto, la no inicio inicio do meu blog haha agora vai embora, mas nunca deixo de passar aqui e conferir e nunca tinha parado pra comentar.
    Vamos combinar que o blog aqui sempre ta um charminho *-*

    estou seguindo você e espero por uma visita no http://posdezesseis.blogspot.com/

    ResponderExcluir
  18. Jennyfer Pereira: Claro flor.
    Angélica: obrigada pelo charminho, rs obrigada por seu carinho flor, pode deixar que vou com maior prazer visitar o seu. *0*

    ResponderExcluir
  19. Como faz pra deixar a borda redondinha igual tá nos seus comentários e outra coisa como faço pra deixar o blockout das minhas citações iguais as suas,como tá ai em cima que tá o código dentro dessa caixinha azul eu já encontrei um tutorial mais eu qr só com uma borda tipo a sua que tá axul????
    Bjo!

    ResponderExcluir
  20. Srta Porfirio: Para deixar a borda redonda use esse site http://border-radius.com/ e copie o codigo e cole onde quer, agora para alterar oo blockquote vai neste blog que tem tutorial http://meninanerd.blogspot.com/

    ResponderExcluir