Como colocar efeito nas imagens do blog - Efeito css nas imagens

13 comentários
Imagens

Animação com CSS

Neste artigo, vamos explicar como colocar efeito nas imagens que você insere em seu blog.

Mas, antes de começarmos o artigo, veja o outro post similar a este com mais algumas animações:


Um artifício bastante usado para chamar a atenção do leitor para seus posts são os efeitos aplicados nas imagens. O blog por padrão usa o lightbox, que pode ser aplicado no próprio menu do Blogger em preferências de pesquisas, porém, o efeito de abrir a imagem em PopUp já é bem comum e a estratégia é chamar a atenção do leitor para o artigo ao passar o cursor do mouse.

Primeiro, veja o código dos dois efeitos e suas respectivas demostrações, e no final dos códigos e das demostrações, o tutorial de como aplicá-las.

Efeito LED css


Efeito rotatório elástico css



Agora, vamos ao tutorial de como aplicar o efeito em seu blog:

Primeiro, copie o respectivo código referente ao efeito que deseja aplicar. Logo em seguida, vá ao menu do Blogger, clique em modelo e depois clique em personalizar, como na imagem abaixo:


tutorial


Ao clicar em personalizar, você verá uma tela como esta abaixo. É o design de modelo:


configurando


Logo em seguida, clique na última opção em avançado e abrirá uma tela como esta:


configurando


Em seguida, clique em adicionar css. Caso use o modelo padrão do Blogger, haverá mais opções, mas selecione somente adicionar css. Logo após selecionar esta opção, caso tenha mais códigos dentro da caixa, cole o código copiado na demostração acima, abaixo da ultima linha na caixa de códigos.

Se a caixa estiver vazia, aplique do mesmo modo, e logo em seguida, clique em aplicar ao blog no botão vermelho acima. Feito isso, está salvo.

O segundo método é inserir direto no código fonte do blog. Ainda na opção Modelo do menu clique em editar HTML ao abrir o código fonte do seu blog dentro da caixa aperte o ctrl+f e na caixa de pesquisa procure pelo comando
]]></b:skin> ao localiza-la cole o código do efeito escolhido logo acima deste comando para inserir o efeito desejado.

Clique em salvar modelo, atualize a página do seu blog, e você verá o efeito do código nas imagens!

13 comentários :

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

    ResponderExcluir
  2. Coloquei no meu, e ficou show de bola, amei!

    ResponderExcluir
  3. amigo abraço qualquer duvida entre em contato comigo para mais dicas basta pedir abraço

    ResponderExcluir
  4. o meu não ta funcionando. buaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    ResponderExcluir
  5. gostaria que você colocase outros tipos para podermos escolher e selecionar.

    ResponderExcluir
  6. CAra, põe mais alguns modelos. Pra ser sincero, o primeiro cega o leitor e o que giratório atrapalha MUITO a leitura.
    Põe um por exemplo que deixe-as preto e branco por exemplo.

    ResponderExcluir
  7. amigo logo logo vou postar alguns modelos diferentes para que vc possa aplicar em seu blog abraço

    ResponderExcluir
  8. novos modelos colocados espero que gostem

    ResponderExcluir
  9. Deu certo! Cara eu te amo!!!!!!!!! XD

    Muito obrigada mesmo!!!!!

    ResponderExcluir
    Respostas
    1. Olá, ficamos felizes em saber que foi útil para você este artigo abraços equipe BG.....

      Excluir
  10. Olá Andrew... colei o código no campo "adicionar CSS" mas o botão "aplicar ao blog" não funciona. O que será que ocorre? Eu uso um template básico, que personalizei... será que é por isso que esse botão não funciona? Abração

    ResponderExcluir
    Respostas
    1. Olá.

      A etapa de aplicar css não deve estar funcionando pois seu template está personalizado e com código quebrado. faça o seguinte coloque direto no código fonte do template em modelo editar html.

      Excluir
    2. Olá seu template deve ser personalizado ou deve estar com o código quebrado. faça o seguinte vá até o painel do seu blog no menu vá até modelo editar html e procure pela linha .post-body img ou .post img ou algo parecido e substitua todo o comando pelo comando ao qual você quer que os respectivos efeitos nas imagens. Abraços Andrew Silva do BG.

      Excluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.