28 fevereiro 2013

Elite de afiliados em uma só imagem

| |

Boa noite, amores!
Eu não iria postar esse tutorial, nem havia passado pela minha cabeça, mas aí eu recebi um pedido na ask do blog e vim aqui postar.
Caso você queira ver, aqui um live preview da elite.

Eu deveria ter postado a algumas horas, de tarde, mas a minha internet começou a falhar e derrepente caiu de vez. Desculpem-me.

Eu usei o programa PhotoScape (baixe aqui) para dividir a imagem que eu queria, achei a imagem no WeHeartIt, editei no PShop (mas você pode editar onde quiser) e usei um efeito de opacidade que eu tinha feito, já faz algum tempo. É um pouco complicado, eu quase me matei, mas praticando pega o jeito.

Confira o tutorial clicando em em... já sabem, né?



Dividindo a Imagem

Antes de dividir a imagem, veja qual é o tamanho da sua sidebar para a foto não acabar ficando para fora da side.
No PhotoScape, clique em divisor (print). Vai abrir uma janela • você vai ver um botão Adicionar para abrir sua foto • depois de sua foto aberta, mexa nas configurações para decidir qual será o tamanho dos quadrados e o número de colunas (print) • depois é só clicar em divisão e colocar assim (print)

Será salvo e cada foto será enumerada automaticamente para que você não se perca na hora de colocar no gadget.


Opacidade
No HTML do seu blog, procure por ]]></b:skin> e acima cole isso. Não vamos mudar nada, pelo menos não agora, ok?
Visualize, e se estiver tudo bem, salve.


Colocando no Gadget
Vá em Layout • Adicionar Gadget • HTML/JavaScript e cole isso nele. Minimize a janela do gadget • abra uma postagem e abra todas as imagens. Depois de todas as imagens abertas, clique na aba HTML, aperte F3 e procure por 001 e cole no url da imagem. Depois procure por 002 para colocar na segunda imagem, depois 003 e aí vai. Se sua foto chegar a ter 15 partes, por exemplo, procure por 010 | 011 | 012 e por aí vai. Depois de fazer todos, coloque no formato rich text e junte a fotos (print) {o meu só deu certo pois tem uma largura quase igual ao do gadget}
Salve.


Juntando tudo, de uma vez por todas.
As imagens vão ficar grudadinhas, mas caso não fiquem uma em cima da outra volte no seu HTML e procure novamente por .isa-opacity
No código da opacidade, você vai ver isso margin-top: 0px; mude o número (se com números positivos, se afastarem, use número negativos). No meu deu -6, mas acho que varia de tamanho da imagem, não sei então tem que ficar tentando até que se "grudem".




E fim! Espero que tenha ajudado vocês. Caso algo dê errado venha falar comigo para eu consertar.

E se você quer um tutorial faça como o anony lindo (a?) e peça um tuto na ask.

Beijos ;*

7 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Ahhh eu tava procurando muito esse tutorial, fica muito lindo os afiliados, adoreiii
    Bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  3. Sempre quis aprender, adorei o tutu, fica muito bonito *-*

    Nyah Kawaii

    ResponderExcluir
  4. Que maravilhoso! Estava atrás de um desses, serio! Obrigada, e olha que eu nem pedi.
    Ana~ @TSD

    ResponderExcluir
  5. Como ficaria a primeira parte no photoshop, Isa? Adorei o seu tutorial, esta mais do que favoritado ^^

    Beijos
    Too Kawaii

    ResponderExcluir
  6. Super me ajudou, achei PERFEITO ... parabéns por tanto talento
    http://mdiariosecreto.blogspot.com.br/

    ResponderExcluir
  7. não dá para dividir a foto no photoshop onlline?

    ResponderExcluir

« »