Usando ilustrações do kawaii world porquê estou sem meus materiais
Boa tarde, leitores
Hoje eu viajei, e tive uma péssima viajem. Eu nunca gostei de viajar, sempre fico enjoada e vomito muito na estrada. Desculpe por ter falado isso a vocês. Felizmente estou na casa do meu irmão. Onde posso postar a vontade e usar o phtoscape. Estou torcendo para o bendito photoshop pegar aqui, acho que vocês não sabem, mas, não pega na minha casa. Sou realmente muito azarada.
Me Me pediram na ask 5 efeitos bons para afiliados. Achei legal o pedido, e como não sou fão de mexer naquelas coisinhas no notbook, resolvi postar. E vim com os cinco efeitos que mais gosto, o efeito pisca logo porra, o efeito da bordinha hover, efeito shake, efeito pulsar e o efeito caption. Pode visualizar todas aqui
1. Bordinha hover
Primeiro, abra o seu HTML, tecle Ctrl + F e procure por:
]]></b:skin>
E acima dele, cole esse código:
.elitescale{ -moz-border-radius: 2px; -webkit-border-radius: 2px; -webkit-transition: 0s linear; -webkit-transition: opacity 0.5s linear; -webkit-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear; background-color: #FF6EB4; /*Cor da borda */ padding: 3px; } .elitescale:hover { background-color: #AB82FF; /*Cor da borda quando passa o mouse */ padding: 3px; }
Agora, para usar esse efeito, adicione
um HTML/ Java Script e dentro, cole esse outro código, fazendo
as alterações necessárias :)
<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>
2. Efeito pisca logo, porra
Efeito 1
1. Vá até Modelo > Editar html e procure por <head>. Abaixo da tag, cole:
<link href='http://static.tumblr.com/dlelfro/QJ2mh90b7/pisca2.css' media='screen' rel='stylesheet'/>
2. Procure por ]]></b:skin> e acima da tag, cole:
.efeitopisca1{padding:2px;border:1px solid #dcdbdb;}.efeitopisca1:hover{-webkit-animation-name: pisca;-moz-animation-name: pisca;-o-animation-name: pisca;animation-name: pisca;-webkit-animation-duration: 1s;}
<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="efeitopisca1" /></a>
<link href='http://static.tumblr.com/dlelfro/WSvmh91f0/pisca5.css' media='screen' rel='stylesheet'/>
2. Procure por ]]></b:skin> e acima da tag, cole:
.efeitopisca2{padding:2px;border:1px solid #dcdbdb;-webkit-transition-duration: .50s;}.efeitopisca2:hover{-webkit-animation-name: piscaporra;-moz-animation-name: piscaporra;-o-animation-name: piscaporra;animation-name: piscaporra;-webkit-animation-duration: 1s;border:1px solid #ff9ab2;-webkit-transition-duration: .50s;}
3. Efeito shake<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="efeitopisca2" /></a>
1. Vá até editar HTML e procure por <head> e abaixo dessa tag, cole:
<script src='http://static.tumblr.com/qbzesex/w1om9n82r/bygustavo.txt' type='text/javascript'/>
2. Agora procure por ]]></b:skin> e acima da tag, cole:
.shake {position: relative; display: inline;}
3. Por último, em um gadget de HTML/JavaScript, cole e substitua a parte sublinhada:
1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole:
.bass{Recomendo que só editem (se precisarem) duas coisas: o tamanho - max-widht - e a borda arredondada - border-radius - nada além disso.
max-width:74px;
margin:1px;
border-radius:10px;
-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;
}
.bass:hover{
-webkit-animation: smallToBig 300ms alternate infinite ease;-moz-animation: smallToBig 300ms alternate infinite ease;
}
2. Cole o seguinte código em um gadget de HTML/JavaScript:
<img src="http://static.tumblr.com/5dbytsa/fDAmcgq6i/ola.png" class="bass" />
<img src="URL DA FOTO" class="shake" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()"/>
4. Efeito pulsar
1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole:
Recomendo que só editem (se precisarem) duas coisas: o tamanho - max-widht - e a borda arredondada - border-radius - nada além disso..bass{max-width:74px;
margin:1px;
border-radius:10px;
-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;
}
.bass:hover{
-webkit-animation: smallToBig 300ms alternate infinite ease;-moz-animation: smallToBig 300ms alternate infinite ease;
}
2. Cole o seguinte código em um gadget de HTML/JavaScript:
<img src="http://static.tumblr.com/5dbytsa/fDAmcgq6i/ola.png" class="bass" />
5.Efeito caption
1. Vá no HTML do seu blog, aperte CRTL+F e procure por: ]]></b:skin>
Abaixo, cole:
Abaixo, cole:
/** EFEITO CAPTION **/
@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}
imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 3px 3px 0;}
captioon {position: absolute; background: #000; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 8px; font-family: "04b03", small-fonts; text-shadow: 1px 1px 3px #000;}
imagem:hover captioon {opacity: 0.75;}
imagem:hover:before {opacity: 0;}
.caption:before {bottom: 10px; right: 10px;}.caption captioon {bottom: 3px; right: 30%;}.caption:hover captioon {right: 0px;}
Visualize, se estiver tudo certo sem nenhum problema, salve.
2. Vá em layout, adicione um gadget HTML/JavaScript e nele, cole o código abaixo:
<imagem class="caption">
<img src="LINKDAIMAGEM"><captioon>LEGENDA</captioon></imagem>
Espero que tenham gostado ~
ótimos efeitoss adoro o/
ResponderExcluiracervo-de-livros.blogspot.com
A postagem está uma bagunça :P. Obrigada <3
ExcluirMuito bons os efeitos >...<
ResponderExcluirKisses ♥
Thanking ~
ExcluirEi flor não recebi nada no meu gmail, acho que vc se enganou em algo, está tudo prontinho faz tempo , agora é só você pegar ele.. Manda seu email da conta do blogger e o login no meu email do gmail que é rohotaku@gmail.com
ResponderExcluirOk? beijus;;
Okay <3. Obrigada pela paciência, Roh
ExcluirOs efeitos são lindíssimos!Visite:
ResponderExcluirlembrando-carol.blogspot.com.br
beijos!
Que bom que gostou!
ExcluirAdorei todos, são ótimos!
ResponderExcluircrazyforhtml.blogspot.com
Fico feliz que tenha gostado. . .
ExcluirAmei os efeitos e linda espero que tenha gostado do lay >.<
ResponderExcluirBeijocass amoreee
Que bom que gostou!. Eu amei >.<, ele vai ficar um bom tempo aqui AHUHAUAHUhauHAUahJ
ResponderExcluirToda vez que eu leio Pisca logo, porra começo a rir IHSIAUHSAHIUSH' Ótima postagem :3
ResponderExcluir@Kawaii World. /* perfil /*
Anw , esses efeitos são lindoos .
ResponderExcluirVIVAAAA \Õ pela primeira vez não vou ter que
clicar naqueela janela chata , UHSAUHSAHU *--*
Esse layout ficou shoow , adorei .
~Pulando aqui , estou no BLOGROLL~
Obrigada sua fofa ♥
Abraços *--*
>>
http://pensamento-jhenny.blogspot.com.br/
-Kaorii--chan.: Eu também SHAUSUASHASU, mas tento escrever como se fosse um nome normal rss. Thanking :3
ResponderExcluirJhenny: São lindos mesmo XD, também odeio aquela janela XD. É. ficou muito bonito, ele vai fica rum bom tempo aqui, dpois, vou encomendar de novo HSAUSHUASHU