Ohayou! (de novo)
Este foi um efeito que tirei do blog Garotas no mundo html, mas tem as suas diferenças: a cor dos ícones e o tamanho. Isso seria irrelevante, se no final do post não ensinasse a fazer uma certa adaptação para o tutorial ficar mais original (e trabalhoso, mas compensa). Foi por isso que postei, para atender o pedido de uma leitora e ensinar a usá-lo como usei no layout de halloween. Para quem quiser cores diferentes, terá de substituir a url das imagens no código que é adicionado no htm do blog, mas basta alterar isso.
Prévia: www
 |
| A disposição original é alinhada na horizontal, mas você pode mudar. |
Tutorial:
Procure por
<head>
Abaixo acrescente:
<link href='http://static.tumblr.com/5dbytsa/lpvme5z4x/shake.css' rel='stylesheet' type='text/css'/><link href='http://static.tumblr.com/5dbytsa/neLmihp2g/bu.css' media='screen' rel='stylesheet'/>
De seguida, procure por:
/b:skin
Acima acrescente:
.social {background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgI-6Tl7rNgXBAIcS0LT-oY-hCT3Cd_dZVlSni-n-LsGT-gdks3xh0foel8VgZkTF8v4IvitHrvsvvX5NNUfhLHjKBV2gozF-tsdyPPv7VvqBDbr-B7BwN6ZdIaP_Cuz_2YI1Q2XlPptL/s1600/iconsocial1.png') no-repeat top center;width: 20px;height: 20px;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}.social:hover {background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuaIiAn6CrUZ0wa3O1wbRCtgztJ01oMZH9eD3UprjV3tx7Ueam4655XDUUDwNAlyyQcb5OCkcVbvOHe2yHlTLTAjysJOMyPBBC1EqrX8bvcciCGctpe0iXR2Jg3Nh1p7WURjI596EGBXhj/s1600/iconsocial2.png') no-repeat bottom center;width: 20px;height: 20px;-webkit-animation: shake 1500ms alternate infinite linear;-moz-animation: shake 1500ms alternate infinite linear;}.social2 {background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9YagD-OMZ0STl7hbEdU0b2s2ynAhWQa0xaxG-_gfdy6Zvi7D5tV3cT1Qb7QNK8_lNI2WHUwfQH3uKfmtu77VnfBSFyvZcxbKrpQMhCO6BahPzoKrWEHH1f190Z8u4e2VVXJzs6xg4VyK/s1600/iconsocial3.png') no-repeat top center;width: 20px;height: 20px;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}.social2:hover {background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgI-6Tl7rNgXBAIcS0LT-oY-hCT3Cd_dZVlSni-n-LsGT-gdks3xh0foel8VgZkTF8v4IvitHrvsvvX5NNUfhLHjKBV2gozF-tsdyPPv7VvqBDbr-B7BwN6ZdIaP_Cuz_2YI1Q2XlPptL/s1600/iconsocial1.png') no-repeat bottom center;width: 20px;height: 20px;-webkit-transform: rotate(360deg);}.social3 {background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuaIiAn6CrUZ0wa3O1wbRCtgztJ01oMZH9eD3UprjV3tx7Ueam4655XDUUDwNAlyyQcb5OCkcVbvOHe2yHlTLTAjysJOMyPBBC1EqrX8bvcciCGctpe0iXR2Jg3Nh1p7WURjI596EGBXhj/s1600/iconsocial2.png') no-repeat top center;width: 20px;height: 20px;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}.social3:hover {background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9YagD-OMZ0STl7hbEdU0b2s2ynAhWQa0xaxG-_gfdy6Zvi7D5tV3cT1Qb7QNK8_lNI2WHUwfQH3uKfmtu77VnfBSFyvZcxbKrpQMhCO6BahPzoKrWEHH1f190Z8u4e2VVXJzs6xg4VyK/s1600/iconsocial3.png') no-repeat bottom center;width: 20px;height: 20px;-webkit-animation: parc 1.5s;-moz-animation: parc 1.5s;-ms-animation: parc 1.5s;-o-animation: parc 1.5s;}
Adicione num gadget HTML/Javascript:
<center><a href="LINK"target="blank" title="NOME"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" class="social" /></a><a href="LINK"target="blank" title="NOME"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" class="social2" /></a><a href="LINK"target="blank" title="NOME"><img src="http://static.tumblr.com/qqvkww7/jdQlz92b3/transparent.png" class="social3" /></a></center>
Repita a sequência as vezes que precisar, e não se esqueça de substituir os links e os nomes.
NOTA:
Quem viu o efeito a ser usado no meu blog, notou de certeza que eu desalinhei os botões propositadamente, e os coloquei numa nuvem (que era uma imagem da mesma cor da barra lateral). Para fazer isso, basta posicionar cada imagem isoladamente. Para quem não sabe fazer isso, no link seguinte tenho um código para usarem como base, dentro do html/javascript, substituindo o que eu ensinei neste post. Mudem os valores conforme for preciso no vosso blog: www
Sem comentários:
Enviar um comentário