Tutorial: Efeito Dark Shine

Olá, sei que fiquei um bom tempo sem postar, mas voltei.

Efeito Dark Shine

Preview

Ele é bem fofo, você pode mudar as cores depois.

1- Vá em Editar HTML > Ctrl + F e procure por ]]></b:skin agora, acima desse código cole:

/-- Efeito Dark Shine por Alan www.wehearthtml.blogspot.com --/
caixa1 {
background: transparent;
padding: 10px; float: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.imagem1 {
margin: 3px;
border: 1px solid #BCAD90;
-webkit-transition-duration: .50s;
}
.imagem1:hover {
-webkit-transition-duration: .50s;
box-shadow: 0px 0px 30px #686051;
}

Mude as cores destacadas. 

O primeiro código de cor destacado é a cor da borda, e o segundo da sombra.

2- Salve. Agora vá em Layout > ADD Gadget > HTML/JavaScript e cole:

<caixa1><a href="LINK"><img src="IMAGEM" class="imagem1"/></a></caixa>

Mude as partes destacadas.

É isso, espero que tenham gostado, caso queiram algum tutorial específico comentem ok?

Créditos: Bunny Crazy 

Tutorial: Efeito bordas hover

Yoo

Trago um tutorial que pode ser usado na sua elite de afiliados, ele é bem simples e fica lindo.

Preview

1- Vá em Editar HTML, Ctrl + F, e procure por ]]></b:skin agora acima do que você procurou cole:

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

2- Mude o necessário, salve.

3- Vá em Layout, ADD Gadget, HTML/JavaScript e cole:

<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>

4- Faça as alterações necessárias, visualize, salve.

Créditos: Without Kawaii

Beijo, Ráh

Tutorial: Efeito Hero

Hey moços e moças :3

Eu estava procurando um tutorial bem legal para mostrar para vocês, e achei, adivinhe onde? 

No One Dí Things, claro.

O efeito serve para elite de afiliados, mas você pode usar para o que você quiser.

Preview

Lindo né? Eu adorei!

1- Vá em Editar HTML, Ctrl + F e procure por ]]></b:skin> acima dessa tag cole:

@-webkit-keyframes hero {

50% {transform: rotate(16deg) ;

-webkit-transform: rotate(16deg) ;

-moz-transform: rotate(16deg) ;

-o-transform: rotate(16deg) ;

-ms-transform: rotate(16deg) ;}

75% {transform: rotate(-16deg);

-webkit-transform: rotate(-16deg);

-moz-transform: rotate(-16deg);

-o-transform: rotate(-16deg);

-ms-transform: rotate(-16deg) ;}

100% { transform: rotate(0deg) ;

-webkit-transform: rotate(0deg) ;

-moz-transform: rotate(0deg) ;

-o-transform: rotate(0deg) ;

-ms-transform: rotate(0deg) ; }

}

.hero {display: inline-block; border-radius: 5px; margin: -1px; -webkit-transition-duration: .50s; OPACITY: 0.5; outline-style:dotted;

outline-width:1px;

outline-color: transparent;

outline-offset: -5px;}

.hero:hover { -webkit-animation: hero .5s alternate linear; OPACITY: 1; outline-style:dotted;

outline-width:1px;

outline-color: #fff;

outline-offset: -5px;}

2- Salve. Agora vá em Layout > ADD gadget > HTML/JavaScript e cole o seguinte código:

<a href="LINK-DO-BLOG"><img class="hero" src="LINK-DA-IMAGEM" title="TITULO-DO-BLOG" /></a>

Modifique o que é necessário, salve.

Fácil não? Beijos, Ráh

Tutorial: Efeito preto e branco nas imagens do post

Olá >ε<

Mais um tutorial hoje... Ele é bem fácil e fica lindo no blog, eu uso ele no MHR, e eu gosto bastante.

Preview

1- Vá em Editar HTML, Ctrl + F e procure por ]]></b:skin> agora acima dessa tag cole:

post img {-webkit-filter: saturate(100%) ;-webkit-transition-duration: .90s;}.post img:hover {-webkit-filter: saturate(0%) ;-webkit-transition-duration: .90s;}

Se você quiser que o Hover não fique tão escuro, 

mude a parte destacada do código (0%) por um número mais alto. 

Fácil não? E fica lindo!

Créditos: Nick Tutoriais

Tutorial: Efeito sépia nas imagens do blog

Yoo ◑•◐

Hoje, vou ensinar um tutorial que fica bem fofo no blog. Quando você passa o cursor na imagem ela fica com o efeito sépia (antiga, amarelada). É bem simples de fazer e vale a pena!

