Efeito Queen

  Hi pessoal, ontem eu não pude postar, por dois motivos um deles é o senso de criatividade eu cheio de criatividade e de repente.. eu vicio novamente em Smallville, em 1 dia já assisti 17 Capitulos da série, vicio total mexe.. -q , e também tive que fazer alguns trabalhos mesmo faltando ontem e hoje na escola os professores insistem em me puxar para a lição.. então, né.. sem jeito, porém ontem anoite fiz um cronograma do eJhonas.com, não publicarei apenas fiz ele para me organizar um pouquinho. Hoje de manha comecei á visitar alguns Tumblr de Tutoriais por ai.. acabei achando um tutorial muito bom, super simples por isso nem gravarei tela para ensina-lo..

 

Prévia

Vá em Blogger  Design  Editar HTML  Expandir Modelo de Widgets  Procure por: (Ctrl + F)

]]></b:skin>

Cole este código acima:

.queen a, .queen a img {display: inline-block;}
.queen a {width: 64px; height: 64px; position: relative; padding: 5px; background: #e14e2c; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px 4px 4px 4px;}
.queen a span {position: absolute; width: 64px; height: 64px; top: 5px; left: 5px; text-align: center; line-height: 64px; color: rgba(255,78,44,0.8); text-shadow: 0px 1px 1px rgba(255,255,255,0.6); font-size: 15px; opacity: 0; filter: alpha(opacity=0); background: rgba(255,255,255,0.8); transition-duration: 2s; -webkit-transition-duration: 1s; -moz-transition-duration: 2s;}
.queen a:hover span{opacity: 1; filter: alpha(opacity=99);}

Você só poderá substituir as partes em negritos, onde está "#e14e2c;", você deverá colocar uma cor do fundo do efeito, já em "15px", você deverá colocar o tamanho da fonte que aparecerá na hora em que você colocar o cursor em cima da imagem (15 para cima, aumentar a fonte, 15 para baixo diminuir a fonte).
Agora salve e feche. Vá em Layout  Adicionar Gadgets  HTML/Javascripts  Cole este código:

<div class="queen">
<a href="/"><img src="Link da Imagem" />
<span>Descrição</span></a>
<a href="/"><img src="Link da Imagem" />
<span>Descrição</span></a>
<a href="/"><img src="Link da Imagem" />
<span>Descrição</span></a>
</div>

 Em "Link da Imagem" você deverá colocar o URL da imagem, a imagem deve ter o tamanho de 65x65, já em "Descrição" coloque o que você quer que apareça quando o cursor estiver em cima da imagem. Este tutorial encontrei no HTMLuv!