18 de fevereiro de 2012

Menu afiliados de imagens com efeito hover


Oiie gente, de boas neh ! Meu blog tá enfrentando um problema de postagem, já duas vezes que eu mudo o layout, mas vai ficar esse mesmo, se eu for mudar, mudarei somente o cabeçalho, colocando outra personagem. Mas iae o que acharam, resolvi renovar, eu só usava lilás, então resolvi escolher uma cor que nunca usei, e com o tema da She-ha, do desenho animado He-mam, show neh, eu gosti, minha mãe disse que ficou parecendo coisa de criança ;S mas eu gostei, e também tô cansada não vou mudar kkkkk' Então agora explicarei como fazer um menu afiliados com efeito hover, quando passa o mouse em cima, tipo igual o meu. Vamos lá então :
Obs: É sempre bom você salvar o modelo do blog, antes de aplicar qualquer tutorial, as vezes pode dar errado, então é melhor precaver.
1° Passo: Faça sua imagem
Normalmente eu faço desde tamanho, mas vai da escolha de cada um na hora de montar. Mas todas as fotinhas tem que ser do mesmo tamanho, okay ! Questão de organização. Pode montar no Photoscape mesmo ou no local que preferir, veja alguns exemplos exclusivos, se quizerem podem pegar, e não precisa colocar créditos





 Lindos neh 

2° Passo: Hospede sua imagem
Carregue sua fotinha em algun site de hospedagem, para utilizar o link direto. Ex: Imageshack ou Tinypic.
3° Passo: Montagem
Copie o seguinte código abaixo




Vá em design e adicione um gadget de texto ou gadget html.
Clique em editar html ( do gadget ) e cole o código 4 vezes, deixando um espaço entre eles, caso precise de mais uma linha de afiliados volte para a opção editar html , de enter e cole o código mais 4 vezes, e assim por diante, e se preferir.

Aonde tá escrito ENDEREÇO DO BLOG: Apague essa frase e coloca o url do blog afiliado.
Aonde tá NOME DO BLOG: Apague e coloque o nome do blog afiliado.
Aonde tá URL DA IMAGEM: Apague e coloque a url da imagem do blog afiliado. Vá na página do site de hospedagem, e carregue a imagem. Quando terminar de carregar, vá aonde está escrito link direto e copie a url que está lá e cole no lugar da URL DA IMAGEM.

 Então é só ir salvando e vê como que fica. Vai ficar assim :
Obs: o efeito hover só funciona no navegador Google Chrome.

 

Beijo, seus lindos . Espero que seja util em um momento de precisão.

6 comentários:

  1. Eu ia te perguntar como fazia, até para colocar outras imagens na sidebar (não só a elite).

    Tem post novo: Pensamento sem fim - Comenta?

    ResponderExcluir
  2. ótimo tutoriaal, talves eu use no proximo lay do meu blog (: (sim eu voltei de viagem hoje hehe)

    ResponderExcluir
  3. ótimo tutorial, super útil ;~]

    http://realidade-imperfeita.blogspot.com ;**

    ResponderExcluir
  4. Adorei o tuto, fica lindo na elite *-*
    flor, estou seguindo aqui, muito lindo e organizado o blog (:
    bjs :*

    http://generationteenbr.blogspot.com/

    ResponderExcluir
  5. Ameii seu blog! Adoreii as imagens *---* é muiito dificil achar uma elite afiliados booniiitos mas acheeii !!
    lincydream.blogspot.com

    ResponderExcluir