1- Vá em Editar HTML e procure pelo famoso ]]></b:skin> acima desse código cole:

img { -webkit-filter: sepia(0%); transition:All 0.4s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } img:hover { -webkit-filter: sepia(100%); transition:All 1s ease; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease;}

E pronto! Agora todas as imagens do seu blog vão ficar com esse efeito

Créditos: One Dí Things

Até logo, e votem em um novo nome para o blog aqui!

Tutorial - Efeito Giratório para afiliados

Yoo

Eu estava procurando um efeito legal para postar aqui no blog e achei um efeito giratório para elite de afiliados bem legal no Birthday Cake...

Preview

A imagem dos afiliados já fica redondinha, quando você passa o cursor por cima a imagem gira.

1- Vá em Editar HTML e procure pelo famoso ]]></b:skin acima desse código cole:

.elite{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto; -webkit-transition-duration: 1.20s;box-shadow: 2px 1px 2px #909090;}.elite:hover{-webkit-transform: rotate(360deg);}

2- Salve. Vá em Layout > Adicionar Gadget > HMTL/JavaScript e cole:

<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>

Vá repetindo o código, um código equivale a uma imagem de afiliados.

Créditos: Birthday Cake

Até mais queridos :3

Tutorial: Efeito Single

Hey!

Gente, cadê os comentários? Assim a tia Ráh fica triste... :P

O tutorial de hoje é o Efeito Single, para sua elite de afiliados.

 Ele é do blog Chovendo Diamantes, mas eu peguei os códigos no One Dí Things.

Live Preview

1- Vá em Editar HTML e procure por ]]></b:skin> acima dessa tag cole:

@-webkit-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-moz-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-o-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
@-ms-keyframes bubble {
25% { -webkit-transform: rotate(-50deg); } 40%{ -webkit-transform: scale(0.5);}
50% { -webkit-transform: rotate(50deg); }}
.bb{
padding:1px;
}
.bb:hover{
-webkit-animation: bubble 1s;
-moz-animation: bubble 1s;
-o-animation: bubble 1s;
-ms-animation: bubble 1s;
}

2- Salve. Vá em Layout > Adicionar Gadget > HTML/JavaScript e cole:

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

Faça as alterações e prontinho.

Super fácil não? E fica tão lindo...

Até mais!

Efeito Shake

Olá! Acho que o blog vai ficar só com a área de Goodies, que tal? Ah! E por falar em Goodies, eu atualizei a página de Goodies ♥

O tutorial de hoje é o Efeito Shake, ele é mais ''agitadinho'', e fica lindo no blog.

Live Preview

1- Vá em editar HTML e procure por <head> abaixo dessa tag cole:

<script src='http://static.tumblr.com/qbzesex/w1om9n82r/bygustavo.txt' type='text/javascript'/>

2- Ainda no editar HTML procure por ]]></b:skin> acima dessa tag cole:

.shake {position: relative; display: inline;}

3-  Salve. Vá em Layout > Adicionar Gadget > HTML/JavaScript e cole:

<img src="URL DA FOTO" class="shake" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()"/>

Onde está escrito URL DA FOTO você substitui pela foto que você quer.

Créditos: Bunny Crazy

Até mais!

Tutorial: Topo Deslizante

[www]

Hello Amoras >.<

 O efeito do tutorial é como o topo do blog, some no topo e sobe devagar...

Tutorial: Como colocar efeito Opacity nas imagens

                                   

                                Hey!                            

Hoje trago-lhes um tutorial muito bacana da como por Efeito Opacity nas imagens do blog... A imagem fica meio apagadinha, daí você passa o mouse e ela volta ao normal..

Quer aprender?

Tutorial de como deixar efeito caindo do mouse!

Olá jujubas!
O tutorial de hoje deixa o blog bem meigo, ficam caindo estrelinhas do mouse!

1- Entre neste site: http://tonygifsjavas.com.br/efeitos_para_blogs/pagina_efeitos_mouse.htm

 

Vai abrir um site assim, dai você desce e vai vendo os efeitos variados que tem, na imagem acima tem um quadrado contornado de vermelho, siga as instruções!

 

Entenderam? Enfim, sigam as instruções do blog! Em seguida você adiciona um Gadget no blog que você escolheu, e coloca como  HTML/JavaScript e coloca o nome do Gadjet ''Efeito no Cursor'' E dai você vai na pagina do efeito que você escolheu, seleciona o código e da CTRL+C depois você abre novamente a janela do Gadget e da CTRL +V e dai você clica em salvar dai depois você clica novamente em salvar e pronto!

Beijos!