Tutorial: Elite de Afiliados com Expansão

Atenciosamente, Guardei por aí: 2 comentários:
Olá jujubas 
Acho que foi a May, que pediu lá na Ask como colocar aquele Mais/Menos no final do Gadget, que você clica e aparece mais itens. Ele é muito usado em elites de afiliados.
 E o tutorial se chama Elite de Afiliados com Expansão.

Nível: Médio

1- Faça normalmente a sua elite de afiliados. Veja alguns efeitos para ela aqui.

2- Agora, cole o seguinte código abaixo de todo o código da sua elite já pronta:
<div class="divspoiler">
<img src="IMAGEM DE MAIS" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
CONTEÚDO OCULTADO
</div></div>

IMAGEM DE MAIS: Você colocará a url da imagem que você quer que apareça, quando você clicar nela a elite aumenta.
CONTEÚDO OCULTADO: Ali, você colocará mais uma parte da elite, ou seja, ou você copia uma parte da elite já pronta e coloca lá, ou você faz mais algumas imagens para afiliados.

Agora, veja se deu tudo certo.
Ráh, as imagens ficarão todas para a esquerda/direita, como vou centralizar elas?
Tem um tutorial aqui ensinando a centralizar o conteúdo dos Gadgets.

É isso, espero que tenham gostado. Não esqueçam de pedir mais tutoriais lá na Ask :D
Beijos, Ráh

Ask do Blog - Importante

Atenciosamente, 2 comentários:
Olá jujubas!
Criei uma Ask para o blog. Lá, vocês poderão pedir tutoriais e utilitários específicos, que vocês queiram. 
Então, se alguém quiser algum tutorial que eu ainda não postei pode ir lá pedir ^-^

http://ask.fm/assimtipotudo

Vou ver se consigo fazer um Gadget para colocar a Ask lá também.
É isso, espero que peçam tutoriais lá :3
Beijo, Ráh

Tutorial: Ribbons na Sidebar

Atenciosamente, Guardei por aí: Nenhum comentário:
Olá
Estão gostando da ideia do blog ser só de Goodies? Eu gostei, porque eu adoro isso!
O tutorial desta postagem é bem legal...
Como por Ribbons na Sidebar
Fica bem legal no blog... Quer aprender?

1- Vá em Editar HTML dê Ctrl + F e procure por: 
/* Mobile
2- Um pouco abaixo do código que você procurou, terá um código assim: body.mobile
Antes desse código cole:
.sidebar .widget h2{
background: url(LINK DO SEU RIBBON) no-repeat left;
margin-top:-2px;
margin-left:-19px;
margin-bottom:0px;
padding:15px;
width:150%;
overflow:hidden;
}

Onde está escrito LINK DO SEU RIBBON você coloca a Url do seu Ribbon.
Talvez eu traga alguns para vocês em postagens futuras.
Créditos: Sorriso Met4lico

É isso, espero que tenham gostado *-*
Beijo, Ráh
 

Tutorial: Seleção Colorida

Atenciosamente, Guardei por aí: Um comentário:
Hey jujubas!
O tutorial deste post é Seleção Colorida. Fica bem legal no blog e recomendo que usem.
Pra quem não sabe, ao invés do texto ficar com a seleção cinza quando você seleciona ele, você pode escolher a cor que quiser. Eu peguei os códigos no Cherry Bomb, então os créditos vão para ele.

1- Vá em editar HTML > Ctrl + F e procure por ]]></b:skin> antes deste código, cole este outro:
::-moz-selection {
background:#F7DFDD; /*Cor do fundo*/
color:#E49D98; /*Cor da fonte*/
}
::selection {
background:#F7DFDD;/*Cor do fundo*/
color:#E49D98; /*Cor da fonte*/
}

Mude as partes em negrito pela cor do fundo e da fonte.
É importante deixar a cor do fundo igual nas duas partes do código, e a da fonte também.
Tabela de cores: www

É isso galera. Beijos, Ráh

Tutorial: Efeito Flipping

Atenciosamente, Guardei por aí: Nenhum comentário:
Olá
Gente, faltam oito dias para o meu aniversário *-*
Estou tão ansiosa... Finalmente, treze anos!
Enfim, o tutorial de hoje também é para elite de afiliados, eu adoro efeitos para elite de afiliados.
Eu peguei os código no Doce Mundo Kawaii, então os créditos vão para ele.

Preview

1- Vá até editar HTML dê Ctrl + F e procure por <head> acima do código que você procurou cole:
<link href='http://static.tumblr.com/0xqvkot/MdKmj9am9/flippingkw.css' media='screen' rel='stylesheet'/>

