Como colocar efeito nas imagens do blog - Efeito css nas imagens
animação
,
blog
,
css
,
efeito
12 comentários
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:
Ao clicar em personalizar, você verá uma tela como esta abaixo. É o design de modelo:
Logo em seguida, clique na última opção em avançado e abrirá uma tela como esta:
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!
12 comentários :
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.
Assinar:
Postar comentários
(
Atom
)
Este comentário foi removido por um administrador do blog.
ResponderExcluirColoquei no meu, e ficou show de bola, amei!
ResponderExcluiramigo abraço qualquer duvida entre em contato comigo para mais dicas basta pedir abraço
ResponderExcluiro meu não ta funcionando. buaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
ResponderExcluirgostaria que você colocase outros tipos para podermos escolher e selecionar.
ResponderExcluirCAra, põe mais alguns modelos. Pra ser sincero, o primeiro cega o leitor e o que giratório atrapalha MUITO a leitura.
ResponderExcluirPõe um por exemplo que deixe-as preto e branco por exemplo.
amigo logo logo vou postar alguns modelos diferentes para que vc possa aplicar em seu blog abraço
ResponderExcluirnovos modelos colocados espero que gostem
ResponderExcluirOlá, ficamos felizes em saber que foi útil para você este artigo abraços equipe BG.....
ResponderExcluirOlá 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
ResponderExcluirOlá.
ExcluirA 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.
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