Olá, olá crianças!
Bem, eu não postei estes dias lindos, porque estava sem tempo. Quer dizer uns dois dias sem postar não é muita coisa, tem blogs que ficam semanas sem postar haha. Enfim, enfim as aulas começaram e eu ando muito ocupada, estou cheia de trabalhos pra fazer, já fiz umas 3, apresentações só com o mesmo professor. Poxa vida hein? Mas ok, vou falar agora um pouco sobre o efeitinho.
Então, esse efeito é para ser usado nas imagens do blog, eu particularmente acho que fica muito 'top' na elite de afiliados. Ele é uma foto normal com bastante opacidade, quando você passa o mouse ele fica redondinha///uma bolinha e sai toda a opacidade. Ele fica assim por 17 segundos, mas você pode aumentar ou diminuir o tempo, enfim, e depois dos (17) segundos ele volta a ser opaco e quadrado novamente, se você não entendeu veja AQUI A PREVIEW prossiga se gostar <3 lindjos
1. Vá em Modelo > Editar HTML > dê um F3 e procure por ]]></b:skin>, acima disso cole:
/*EFEITO REDONDO POR SWEET FLOWER // sweeet-flower.blogspot.com*/
.redondo {-webkit-filter: opacity(0.6);-moz-filter: opacity(0.6);-ms-filter: opacity(0.6);-o-filter: opacity(0.6);filter: opacity(0.6);-khtml-filter: opacity(0.6); border-radius: 0px; -webkit-border-radius: 0;-moz-border-radius: 0px; -ms-border-radius: 0px;-khtml-border-radius:0;-o-border-radius: 0px; -webkit-transition-duration: 17s;-moz-transition-duration: 17s;-ms-transition-duration: 17s;-o-transition-duration: 17s;-khtml-transition-duration: 17s;transition-duration: 17s;}.redondo:hover {-webkit-transition-duration: 5s;-moz-transition-duration: 5s;-ms-transition-duration: 5s;-o-transition-duration: 5s;-khtml-transition-duration: 5s;transition-duration: 5s;-webkit-filter: opacity(1.0);filter: opacity(1.0);-moz-filter: opacity(1.0);-ms-filter: opacity(1.0);-o-filter: opacity(1.0);-khtml-filter: opacity(1.0);} .redondo:hover {-webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; -khtml-transition-duration: 1s; border-radius: 100px; -moz-border-radius: 100px;-ms-border-radius: 100px;-o-border-radius: 100px;-khtml-border-radius: 100px;-webkit-border-radius: 100px;-webkit-filter: opacity:(0%);filter: opacity:(0%);-moz-filter: opacity:(0%);-ms-filter: opacity:(0%);-o-filter: opacity:(0%);-khtml-filter: opacity:(0%);}
E depois, vá em Layout > Adicionar um Gadget > HTML Java/Script e cole o seguinte:
<center>
<a href="LINK" title="NOME AO PASSAR O MOUSE" target="_blank"><img class="placa" src="URL DA IMAGEM"/></a> <a href="LINK" title="NOME AO PASSAR O MOUSE" target="_blank"><img class="placa" src="URL DA IMAGEM"/></a> <a href="LINK" title="NOME AO PASSAR O MOUSE" target="_blank"><img class="placa" src="URL DA IMAGEM"/></a> <a href="LINK" title="NOME AO PASSAR O MOUSE" target="_blank"><img class="placa" src="URL DA IMAGEM"/></a>
Agora, vou dar umas básicas explicações pra quem quer modificar o efeito(mas deixem os créditos no começo por favor): Aonde você ver transition-duration: 17s(incluindo, moz, ms, o & webkit) é só alterar o 17 pelo tanto de segundos que você quer, ex: 19,20,21,25,30,40 enfim é isso. O resto não precisa mexer, à menos que você saiba o que esta fazendo. Enfim, é só, e como sempre se reblogar credite o blog ;D rsrs.
Que legal esse efeito ahsuhaushuahsuahu *^*
ResponderExcluir-Cupcake de Amora
Obrigada susa
ExcluirSimplesmente adorei o efeito! Vou suá-lo no meu próximo template.
ResponderExcluirUm grande beijo.
Nerd Com Chiclete
Nerd Absoluta
Obrigada! Que legal, vai ficar muito bonito ><
Excluirque tutorial perfeito, ameiii ♥
ResponderExcluiraliás, seu blog é lindo. Acabei de criar um blog, adoraria sua visita por lá. Amei o design e o jeito que você escreve, tentarei sempre estar por aqui, porque eu realmente amei seu blog. E estou seguindo com muito prazer (se puder retribuir ficarei bem feliz). bjos :*
xoxo,
isabellanani.blogspot.com
Obrigada, que bom que gostou!
ExcluirAwwns sua fofa valeu, muito obrigada mesmo!
Obrigada por seguir, retribuo sim <3
Muito lindinho esse efeito,adorei! :3
ResponderExcluirbeijos,ótima sexta feira!
quemprecisadetvparaverbeyonce.blogspot.com.br
Legal :) obrigada.
ExcluirPra você também