~ HTMLand ♥

Annyeong, sheeps! Tudo bom? Então, já vou direto pro assunto da postagem; hoje trouxe 3 tutoriais super conhecidos, e esses 3 tutoriais são efeitos, todos são do Kawaii World, o ruim é que o Kawaii World está fechado, mas todos os créditos continuam a ser dados para eles. Esses efeitos são:

✱ Efeito Flipping

✱ Efeito Wow

✱ Efeito Pisca Logo, Porr@! ~ Efeito 1 e 2

Temos um preview logo abaixo, só clicar na imagem que você irá parar num site do Kawaii World e procure pelos nomes dos efeitos e você verá como são fofos!

♡ Efeito Flipping♡

❤ Vá no HTML do seu blog, dê F3 e procure por <head>

abaixo dessa tag, cole o seguinte código:

<link href='http://static.tumblr.com/0xqvkot/MdKmj9am9/flippingkw.css' media='screen' rel='stylesheet'/>

Após isso, dê F3 novamente e procure por ]]></b:skin>
depois, cole acima disso o seguinte código:

.efeitoflipping{
padding: 3px;
}
.efeitoflipping:hover{
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipping;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipping;
-o-backface-visibility: visible !important;
-o-animation-name: flippink;
backface-visibility: visible !important;
animation-name: flipping;
-webkit-animation-duration: 1s;
}

Não é preciso modificar nada desse código, somente o a seguir.

Agora, salve tudo e vá no Layout do seu blog, abra um Gadget de HTML/JavaScript e dentro dele cole o seguinte código:

<a href="URL" title="Nome do blog"><img src="URL DA IMAGEM" class="efeitoflipping"/></a>

Bom, vocês sabem né, modificar o que está em negrito e depois salvar.

♡ Efeito Wow♡

❤ Vá no HTML do seu blog, dê F3 e procure por <head>

abaixo dessa tag, cole o seguinte código:

<link href='http://static.tumblr.com/dlelfro/M7Rmibw12/efeitowowkw2.css' media='screen' rel='stylesheet'/>

Depois de ter feito, dê F3 novamente e procure por ]]></b:skin>
acima disso cole o seguinte código:

.efeitowow{
}
.efeitowow:hover{
-webkit-animation-name: wow;
-moz-animation-name: wow;
-o-animation-name: wow;
animation-name: wow;
-webkit-animation-duration: 1s;
}

Agora, vá no Layout de seu blog e abra um Gadget de HTML/JavaScript
e dentro dele cole o seguinte código:

<a href="URL" title="Nome do blog"><img src="URL DA IMAGEM" class="efeitowow" /></a>

Modifique o que está em negrito e salve.

♡ Efeito Pisca Logo♡ efeito 1

❤ Vá no HTML do seu blog, dê F3 e procure por <head>

abaixo dessa tag, cole o seguinte código:

<link href='http://static.tumblr.com/dlelfro/QJ2mh90b7/pisca2.css' media='screen' rel='stylesheet'/>

após isso, dê F3 de novo e procure por ]]></b:skin>
acima desse código, cole o seguinte:

.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;
}

Agora, salve tudo e vá no Layout de seu blog, abra um Gadget de HTML/JavaScript e dentro dele cole o seguinte:

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="efeitopisca1" /></a>

Modifique o que está em negrito e salve.

♡ Efeito Pisca Logo♡ efeito 2

❤ Vá no HTML do seu blog, dê F3 e procure por <head>
abaixo dessa tag, cole o seguinte código:

<link href='http://static.tumblr.com/dlelfro/WSvmh91f0/pisca5.css' media='screen' rel='stylesheet'/>

após isso, dê F3 de novo e procure por ]]></b:skin>
acima desse código, cole o seguinte:

.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;
}

Agora, salve tudo e vá no Layout de seu blog, abra um Gadget de HTML/JavaScript e dentro dele cole o seguinte:

<a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="efeitopisca2" /></a>

Modifique o que está em negrito e salve.

Bom, gente, só pra esclarecer mesmo, esses tutoriais foram pegos de outros blogs, mas não acho necessário dar os créditos para eles sendo que o Kawaii World que postou/criou, então, também não creditem a mim, e sim o Kawaii World, cuja sigla KW.

Saranghae ♡

4 comentários:

Roh dos Santos 18 de fevereiro de 2018 às 16:05
Olá amore tudo bem? Esse layout é tão fofo né? Amo esses tons pastéis acho mais aconchegante..
E esses efeitos? Acho bem legais, os tutos do kawaii ajudam tantas pessoas até hoje, saudades da Clara =(

Ei, posso te dar uma dica? Sabe o que eu acho que seria mais legal ainda postar? Acho que você deveria tentar criar coisas suas mesmo, mesmo que sejam feinhas de início e que não fique perfeito, mas será algo seu e algo exclusivo, nunca criado antes. Eu sempre dou esses conselhos quando alguém começa um blog de html. Na verdade o segredo para um blog com este ainda fazer sucesso e durar na blogosfera é criar algo seu, fica autêntico e original. Não sou contra e nem estou falando mal por você reblogar posts de outros blogs, mas é sempre mais legal criar algo só seu, te faz sentir especial..

Eu no início criava coisas bem toscas haha Mas depois fui pegando gosto e hoje em dia sei muitas coisas, e faço até de olhos fechados pois treinei tanto que aprendi muitas coisas. Não é difícil, só tem que praticar.

Beijos linda =3
ResponderExcluir
Respostas
Camille 19 de fevereiro de 2018 às 12:58
Olá Amy <33
Achei legal você ter postado o tutorial do Kawaii World porque eu não sei aonde eu ia achar esse tuto. Explicou bem na minha opinião. Seu blog é um dos poucos blogs ativos de html que vem compartilhando coisas legais <33 Amo visitar seu blog sinto como já se fosse sua amiga. Aguardarei os próximos posts! ^•^

Snack Cheese ♥ Viva o leite ～🍪v i s i t e - n o s🍪
ResponderExcluir
Respostas