10 de mai de 2013

Tutorial - Afiliados em uma imagem só


Konnichiwa habitantes do Portal!! (>=<)// 
Finalmente consegui inspiração pro novo lay ( uhuuhl ~O~) não irei dizer o tema, mas vou adiantando que vai sr simples,fiquei na duvida entre três temas, mas já decidi que já vou deixar 2 deles prontos, daí não irei ter problema >.<
Vou começar a fazer as imagens para afiliados e tal ... Não sei se vai agradar e todos, mas okay...
Tinha falado da entrevista ontem neh?Pois então ainda vou preparar as perguntas e comunicar aos blogs pra ver se eles vão querer fazer.
Hoje trouxe um tuto que por muito tempo procurei como fazer e depois "descobri' e.e...Que é aquele que se usa uma imagem  e nela coloca todos os afiliados...
Primeiro vou ensinar como se divide a imagem, isso eu aprendi sozinha, quando dividi pra colocar no twitter, e é pelo Photoscape..
Antes de dividir a imagem, veja qual é o tamanho da sua sidebar para a foto não acabar ficando para fora.
1. Abra se photoscape (não brinca?!) e clique em divisor (X)
2. Abra sua imagem em adicionar e ajuste as larguras de acordo com sua imagem. (X)
3. Clique em divisão e as fotos divididas irão ficar salvas em uma pastas "output" (X)

Agora a opacidade :
No HTML do seu blog, procure por ]]></b:skin> e acima cole
.isa-opacity{margin-top: 0px;
opacity:1.0;
padding: 0px 0px 0px;
-webkit-transition-duration:.80s;
-moz-transition-duration:.80s;
-o-transition-duration:.80s;
border-radius: 0px;}
.isa-opacity:hover{opacity:0.6;
-webkit-transition-duration:.80s;
-moz-transition-duration:.80s;
-o-transition-duration:.80s;
}


Em um gadget Html cole :
<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="isa-opacity" src="URL DA IMAGEM" /></a>
De acordo com o numero de quadradinhos que a imagem foi dividida você ira usar um código acima para cada.No meu caso foi 9 quadradinho então repeti o código 9 vezes.Ainda no gadeget as imagens estrão assim (X) (X)

Juntando tudo

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 -4, mas acho que varia de tamanho da imagem, não sei então tem que ficar tentando até que se "grudem".


credits to : eu amo html

40 comentários:

  1. Yoo ~~
    Muito massa este tutorial <3>
    Gostei

    http://blog-meninasmalucas.blogspot.com.br/

    ResponderExcluir
  2. Eu acho lindo imagens para afiliados em uma imagem só >3<
    Se você tem muitos afiliados, isso ajuda X3
    Eu nunca cheguei a fazer um layout com afiliados assim, vou tentar u3u'

    Modern HTML

    ResponderExcluir
  3. Ótimo tutorial :3
    cr4zy-world.blogspot.com

    ResponderExcluir
  4. já vi esse efeito em tantos blogs, e nunca vi nenhum ensinando, fica tão bonitinho e diferente né? haushaus'beijos <3

    Irresistible Touch (~perfil~)

    ResponderExcluir
    Respostas
    1. Yep, eu sempre via, quando vi como fazer fiquei super happy e decidi repassar >.<

      Excluir
  5. Eu acho lindo esse efeito,pena que eu não consigo alinhar direito :c
    Desculpa ter sumido,estou sem tempo.Mas já voltei!

    Beijos,
    Welcome March
    Kawaii Things
    Perfect Dreams ~~ Novo ~~

    ResponderExcluir
    Respostas
    1. sem problemas cat >.<
      Mas tente alinhar ou qualquer coisa tamo aew O//

      Excluir
  6. Eu amo muito esse tutorial, ainda não usei, sempre esqueço T-T

    html-detected.blogspot.com.br

    ResponderExcluir
    Respostas
    1. shaushas save in favorites >.< ou sempre que estiver pensando em um novo lay, lembra dos afiliados shaushhua

      Excluir
  7. Ficaa perfeito, eu sempre quis fazer esse efeito, no próximo lay com certeza vou fazer e para ter certeza eu até salvei esse tutorial nos favoritos 3-3

    Cliquesnocapricho.blogspot.com

    ResponderExcluir
  8. Eu gosto tanto desse tutorial, dá elite desse jeito. Dá uma ar de originalidade ç.ç

    Kissus
    Prince Modern

    ResponderExcluir
  9. Já conhecia este tutorial! ^^ Acho que o resultado fica super adorável e criativo. Talvez use posteriormente! :D

    @Catching Stars

    ResponderExcluir
  10. Já conhecia acho ele bem útil e fofo já usei algumas vezes! Adorei a Preview :D

    Aceita Afiliação? Se aceita me avisa no primeiro Post!

    http://worldofthel.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou ^^
      Sory cat, mas por enquanto nao estou aceitando afiliação a te colocar o novo layout

      Excluir
  11. Adorei! *0* deixa um efeito super kawaii *--------* acho que ficaria diwo colocando duas imagens ~

    nya~ gomen ne pela ausência aqui >< estarei mais presente como afiliada :3

    ResponderExcluir
  12. Amei esse tuto, bem útil *---*
    - Catching Pandas

    ResponderExcluir
  13. Acho que fica bem interessante deixar os afiliados assim, mas nunca usei, amei o tutorial.
    Seguindo aqui, lindo Lay.

    >> blog-b-o-o.blogspot.com.br/
    #chu~

    ResponderExcluir
  14. Adorei esse modelo, muito legal e criativo ^^
    Já estou seguindo essa divesa aqui, se puder pode retribuir? ou me divulgar ? chata eu né ç.ç

    Beijos | empire-htmll.blogspot.com.br

    ResponderExcluir
  15. Ja comentei este post :
    Mas novamente eu digo . massa este tutu

    http://blog-meninasmalucas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. shuashuas thansk cat ^^

      Sim sim vc foi a primeira a comentar

      Excluir
  16. Oioi, adorei seu blog, estou começando o meu, e se puder divulgar, agradeço!

    http://garotavinte.blogspot.com.br/

    ResponderExcluir
  17. Amei o tutorial! Este blog me encantou, vou seguir com certeza!
    Por favo, será que vocês podem divulgar meu blog? É bem novinho!
    http://teenagethiings.blogspot.com.br/, muito obrigada pelo post!

    ResponderExcluir

-Yoo!!

Sem comentários Ofensivos.
Pedidos na ask
Elogios são sempre bem vindos
-Responderei a todo mundo...

(◕‿◕✿)  。◕‿◕。 ⊱✿◕‿◕✿⊰ (◡‿◡✿) (◕〝◕)


◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