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..
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;}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).
.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);}
Agora salve e feche. Vá em Layout Adicionar Gadgets HTML/Javascripts Cole este código:
<div class="queen">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!
<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>
Muito lindo o efeito talvez eu use no novo layout do meu blog ♥
ResponderExcluir#May-Sun
Nosso Diário Nada Convencional
Lindo o efeito,mas não acho que usaria no meu blog hehe'
ResponderExcluirAdorei esse lay *-* Evanescence *-----------*
Bjão
capuccinocomcupcake.blogspot.com
ai que legal esse efeito, adorei *u*
ResponderExcluirhttp://conectadas2.blogspot.com.br/
Visita o blog da minha amiga?
http://andandonasnuves2.blogspot.com.br/
Amo esse efeito !!! Que lindo seu template menino u_u
ResponderExcluirjá estou seguindo aqui.
www.diariodostreze.blogspot.com
retribui ?
~le eu sem conhecer essa série que parece legal~ Uau, esse efeito é 10+ , ainda ficou melhor com esse exemplo de avatar de glee♥ uhuahusa
ResponderExcluirAté~
cotidianodeumabarbie.blogspot.com -> New post ;)
Velho teu blog é lindo eu amo a amy lee a voz dela é simplesmente perfeita.
ResponderExcluirAmei esse efeito queen.
http://sorvete-de-limao.blogspot.com.br/
Nossa amei esse efeito *-*
ResponderExcluirmuito bonito ele.
jovenclube(.blogspot.com.br)
Que efeito lindo, não conhecia! Já salvei o link para usar no novo layout, amei esse efeito queen *--*
ResponderExcluirEfeitosdaadolescencia.blogspot.com
Digno do nome esse efeito, ele é líndissimo!
ResponderExcluir2 bjos ;*
1maginer | blogspot.com