Ollá peoples!!! Bem antes de tudo eu queria que estou precisando de ajuda aqui no blog, pois minha internet e a energia ainda estão um pouco ruim, então fica difícil postar nessas condições e também minhas aulas vão começar segunda-feira e talvez não dê pra postar, então quem quiser me ajudar é só mandar o seu Email para e também tem que ser postadora de tutoriais e/ou utilitários.
No gadget DESTAQUE o blog da semana é o Querendo Voar que está com um layout comum, simples e muito lindo e a dona é Anna que é blogueira a menos de um ano e seu blog já está com 288 seguidores e merece muito mais.
Falando nesse gadget recebi um pedido da Charlotte D. do blog Countings Stars para ensinar a como colocar aquele efeito desse gadget.
Se lembram do efeito comida ele é bem parecido com esse que vou ensinar, a diferença é que o efeito comida a bordinha entrava totalmente na imagem deixava essa com uma certa opacidade, já esse efeito zoom a borda também entra, mas não totalmente e ao contrário do que acontece no efeito comida ele tira a opacidade.
Ele serve tanto para elite de afiliados, como também para outras imagens dos gadget do blog.
Clique aqui para visualiza-lo.
Para colocá-lo no seu blog vá primeiro em Modelo>> Editar HTML>> Clique dentro da caixa de HTML e aperte Ctrl+F e procure por:
]]></b:skin>
E acima dessa tag cole esse código:
/*------ Efeito para Afiliados IIII - Efeito Zoom (Etc For Me) ------*/
.zoom {
-webkit-transition-duration: .105s;
-webkit-filter: opacity(0.5);
}
.zoom:hover {
outline-offset: -4px;
outline: 1px solid #f8f5f9;
-webkit-transition:All 2s ease;
-webkit-transition-duration: .45s;
-moz-transition: All 2s ease;
-o-transition: All 2s ease;
-webkit-filter: none;
}
/*------ Efeito para Afiliados IIII - Efeito Zoom (Etc For Me) ------*/
Mude somente onde está em negrito essa é o tamanho, o tipo de borda e a cor da borda, mas recomendo que mude somente a cor. Depois de tudo Salve!
Agora vá em Layout>> Adicionar um gadget>> HTML/JavaScript e cole esse código:
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="zoom" src="LINK DA IMAGEM" /></a>
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="zoom" src="LINK DA IMAGEM" /></a>
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="zoom" src="LINK DA IMAGEM" /></a>
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="zoom" src="LINK DA IMAGEM" /></a>
LINK DO BLOG é onde você irá colocar o link do blog que a pessoa ao clicar será redirecionado.
NOME DO BLOG é o nome do blog em que vai ser redirecionado
LINK DA IMAGEM é a URL da imagem que você quer que apareça.
Depois de fazer as modificações necessárias, Salve!
Pronto!!!
Espero que gostem!
Créditos: Etc For Me