Tutorial : Efeito Comida para afiliados

Sistar ♥

Annyeonghaseyooo ! ʕᵔᴥᵔʔ

Meu Deus do céu estou viciada na coreografia com diversão (Choreography with fun) do K.A.R.D, eles parecem estar muito felizes no vídeo. Acabei de me apaixonar mais por esse grupo (clique aqui para ver o meu MV Review do mv Oh Nana), preciso atualizar minha playlist de músicas favoritas. E ultimamente estou gostando de Seventeen, as músicas deles são legais (Mansae, mansae, mansae yeah, Aju Nice ♪ ♫). O baixinho do grupo (Woozi) é o que me chama mais atenção porque ele é baixinho (olha os preconceitos sra. Park Ri Rin).

Hoje vim mostrar pra vocês um efeito que eu acho muito legal e que com certeza irei usar nos meus próximos layouts.

Preview ʕっ•ᴥ•ʔっ

Como usar o efeito

Vá até Modelo > Editar HTML e vai clicar em CTRL + F

e vai pesquisar ]]></b:skin>. Depois vai colar o código 

acima de ]]></b:skin>.

Clique em Leia Mais

Código :

#comida a img{width:auto;height:auto;display:inline;margin-right:2px;margin-left:1px;margin-top:1px;margin-bottom:1px;padding: 3px;background: #fff;border: 1px solid #fff;outline: solid 1px #fff;outline-offset: -5px;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}#comida a:hover img{outline: solid 3px transparent;opacity: 0.5;outline-offset: -20px;}

O que está em roxo é para alterar a cor. Paleta de cores (xxx)

Agora vá em Layout > Adicionar um Gadget e clique em HTML/Java Script e

cole o código abaixo.

<div id="comida"><center><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado"> <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado"> <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado"> <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a><a href="Link do blog" title="Nome do afiliado">  <img src="URL da imagem" /></a></center></div>

O que está em roxo é para colocar o link do blog que é o afiliado, o vermelho é para colocar o nome do blog do afiliado e o azul é para colocar o URL da imagem.

Annyeong !