[pedido] ilustração alinhadinha na postagem


Oi amores do meu coração, vocês não sabem o quanto eu estou feliz com os elogios, sério, eu fiquei sorrindo que nem retardada a cada comentário que lia, obrigada do fundo do meu coração, vocês são demais <3. Muita, muitíssima gente pediu o tutorial de como fazer um layout pelo Photoshop e depois 'passa-lo para o Blogger', fiquem calmos que é super simples e não tem segredo, porém, eu não irei saber explicar perfeitamente, mas irei tentar, tudo bem? Aposto que apenas 10% das pessoas que visualizaram leram isso, então se você leu até aqui digite banana q. Hoje eu fui ver a lista da escola de quem caiu em qual sala, e eu cai apenas com 2 pessoas que eu conhecia :c O resto era tudo gente nova, mas tudo bem...
Que dia vai começar as aulas de vocês? Vocês já foram ver a lista? Com quem vocês caíram? -q Tá parei. Acho que não mais nada pra eu falar...Ah sim, faltam apenas 9 seguidores para a meta, muito obrigada *0*
Todo dia terei que ocupar dezessete linhas de todos os posts, quero ver da onde vou arranjar um assunto~

Finalmente, vamos a postagem: Ontem teve vários pedidos na ask, todos já estão praticamente "anotados" ,lá no cabeçalho vocês podem ver um quadradinho, tipo um status, viram? Lá tem os pedidos que irei realizar, mas não na ordem -q. Bom, o tutorial de hoje é de como deixar uma ilustração, por exemplo, da largura exata do seu blog, alinhada: Se você fazer uma ilustração da mesma largura dos posts de seu blog, ela não ficará alinhada, ficará saindo pra fora, não é? O tutorial ensina a alinhar. Caso você não entendeu, veja essa imagem. A primeira foto é a ilustração alinhada, e a segunda desalinhada. Vamos aprender? ♡♡


Observação: Não tem um tutorial exato, mas tem um modo com margins, e você precisa ir modificando até que se ajuste, mas vou explicar tudo certinho como funciona, e caso vocês não entenderem eu ajudo, ok?

Primeiramente, faça a sua ilustração. Sugiro que faça ela quase na medida dos posts, fica bem legal. Em seguida, você verá que ela ficou toda  desalinhada, não é? Agora, vá em seu HTML e cole esse código:
.post img {
margin-left: -10px;
margin-top: -10px;
margin-bottom: -10px; /*extra*/
}
É bem provável que ela ainda vai ficar desalinhada, pois esse código depende da largura de seu blog, da ilustração, etc. Então, você precisa modificar as margins até ficar tudo alinhadinho. Não entende as margins? Irei passar uma explicaçãozinha, talvez assim vocês entendam:

Margin-left: Como vocês viram, ele está em negativo (-10), então, quanto mais você aumenta esse número, mais a imagem vai para a esquerda, apenas se estiver no negativo, não retire-o, é melhor q. ~~~
Margin-top: Quanto mais você aumenta esse número ( mantendo o negativo - ) mais a imagem sobe. ~~~~
Margin-bottom: Vamos dizer que é uma coisa extra: Quanto mais você aumenta o número, o 'conteúdo' do post sobe, ou melhor, a escrita fica bem perto da imagem, e fica bem melhor, não fica aquele espaço feio.~

Espero que tenham entendido tudo certinho, caso contrário, 'me chame' na ask e aí eu posso modificar para você com todo prazer, mas caso queira apenas ajuda, peça por comentários ou pela ask mesmo. Beijos ♡♡

