11 de fev de 2013

Tutorial: Afiliados em uma só Imagem. (?)

Tumblr_mhznkee5wb1s5whm0o1_500_large

Boa tarde, pessoal.

Quem aí vai passar o carnaval em casa, bate aqui \o/ Para nossa alegria, estamos 'de folga' durante 5 dias *-* Pelo menos, EU estou. Me dei mais 2 dias, rçrç' Mas então, o que estão fazendo neste dia tão tedioso? Pra mim, feriado às vezes é sinônimo de tédio, acreditem =/ 

Enfim, estou trazendo-lhes um tutorial, que aliás fora muito pedido aqui no blog. Sabem o efeito que uso nos afiliados? No gadget "Dançarinos"? (Confere já, já uma imagem para desvendar ;3) É um tutorial meio complicado, que necessita de muita atenção e principalmente paciência. Achei-o no blog da Stéph(aqui), então todos os créditos se direcionam à ela ;D Pra quem não sabe do que estou falando, o efeito é este aqui:

Imagem editada especialmente para o tutorial ;D Vamos conferir?

1. Primeiramente, crie uma imagem do tamanho da sua sidebar(ou qualquer outro tamanho, de sua preferência) e salve-a.
2. Logo em seguida, abra o Photoscape(aqui) e clique em "Divisor". (Confira a imagem abaixo)
(Clique para ampliar).

3. Após isso, adicione sua imagem e defina as medidas. Recomendamos 50x50, mas minha imagem teve de ser redimensionada para 53x44, isto dependendo do tamanho da sua sidebar
(Clique para ampliar).

4. Feito isso, clique em "Divisão", e salve as imagens onde desejar.
(Clique para ampliar).

5. Agora, entre em qualquer site hospedador e hospede suas imagens. 
6. Vá no seu HTML, tecle Ctrl+F e procure pela tag ]]><b:skin> e acima dela, cole o seguinte código:
.afili {
opacity: 0.6;
-webkit-transition: 0.4s;
width: 50px;
height: 50px;
text-align: center;
margin-bottom: -3px;
}
.afili:hover {
opacity: 1.1;
}
7. Não altere NADA. Para adicionar, cole o seguinte código em um HTML/JavaScript, repetindo várias vezes, até que todas suas imagens estejam certas.
<a href="http://URL.com" title="Título da imagem"><img src="LINK DA IMAGEM" class="afili"/></a>
E prontinho! Agora, a minha querida Hyun realizou o tutorial direitinho, mas questionou que suas imagens ficaram separadas. O que fiz? Apenas deixei as quatro imagens juntas e as debaixo separadas das de cima. Não sei como explicar, mas qualquer dúvida, estou presente para ajudar ;D Espero que este tutorial tenha sido-lhes útil! Fiquem com Deus e bom Carnaval!

40 comentários:

Adriana Leandro disse...

Fica com efeito super legal. Eu não tenho visto muito esse efeito em outros blogs. Bjus!!!

galerafashion.blogspot.com.br

Ju ♡ disse...

Eu já sabia como fazer, fica realmente muito bonito! Acho que no meu próximo layout vou usar a elite de afiliados nesse estilo! ^^

Bjs, Explosion OF HTML :3

Bruna Oliveira disse...

Super útil esse tutorial!!
Bjo pra ti

minhamaniaa.blogspot.com.br

Blog Cereja disse...

Eu posto todos os dias porque deixo os posts salvos no rascunho! KKKKK
Nossa, adorei esse tutorial, é o mais bonito q eu já vi até hoje!
beijos
blog-cereja.blogspot.com

Amanda Cristina negri disse...

oi flor!:)
Desculpas mas agora eu ja te coloquei nos meus afiliados ok?
Desculpas!^^
Bjoss
http://meuestiloemusica.blogspot.com.br/

Cati *u* disse...

Amei o tutorial, eu pensei besteira,achei que você tinha feito pedacinho e montado eles como quebra cabeça (Nossa '-')
HUSAHUASHUA'

-Bezzos o3o
http://pandasemparis.blogspot.com.br/

Sara ♥ disse...

aaah obg por essa tuto! estava procurando a algum tempo *-*
vou usar quando mudar o lay,falando nisso,nao tinha visto o novo daqui,eu simples mente AMEI!! *--*
patydeallstar.blogspot.com

- єmmyli ;33 disse...

ai fica perfeito *-----* vou usar no próximo lay ;3

Beijos, Cherry Of Shine

Luh disse...

super legal o tuto gostei!
Beijinhos

Esteffani Fontes disse...

o efeito é lindo dms! *-*

@esteffanifontes, do blog Aos Dezesseis Anos
aosdezesseisanos.blogspot.com.br

Liz Albuquerque disse...

meu feriado anda meio tedioso também... Li um livro ontem, hoje vou no cinema com a mamis :D mas só isso rss

Gostei do tutorial!!! <3

Passando para desejar um ótimo dia!
Liz<3
The Red Lil' Shoes Blog
http://theredlilshoes.blogspot.com.br/

Bárbara {Chovendo Diamantes} disse...

Fica perfeito desse jeito, o efeito é lindo *-* Também vou passar o carnaval todo em casa o/ Pelo menos é sem escola *--*
Beijos,
chovendodiamantes.blogspot.com

- Bia Pfau disse...

Adorei o blog. Obrigada por comentar, e me ajudar no meu.

Falando sobre o tutorial adorei. Iria bostar um assim, agora que vi aqui não tenho certeza!

Bjs, Organized World

- Hyun disse...

Fica muito bonito, sem muita "mistura" de imagens, lá no blog eu usei uma imagem mas recortada de diferentes ângulos :D

