Dois Tutoriais 'Cool'

Uma das coisas que mais gosto em blogs são os tutoriais, e eu resolvi fazer dois aqui para o blog, vem ver:

1°- Imagem que muda ao passar o mouse:
Fica assim:

Esse é o código:

<a href="LINK">
<img src="
URL DA PRIMEIRA IMAGEM" onmouseout="this.src=&#39;URL DA PRIMEIRA IMAGEM&#39;;" onmouseover="this.src=&#39; URL DA SEGUNDA IMAGEM&#39;;" />
</a>

O link você escolhe, se não quiser é só apagar essa parte <a href="LINK"> e pronto!

2°- Imagem que não transpassa a área da postagem:

Sinceramente eu acho esse muito útil, porque meu layout era outro e a área do post era maior, ou seja minhas imagens também eram maiores, e quando mudei o layout as imagens antigas ficavam pulando para fora da área, e isso me dava nos nervos, e para não ficar editando os posts antigos um por um, está aqui o tutorial para deixar um limite no tamanho da imagem:

1. Vá em Design, depois em Editar HTML, dê Ctrl+F e procure por:

]]></b:skin>

2. Antes dele, cole:

.post img, table.tr-caption-container {
padding:4px;
max-width:
575px; }



Onde está grifado de amarelo é o tamanho que você quer que a imagem chegue, aqui no meu blog é 575px, agora vocês ajustem no tamanho que é do blog de vocês.
Espero que tenha ajudado alguém!

Postagem Relacionadas

25 Comentários

  1. Adorei o primeiro tuto rs ainda vou usar ele ♥
    Eu adoro também blogs de tutorias, ajudam tanto :D
    bjinhos
    Conversando com a lua

    ResponderExcluir
  2. Tutoriais bem legais !!
    Obrigado por comentar :D
    paraisodemenina.blogspot.com

    ResponderExcluir
  3. amei as tutoriais,vou usar a 2, aa minhas imagens as vezes ultrapassam rs
    beijos
    http://lolamantovani.blogspot.com.br/

    ResponderExcluir
  4. Adorei a 2ª dica! Porém, como sou muito delisgada nesses assuntos, vou pedir pro meu marido testar pra mim, hehehe!


    Beijão e bom final de semana!

    izabellaniquito.blogspot.com

    ResponderExcluir
  5. Adorei os tutos e concerteza ajudou muito.
    Vou usar os dois.
    Beijos

    ResponderExcluir
  6. Ah, tem como vc fazer um vídeo ou foto explicando o passo a passo da 2ª dica? Seria muito útil! :D

    ResponderExcluir
  7. Adorei os tutos, super úteis! *-*

    http://notthatwonderland.blogspot.com/

    ResponderExcluir
  8. Oie amor amei os tutoriais,to seguindo retribui?
    http://isabela-lopes-oficial.blogspot.com.br/

    ResponderExcluir
  9. Adorei a dica, aguardo a sua visita em meu blog, http://larissacanziani.blogspot.com.br/ beijos.

    ResponderExcluir
  10. Adorei os tutoriais! E realmente é bem útil o segundo! Deixa o blog mais organizadinho, sem aquelas imagens saindo da área de postagem :3
    Xiricutico.blogspot.com

    ResponderExcluir
  11. Ah, bem legal esse recurso! Há tempos que eu queria saber como é.
    Visitando aqui pela primeira vez, bem maneiro!
    Abraços,
    C'est captivant blog

    ResponderExcluir
  12. Nossa muito legal né, tava querendo esse tuto pra um novo temp do blog.

    http://portrasdorimel.blogspot.com.br/

    ResponderExcluir
  13. Oi, tudo bom?
    Adoreii o post,
    Muito legaal :)
    Me ajudaram mt .
    Território das garotas
    @territoriodg
    Bjss *-*
    Passa lá no blog?
    http://territoriodascompradorasdelivro.blogspot.com/

    ResponderExcluir
  14. esse tuto é top :)
    s2hay.blogspot.com

    ResponderExcluir
  15. Adoreei! As minhas imagens sempre ultrapassam também.. fico chateada! mas vou tentar aprender!! :)
    beeijo
    http://rendasebatons.blogspot.com.br/2012/08/orgasm-x-pinched.html

    ResponderExcluir
  16. Adorei os tutoriais,principalmente das imagens!
    wolftheideia.blogspot.com.br

    ResponderExcluir
  17. Adorei o post , eu gostei da imagem que passa mas é a 1ª vez que vejo.

    http://rosarosalina.blogspot.com

    ResponderExcluir
  18. Eu ja fiz esse ha mil anos atras da imagem que muda quando passa o mouse, é bem bacana!

    Confira se voce foi a ganhadora/ganhador da promoção!
    @littlepistols
    http://portifoliodasletras.blogspot.com.br/

    ResponderExcluir
  19. Gostei muitoo desses dois tutoriais, o da imagem que muda é incrível, e o melhor que é bem facinho heheh… também me da nos nervos quando a imagem fica "pulando" rs
    Con amore, Donna Yellow ♥

    maybe yellow store

    ResponderExcluir
  20. adorei o tuto. e ta lindo o novo cabeçalho.
    bjs
    http://avidademalu.blogspot.com

    ResponderExcluir
  21. ain eu amei esse primeiro tutorial, nunca tinha visto esse código que muda a imagem quando passa o mouse, eu adorei *o*
    ate favoritei o post aqui pq pretendo usa-la :D
    que bom que gostou do meu blog, pq eu adorei aqui ♥
    curti a sua pagina viu? bjbj

    http://rascunhosdasuuka.com/

    ResponderExcluir
  22. Mais cool impossível,
    amei o primeiro tutorial e já salvei aqui o post nos meus favoritos pra usa-lo futuramente!! Morri de rir com a cara das meninas de PLL <3 no gif animado..

    www.estiloatrevidos.com

    ResponderExcluir
  23. Adorei as dicas, muito obrigada! *-*

    http://bloggdeumasonhadora.blogspot.com.br/

    ResponderExcluir

Obrigada!!