62 comentários:

  1. BANANA! Eu li tudo , viu ? HUASHUASHUASHUAS'
    Adorei , embora não sabia o tutorial. Mais já salvei aqui para usar no próximo layout. ♥

    Um beijo meu , Miih . <3
    Colorful Rainbow

    ResponderExcluir
    Respostas
    1. ASUHSAUHASUH fico feliz -q
      Awn, fico feliz que gostou <33

      Excluir
  2. Banana! Hehe' Não conhecia o Tutorial ainda, mas gostei!
    Beijos | Brigadeiro-vintage.blogspot.com

    ResponderExcluir
  3. Banana ~sou 10% rebola~. Se você olhar pelo lado bom, vais ser legal pra você fazer novas amizades, se não, muda de sala mulher. Eu sei que estou na turma ''B'', mas não sei quem está lá, só vou saber quando chegar, como vai ter gente da tarde lá ( povo da tarde tem fogo no rabo), se eu não gostar da minha turma eu nem entro, vou direto na diretoria pra me mudar, já até conversei com meus pais sobre isso. Ótimo tutorial >3<.

    {WHA}

    ResponderExcluir
    Respostas
    1. AUHSAUHSAUHASUH' Então, isso que pensei :3 Vishe, quem dera eles deixassem ç.ç
      Eu vi, mas nem prestei atenção ~típico da Heloísa, é sério que pode na sua escola? o.o Eike inveja ç.ç
      Obrigada <3

      Excluir
  4. O tutorial e muito útil!!!

    http://s2mysecretsmyworld.blogspot.com.br/

    ResponderExcluir
  5. Banana u_u HUEHE'
    Precisava muito deste tutorial e não conseguia achar, muitíssimo obrigada por postar! >3< Estou aguardando o post de como criar um layout em psd e passar para o blogger, tenho muita dificuldade com isso e você explica super bem, aposto que irei conseguir entender ^.^ /lerda

    Beijos ♥ ~
    http://crazyforhtml.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. UHEHUEUHE'
      Awn, imagina *--* Então, já estou preparando, tentando explicar da melhor forma e aí sim postar, acho que irei separar os posts em 3/5 "etapas" >3< Awn obrigada mesmo, mas eu explico tão mal, não me iluda D:

      Excluir
  6. Banana u.u Cara, você diva. E, sim, a Camila como é uma pessoa muito atrevida (só sabe falar da Camila, assim ela te tirar dos afiliados, Beatriz ¬¬) só postou os dois primeiros tutoriais e está MUITO explicado, então se você tiver preguiça, manda o pessoal tudo pra lá e só explica como codificar. Sério, ela passou a paleta até com a cor da voltinha da faixinha HUEHEUHEUHEUHEUHE
    O tutorial sambou (sambou k-pop, por quê não gosto de samba) com salto de 50 cm (aqui é outro lvl) nas bitches que plagiaram algo do seu blog ~le fala isso por quê não tem argumentos -q
    Beijos
    http://g-arota-insana.blogspot.com/

    ResponderExcluir
    Respostas
    1. UHEUHEUEU' Awn *u* Imagina, seja livre -n Ai, falando assim eu fico com medo de explicar errado ç.ç Masok, vou tentar q
      UHUHEUHEUH 50 cm é pros fortes q, resumindo, obrigada <33

      Excluir
  7. *uu* ja conhecia esse tuto é sempre bom relembrar ,
    Vou ver se uso no novo lay 0/


    ✖G² || Official ✝

    ResponderExcluir
  8. Banana u___u aheuheue
    Gente que layout divo *oooo* feito no photoshop? Perfeito mds ♥
    Já conhecia o tutorial, ficou bem explicado Helloh diva ♥
    Kiss
    With You || Imperfectous

    ResponderExcluir
    Respostas
    1. ASUHASUHASUH *u*
      Siim, awn obrigada Mandi <33
      Obrigada Mandi sambista ♥ q

      Excluir
  9. Banana -q. Minhas aulas começam só dia 10 de março #Xoramundo pois elas acabarem nesse mês,então acabaram de começar minhas férias \o/ (avá). Não sabia que tinha um tutorial pra alinhar a imagem,mas não to assustada porque hoje em dia tudo tem solução nessa imensa blogsfera hihi. Estou ansioserrima pro tutorial de layout pelo shop e depois codificar-lo,será que dessa vez eu aprendo? Dessa vez exagerei no tamanho do meu comentário né?

    Bye | e-leven-days.blogspot.com.br

    ResponderExcluir
    Respostas
    1. ASUHSAUHAS' Ai que inveja de você :c Ah sim ASUHSAUH'
      Ah eu não sei se tinha, me pediram e eu postei :33 ASUHASUH verdade q Aprende sim *0* Imagina ASUHSAUH' (Esse comentário ficou cheio de SAUSHAUH )

      Excluir
  10. Banana :3 Adorei o tutorial, ele é ótimo, fico feliz pelos pedidos na ask.

    Visite o blog | Etc For Me ♥

    ResponderExcluir
    Respostas
    1. ASUHASHU ♥ Obrigada, fico feliz que gostou *0*

      Excluir
  11. BANANA õ/ Não sei quando minhas aulas começam e nem vi a lista ainda. É que eu estou preste a me mudar de cidade, mas talvez só mude no meio do ano. Mas enfim, adorei o tutorial. Nunca pensei que fosse tão fácil assim. Tem gente que deixa ele alinhado na esquerda, mas mesmo assim não fica legal ://

    ~ Only Psd's

    ResponderExcluir
    Respostas
    1. \o ASUHASUH' Aah entendi :3
      Que bom que gostou ♥! Verdade ><

      Excluir
  12. Banana PKSAOSKAOPS Eu leio sempre tudo, é legal u-u
    Minhas aulas vão começar dia 3 e eu só vejo a lista no primeiro dia de aulas mesmo, queria poder ver agora :( askpaoks
    Amei o tutorial, odeio quando as imagens ficam assim, é uma bostita aspokaposkaosk Enfim, amei mesmo, favoritei ♡♥♡
    ~roubando os corações do post, bjaum u3u

    ResponderExcluir
    Respostas
    1. ASUHASUHAS verdade -qq
      Aaah :c Ano passadoi foi assim, esse ano não -tuts tuts-
      Socorro, bostita UHASUHASUHASUH que bom que gostou :3
      Roube a vontade -q

      Excluir
  13. bananan u-u
    hu3 ahsuahusha só duas pessoas? sério? eu estou com medo que isso também aconteça comigo, e o pior é que as listas na minha escola só irão sair no dia da volta as aulas, na próxima segunda, dia 27. Chore por mim.
    Oh sim, quando a ilustração fica assim é uma droga, adorei o tutorial *u*
    bjs

    breathingnewthings.blogspot.com

    ResponderExcluir
    Respostas
    1. ASUHSAUH'
      Pois é :c Mas eu conheço um pouquinho as outras pessoas...
      Espero que dê tudo certo ASUHSAUH chorando por você -q
      Que bom que gostou, e é verdade *u*

      Excluir
  14. Banana
    eu já passei por isso de ir para uma sala diferente só que no meu caso eu conhecia seis pessoas mas só tinha amizade com a minha sombra kkk
    Ótimo tutorial só que não uso larguinhas....
    mas se um dia vier a usar já sei onde ver um tuto para alinhar.

    Sarang Cute!

    ResponderExcluir
    Respostas
    1. AUHSAUH'
      Seis pessoas já é bem melhor :c q
      Obrigada! Ok <33

      Excluir
  15. Banana , li tudo viu ? ><
    Que bom que vai fazer esse tutorial , tipo estou precisando viu , haha.
    Minhas aulas só começam dia 3 , então acho que minha escola nem abriu ainda .-.
    Adorei o tutorial , bem útil e ja ja você chegam na sua meta u3u

    XOXO <3 || Senhorita Liberdade

    ResponderExcluir
    Respostas
    1. SAHUASUH awn fico feliz *o*
      Ah :/
      Fico feliz que gostou, e muito obrigada <3

      Excluir
  16. Banana q. Uma pena ter caído em uma sala na qual conhece somente duas pessoas =/ Eu caí em uma na qual conheço todo mundo, pois é a mesma turminha do ano passado, haha! :3

    Adorei o tutorial! Super bem explicado! Acho que conseguirias explicar perfeitamente bem o tuto do PS <3

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. SAUHSAUH' Aaah, ano passado foi assim comigo *3* Mas eu acabei querendo mudar completamente de sala mesmo, sabe? Enjoei daqueles seres ç.ç -qq

      Que bom *u* Muito obrigada <33

      Excluir
  17. banana banana banana banana kkkkkkkk c é doida Helo texte para ver quem esta lendo kkkkk gostei !!!!

    awn eu não gostaria de cair em uma sala com pessoas desconhecidas mais tudo bem com o tempo agente faz amizade !!

    não conhecia este tuto gostei muito !!

    kissu || {**}

    ResponderExcluir
    Respostas
    1. SUHSAUHASHU e o pior é que todo mundo leu, awn <33

      Ah, eu também acho, eu conhecia um pouco aquelas pessoas :3

      Que bom *3*

      Excluir
  18. Banana, nossa se não fosse as minhas amigas eu iria ficar louca numa sala que só tivesse gente nova.
    Agora o tutorial eu não conhecia, nunca tinha visto em nenhum blog, mas achei o máximo era o que eu precisava.

    Sweet of Cherry

    ResponderExcluir
    Respostas
    1. ASUHSAUH' Com a minha irmã foi assim :/
      Eu também não SUHSAUH não sei se eu inventei, mas acho que não...Fico feliz que gostou <3

      Excluir
  19. Banana' heuehueh'
    Eu ainda não comprei meus materiais, já estou nervosa, estou comprando muito tarde, mas sabe como é as mães, né? ehueheu'
    Minhas aulas começam dia 13, ainda não peguei a lista, nem pretendo pegar, porque eu já sei a maioria dos materiais que preciso...

    Ótimo tutorial, já vou aplicá-lo em meu bloguinho! ç.ç

    simplekawaii.blogspot.com

    Kiss | Danielle

    ResponderExcluir
    Respostas
    1. SAUHASHUA'
      Eu comprei 4 dias antes SAUHASHU q
      Entendi >3<

      Obrigada <33

      Excluir
  20. Bacana haha.
    Também fico rindo atoa com os lindos comentários no meu blog :D
    O tutorial é bem legal, adorei!
    Cate-land.blogspot.com

    ResponderExcluir
  21. Banana -q ainda não vi a lista, tenho que pegar a transferência da escola, minha mãe ta enrolando, quero só ver quando começar as aulas...
    Ótimo tuto ! adorei , você explica muito bem :3

    www.k-awaiicherry.blogspot.com

    ResponderExcluir
  22. Banana, me pergunto, por que banana? Ashuashua, sei como é, aí sempre tem aquela pessoa que pergunta: "por que tá rindo?" ashua. O tutorial é muito legal e útil.

    h-worlds.blogspot.com
    www.d-resources.net

    ResponderExcluir
    Respostas
    1. ASUHASUH sei lá, veio na cabeça q Pois é ç.ç
      Obrigada <3

      Excluir
  23. Gostei muito do Tutorial.... s2
    beijinhos
    http://antenadana-moda.blogspot.com.br/

    ResponderExcluir
  24. Parabéns pelos elogios *u* Você e seu blog merecem :333 Esse tutorial é muito útil, e fica tão bonitinho no post *-*

    ResponderExcluir
    Respostas
    1. Awwwn obrigada *0* Fico feliz que gostou ♥

      Excluir
  25. Tem como ver a lista de em que sala vai ficar Adorei o tutorial, tudo bem explicadinho >3<

    www.b-urning.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Sim ASUHASUHSAUH'
      Fico feliz que adorou e obrigada! <3

      Excluir
  26. Ótimo tutorial, ainda não tinha visto mas bem util ! hehe
    Gostaria muito que você retribuisse a visitinha e se pudesse seguir meu blog comente avisando que sigo de volta também, estou recomeçando meu blog do 0 e gostaria de sua ajuda, obrigada <3 Beijoss

    http://lotof-nothing.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada *u* Não sei se existe masok
      Permissão negada DD:

      Excluir
  27. Que fofo que esta aqui, apaixonei pelo layout!
    Já sabia fazer isso não é tão difícil quanto parece u-u, gostei do tutorial, você explica super direitinho.

    ♥ Abraços |  www.tutoriar.net

    ResponderExcluir
    Respostas
    1. Awwwn obrigada *33*
      Pois é AUHASUH obrigaaada <3

      Excluir
  28. Banana *ooo*
    Adorei o tutorial, nem conhecia @3@

    ResponderExcluir
  29. Só na minha escola que as turmas não mudam? Eles só vão acrescentando umas novas e tal, mas ainda se você quiser pode pedir para mudar haha. Eu não entendi muito bem essa coisa de alinhada HUAHAHUA sou meio antinha ehhe
    beijos
    sim senhorita (clique aqui ou no perfil)

    ResponderExcluir
    Respostas
    1. Na do meu amigo também :/ Ai que perfeito *u*
      HUEHUEUH assim, isso depende muito do tamanho da sua ilustração, se for quase do tamanho da postagem ela vai ir pra fora, e o tuto ajuda a ficar tudo alinhadinho ^.^ Imagina ASUHAS'

      Excluir
  30. BANANA ~Bate aqui colega \o/ Eu falei contigo no faceeeeee awe :333, bem , as minhas aulas começaram dia 21 eu acho -qq, eu tô feliz porque entrou um monte de gente na minha <3, todos eles são meus amigos, a minha melhor amiga agora é a Helena e o meu melhor amigo é o Victor (ele é loiro do olho azul, colega -qqqq) Bem, eu amo minha sala, o povo é muito zuadento, palhaços *uuuuuuu*. Tuto super util tia Elo <33 Amo *u*

    ~7-roses.blogspot.com.br

    ResponderExcluir
  31. BANANA!!!! Não conhecia esse tuto ^-^
    Bjs ♥ Jessica || desenhareblogar.blogspot.com

    ResponderExcluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!