me-ilumine.blogspot

P.C. disse...

OMG, amei demais o tutorial! O efeito é super lindo, tava mesmo curiosa pra saber como que faz, hahaha >< Também deve dar pra usar em uma menu escondido, imagina que daora? *u*
Beijocas!

PiinkCookie.blogspot.com ♥

Juh Demos disse...

Ai que tutu massa AMEI


http://simplesmenteassimj.blogspot.com.br/

Pequena Julieta disse...

Bem legal esse tutorial, sempre tive interesse em saber como era ><

Beijos :*
pequena-julieta.blogspot.com
Hey... abri vagas para postadora! Se quiser se inscrever, dá uma olhadinha lá :)

- Sαgwα disse...

Já sabia fazer :3 Eu uso pra fazer banners no Twitter UHEUEHUEHE'
Muito bom o tutorial Juuh (:

Esteffani Fontes disse...

oi dnv ju!

@esteffanifontes, do blog Aos Dezesseis Anos
aosdezesseisanos.blogspot.com.br

Liz Albuquerque disse...

Passando para desejar um ótimo dia!
Liz<3
The Red Lil' Shoes Blog
http://theredlilshoes.blogspot.com.br/

Camila disse...

Ju,
Gostei desse tutorial, é muito bom para colocar qualquer tipo de imagem no blog, não só de afiliados! Curti.
beijo!

Ver nas Unhas

ʝɦɛɳɳy - Yuɱi disse...

AAAAAAAAANW , estava procurando esse tutorial a um tempão :3
Obrigada por postar !!

Karen disse...

Eesse tutu e um pouco complicado mais no final fica liindo
visite-me..j´estou te seguindo ok?
estilosgirls.blogspot.com
navitrine-oficial.blogspot.com
bjs

Lillye disse...

Nossa, Ju, que bacana este tutorial!
E olha que no começo eu achei que era super complicado, agora vejo que só é necessário um pouquinho de paciência e dedicação..
E concordo com a Camila, dá pra usar mesmo sem ser somente como afiliados no blog, deve ficar lindo também se for uma listinha de links e coisas assim *-*

Beijinhos,
Lillye :)

Laura Bianca disse...

Fica bem legal, ainda mais se a imagem for uma fofa assim como essa da Lilo e do Stich.♥

PiinkCookie.blogspot.com

Cah! disse...

Que show :o Nunca vi isso em lugar nenhum, adorei!!

Karen Campos disse...

Nossa, eu usei esse mesmo efeito no meu primeiro layout. Faz muito tempo, mas confesso que não ficou tão bom quanto o seu. Está lindo mesmo. O tutorial é ótimo, muito bem explicado (:

Beijos Ju. :3
- Always Fearless

Blog Cereja disse...

Ah, mas aquele livro merece mesmo, ele é muito bom!
beijos
blog-cereja.blogspot.com

Priscila Viricio disse...

Legal...também gosto de usar o photoscape...bem fácil de manusear.Simples e bonito.
Beijos,
paisdas-maravilhas

# - Vitoria disse...

Flor você salvou meu novo layout, estava faltando o gadget amigo e você me ensina isto agora vou fazer te amoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.

~Beijões

crazy--designer.blogspot.com.br

Liz Albuquerque disse...

Oi Jú!!

Passando para desejar uma ótima quinta!!
Liz<3
The Red Lil' Shoes Blog
http://theredlilshoes.blogspot.com.br/

Juliana disse...

Desde que você mudou o lay eu queria saber como fazia esse efeito*-*
É um pouco complicado, mas fica lindo demais, hehe.

Beijos,

ser-escritora.blogspot.com.br

Esteffani Fontes disse...

Oi dnv juu!

@esteffanifontes, do blog Aos Dezesseis Anos
aosdezesseisanos.blogspot.com.br

Liz Albuquerque disse...

Oi Ju!!! Bom fianl de semana :DD


Liz<3
The Red Lil' Shoes Blog
http://theredlilshoes.blogspot.com.br/

Hee' Karina disse...

To amando esse seu novo lay, vou ver se faço um pro DF hoje a noite, e vou usar alguns tutos seus, beijos!

Doce Futuro

Izabela Lisboa disse...

adorei flor

Gaby Rezende disse...

Que efeito lindo! Bem simples, fácil e criativo, amei :3
PiinkCookie.blogspot.com

Ingrid | ILL Help You disse...

No próximo layout eu devo usar, fica realmente muito lindo! *--*
Adorei o tuto Ju!
Beijo

# - Lαuяα ∞ disse...

Adorei, resultado é lindo! *-*

Beijos :3

Dreams And Love

P.S: Conto com sua presença hoje na festa do Habbinc que terá do DL? >.<

Lilian Brenda disse...

Oiiii flor, tudo bem? Estou passando aqui pra dizer qu eu indiquei seu blog para responder á uma tag ótima. A tag é Pergunte que eu respondo. As perguntas são:
1.Como escolheu o nome do blog ?
2.Quanto tempo se dedica ao blog ?
3.Já teve algum problema com comentários de anônimos no blog ?
4.Você se inspira em algum blog ? Qual ?
5.Há Quanto tempo esta na blogs fera ?
6.Quantos blogs visita por dia ?
7.Quantos livros lê por mês ?
8.Já ficou sem inspiração pra postar ?
9.Pretende mudar algo no blog em 2013 ?

Eu já respondi lá no blog,vem conferir. Vou ficar aguardando vc responder. Bjinhossss linda e tenha um ótimo fim de semana.

http://lilianbrenda1.blogspot.com.br/