2- Ainda no editar HTML dê Ctrl + F e procure por ]]></b:skin> acima do código que você procurou cole:
.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;
}

3- 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="efeitoflipping"/></a>

Edite as partes destacadas e salve.
Gostou? Espero que sim ^-^
Beijos, Ráh

Tutorial: Como subir a Sidebar

Atenciosamente, Guardei por aí: Um comentário:
Olá jujubas
O tutorial de hoje é bem útil na minha opinião. Já usei ele muitas vezes e resolvi postar para vocês.
Com ele sua sidebar pode ir lá pra cima, e então, você terá que usar um cabeçalho com mais ou menos 580 x 200 de tamanho.

1- Vá em Editar HTML -> Ctrl + F e procure por:
.main-inner .column-left-outer { (Se a sua sidebar for do lado esquerdo)
.main-inner .column-right-outer { (Se a sua sidebar for do lado direito)

2- Abaixo desse código que você pesquisou cole:
margin-top: -100px;

Você pode mudar o 100 por outro número, eu, por exemplo no MH Ráh usei 170, mas vá mudando de acordo com seu gosto.
Créditos: Cupcake de Glitter

É isso, espero que eu tenha ajudado.

Utilitários - Natal e Ano Novo

Atenciosamente, Guardei por aí: 3 comentários:
Olá!
A pedido da Caroline de Souza, hoje trago alguns utilitários de Natal e Ano Novo, avatares, ilustrações, PNGs, Barrinhas divisórias, ilustrações para afiliados, etc.
Espero que gostem!

Ilustrações para postagem
Tamanho: 500 x 150






Avatares
Tamanho: 130 x 130


Imagens para Afiliados
Tamanho: 50 x 50

Tamanho: 225 x 50


PNGs







Barrinhas Divisórias

É isso, espero que tenham gostado!
Até mais!

Parabéns Assim Tipo Tudo! - Leiam

Atenciosamente, 2 comentários:
Hey \o/
Parabéns pra você, nessa data querida, muitas felicidades muitos anos de vida!

É hoje, é hoje o aniversário do blog!
Acho que todos sabem que o ATT não é muito famoso, com poucos seguidores para a idade, etc. Mas mesmo assim, não podemos deixar essa data em branco. 
Hoje, o blog está completando mais um ano de vida, anw *-*

E para comemorar, fiz um selo para os seguidores.
É de coração c:

O PRIMEIRO QUE COMENTAR, PODE ESCOLHER QUALQUER COISA! TUTORIAIS, ASSINATURAS EDITÁVEIS, AVATARES, UTILITÁRIOS EM GERAL, ENFIM!
Comentem por favor, eu peço por favor!!

Obrigada <3
Ráh

Tutorial: Efeito Single

Atenciosamente, Guardei por aí: , Nenhum comentário:
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

Atenciosamente, Guardei por aí: , Um comentário:
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: Retirar espaço entre postagens e cabeçalho

Atenciosamente, Guardei por aí: Nenhum comentário:
Olá!
Estou gostando bastante de fazer tutoriais... *-*
Hoje, vou ensinar vocês a retirar aquele espaço que tem entre as postagens e o cabeçalho do seu blog, na minha opinião o blog fica bem melhor sem aquele espaço.. Quer aprender?


Mais

Tutorial: Letra pressionada no Photoscape

Atenciosamente, Guardei por aí: , Nenhum comentário:
Olá, viram que mudei o layout? Ainda não acabei os detalhes... É um layout free e os créditos estão no gadget End.

O tutorial que eu trago hoje para vocês pode ser usado em cabeçalhos, imagens para welcome, ilustrações em geral, e tudo o que sua imaginação mandar!

Materiais necessários: Photoscape
Nível: Fácil

1- Abra seu Photoscape, vá em Editor, abra alguma imagem que você queira editar.

2- Vá em objeto, clique no conta gotas e clique no fundo da sua imagem. Clique na caixinha da cor, e depois e More Colors... (print) Depois disso, escureça um pouco a cor e clique em Adicionar às cores personalizadas e em seguida em ok (print). 

3- Agora vá para a ferramenta texto e escreva o que quiser.

4- Arrume como está aqui. (print) (Onde está -3, você pode mudar para -1 ou -2)

5- Pronto! Olhem meu resultado...
Fofo né? Eu adoro esse tutorial!
Créditos: www
Prints feitos por mim, não copie.
Até a próxima! 
Assinar: Postagens (Atom)