Yoo ~~
Bom, eu como sou muito besta, esqueci que tenho um Tumblr de pedidos, então eu tava olhando minhas gadgets e vi, quando abri, estava alguns pedidos, que eu espero que não seja de muito tempo ! Então eu vou postar, o que vocês me pediram lá !
Começando com o tutorial da Gadget autores, igual ao que temos aqui no blog, tem a imagem e quando você passa o mouse, aparece o nome do Autor vejam:
Vamos aprender ?
Enjoy ~~
Vá em Painel> Editar HTML e procure por:
]]></b:skin>
Depois que achar cole em cima:
figure {display: block;position: relative;float: left;overflow: hidden;margin: 0 10px 10px 0;-moz-transition: all 0.6s ease;}figcaption {position: absolute;margin-bottom: 10px;background: #000000;background-color: #000000;color: #FFFFFF;padding: 3px 3px;opacity: 0;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;}figure:hover figcaption {opacity: 0.9;}figure:before {content: "?";position: absolute;font-weight: 800;background: #ff55a9;background: #ff55a9;text-shadow: 0 0 5px white;color: #FFF;width: 24px;height: 24px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;text-align: center;font-size: 14px;line-height: 24px;-moz-transition: all 0.6s ease;opacity: 0.75; }figure:hover:before {opacity: 0;}.cap-left:before { bottom: 10px; left: 10px; }.cap-left figcaption { bottom: 0; left: -30%; }.cap-left:hover figcaption { left: 0; }
Entendendo
background: #000000; } Troque ambos pela cor do fundo da caixinha que aparece quando você passa o mouse.
background-color: #000000;
color: #FFFFFF; } Essa é a cor da letra da caxinha.
content: "?"; } ? é o que aparece dentro da bolinha. Troque por outro símbolo se quiser.
background: #ff55a9; } Cor do fundo da bolinha.
background: #ff55a9;
color: #FFF; } Cor do símbolo da bolinha.
Depois crie uma gadget HTML e cole:
<figure class="cap-left"><img src="LINK DAIMAGEM" alt="" /><figcaption>TEXTO</figcaption>
Pronto !
Créditos KW
Olá querido!
ResponderExcluirQue bom que postou esse tuto,
muito lindo o efeito que fica *o*
Beeeijos;
semprecomvoce2012.blogspot.com
Obrigado ^^
ExcluirBeijos >.<
Como faz para elas ficarem uma do lado da outra?
ResponderExcluirEsquece eu consegui agora =)
ExcluirUhuu,eu que pedi(uma das que pediu) :)
ResponderExcluirEu seei :)
Excluirnao conseguir botar uma em cima da outra como bota?
ResponderExcluirahh pg duas fotos da miley cyrus do gadget equipe do bc!
Depende do tamanho da imagem !
ExcluirQuanto menor ela for, ficara uma do lado da outra !
Gratidão!!! DIca show!
ResponderExcluir