Efeito nos Parceiros com HTML
O Tutorial de hoje vai ensinar e ajudar vocês a colocar efeito nos afiliados, com Borda, sombra e Destaque quando passa o mouse. Tudo com HTML, estou avisando logo...
1. Faça a imagem do Blog Afiliado (pode ser no Photo Scape, Photo Shop...) e copie a imagem, ou seja, faça outra imagem do mesmo tamanho, porque pode ser usado para outros Blogs...
Veja um exemplo :
2. A sua imagem precisa estar na internet. Você pode hospedá-lo no seu próprio blog, basta clicar na ferramenta de enviar imagens ou upload de arquivos e selecionar a sua imagem ou se preferir hospede suas imagens no ImageShack ou Photobucket. Você vai prescisar da URL das imagens.
3. Vá em "Design" → "Elementos da página" → "HTML/JavaScript" e adicione a imagem em HTML.
Para deixar as imagens alinhadas use " " para dar espaço e " <br /> " para pular a linha .
4. Depois adicione o Link do Blog na imagem, fazendo isso:
5. Depois, para colocar a Borda noas imagens dos afiliados, veja o seguinte Tutorial ensinando como faz :http://maariihsouza.blogspot.com/2011/03/como-colocar-borda-nas-imagens.html
6. Depois para dar efeito "destaque" quando passa o mouse, adicione o seguinte código
depois de " <img " :
O Código da imagem com o link e os efeitos deverá ficar assim :
Lembrando que class="borderimage" é o código referente á Borda que está no Tutorial !!
7. E Por último adicione title="NOME_DO_BLOG_AQUI", Depois de target="_blank". Esse código é da Mensagem que aparece quando passa o Mouse, ou seja, o Nome do Blog que aparece quando passa o Mouse.
O Código da imagem com o link e os efeitos deverá ficar assim :
Para colocar outra imagem de outro Blog afiliado com o Link, vai fazendo a mesma coisa da Primeira imagem.
Para deixar as imagens alinhadas use " " para dar espaço e " <br /> " para pular a linha .
<img src="URL_DA_IMAGEM" />
Para deixar as imagens alinhadas use " " para dar espaço e " <br /> " para pular a linha .
4. Depois adicione o Link do Blog na imagem, fazendo isso:
<a href="LINK_DO_BLOG" target="_blank"><img src="URL_DA_IMAGEM" /></a>
5. Depois, para colocar a Borda noas imagens dos afiliados, veja o seguinte Tutorial ensinando como faz :http://maariihsouza.blogspot.com/2011/03/como-colocar-borda-nas-imagens.html
6. Depois para dar efeito "destaque" quando passa o mouse, adicione o seguinte código
depois de " <img " :
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"
O Código da imagem com o link e os efeitos deverá ficar assim :
<a href="LINK_DO_BLOG" target="_blank"><imgonmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"src="URL_DA_IMAGEM" class="borderimage"/></a>
Lembrando que class="borderimage" é o código referente á Borda que está no Tutorial !!
7. E Por último adicione title="NOME_DO_BLOG_AQUI", Depois de target="_blank". Esse código é da Mensagem que aparece quando passa o Mouse, ou seja, o Nome do Blog que aparece quando passa o Mouse.
O Código da imagem com o link e os efeitos deverá ficar assim :
<a href="LINK_DO_BLOG" target="_blank" title="NOME_DO_BLOG_AQUI"><imgonmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"src="URL_DA_IMAGEM" class="borderimage"/></a>
Para colocar outra imagem de outro Blog afiliado com o Link, vai fazendo a mesma coisa da Primeira imagem.
Para deixar as imagens alinhadas use " " para dar espaço e " <br /> " para pular a linha .
 |
Assine o feed deste blog ou receba todos os artigos
por email. |
Postar um comentário