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!
39 comentários:
Fica com efeito super legal. Eu não tenho visto muito esse efeito em outros blogs. Bjus!!!
galerafashion.blogspot.com.br
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
Super útil esse tutorial!!
Bjo pra ti
minhamaniaa.blogspot.com.br
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
oi flor!:)
Desculpas mas agora eu ja te coloquei nos meus afiliados ok?
Desculpas!^^
Bjoss
http://meuestiloemusica.blogspot.com.br/
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/
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
ai fica perfeito *-----* vou usar no próximo lay ;3
Beijos, Cherry Of Shine
super legal o tuto gostei!
Beijinhos
o efeito é lindo dms! *-*
@esteffanifontes, do blog Aos Dezesseis Anos
aosdezesseisanos.blogspot.com.br
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/
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
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
Fica muito bonito, sem muita "mistura" de imagens, lá no blog eu usei uma imagem mas recortada de diferentes ângulos :D
me-ilumine.blogspot
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 ♥
Ai que tutu massa AMEI
http://simplesmenteassimj.blogspot.com.br/
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á :)
Já sabia fazer :3 Eu uso pra fazer banners no Twitter UHEUEHUEHE'
Muito bom o tutorial Juuh (:
oi dnv ju!
@esteffanifontes, do blog Aos Dezesseis Anos
aosdezesseisanos.blogspot.com.br
Ju,
Gostei desse tutorial, é muito bom para colocar qualquer tipo de imagem no blog, não só de afiliados! Curti.
beijo!
Ver nas Unhas
AAAAAAAAANW , estava procurando esse tutorial a um tempão :3
Obrigada por postar !!
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
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 :)
Fica bem legal, ainda mais se a imagem for uma fofa assim como essa da Lilo e do Stich.♥
PiinkCookie.blogspot.com
Que show :o Nunca vi isso em lugar nenhum, adorei!!
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
Ah, mas aquele livro merece mesmo, ele é muito bom!
beijos
blog-cereja.blogspot.com
Legal...também gosto de usar o photoscape...bem fácil de manusear.Simples e bonito.
Beijos,
paisdas-maravilhas
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
Oi Jú!!
Passando para desejar uma ótima quinta!!
Liz<3
The Red Lil' Shoes Blog
http://theredlilshoes.blogspot.com.br/
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
Oi dnv juu!
@esteffanifontes, do blog Aos Dezesseis Anos
aosdezesseisanos.blogspot.com.br
Oi Ju!!! Bom fianl de semana :DD
Liz<3
The Red Lil' Shoes Blog
http://theredlilshoes.blogspot.com.br/
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
adorei flor
Que efeito lindo! Bem simples, fácil e criativo, amei :3
PiinkCookie.blogspot.com
No próximo layout eu devo usar, fica realmente muito lindo! *--*
Adorei o tuto Ju!
Beijo
Adorei, resultado é lindo! *-*
Beijos :3
Dreams And Love
P.S: Conto com sua presença hoje na festa do Habbinc que terá do DL? >.<
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/
Postar um comentário