Fundo diferente no primeiro gadget do blog

16 de jun de 2012

Hoy amores! Gostaram da surpresa? Eu particularmente gostei muito do novo layout, achei que ficou bem clean e diferente dos outros que tivemos aqui no GI. E vocês, o que acharam? :3

Desde o layout antigo, muitas meninas me perguntaram como fiz pro primeiro gadget ficar com um fundo diferente dos outros. Na minha opinião fica muito bonito pra diferenciar aquele gadget que você quer destacar. Aqui no blog uso sempre no gadget "sobre"  mas isso vai da opinião de cada um. Não vi esse tutorial em nenhum outro lugar, descobri fuçando, então, se usar, credite por favor!

Após aplicado, o resultado será semelhante a esse:


Reparem que apenas o primeiro gadget ficou com fundo branco, os outros ficaram com a cor que eu estabeleci no designer do modelo. 

Obs.: O resultado fica mais bonito se a cor da sidebar for transparente, ou, se os os gadgets forem separados (tutorial aqui).

Vá  em  Design > Editar HTML > Ctrl+F (na nova interface: Modelo > Editar HTML > Prosseguir > Ctrl+F) E procure por:  .sidebar .widget:first-child {
logo abaixo cole:

Se quiser com fundo colorido:
background: #fff; /* cor do fundo da caixa */
border-radius: 10px; /* bordas arredondas, apague a linha se não quiser */ 
Se quiser com imagem:
background: url('url da imagem') no-repeat;
Lembrando:
no-repeat: não repete
repeat: repete vertical e horizontal
repeat-y: repete vertical
repeat-x: repete horizontal

Você pode colocar fundo diferente também no ultimo gadget, pra isso procure por:
.sidebar .widget:last-child { e faça a mesma operação que fez para colocar no primeiro gadget.

E ai, gostaram do tuto? Comentem! Se usar não esqueça de creditar :3

Novidade no blog:
Agora temos opção de "responder" nos comentários, ou seja, vou conseguir responder mais rápido os comentários de vocês!

58 comentários:

  1. Uau! Ficou LINDO o novo layout do Go Imagine Anny!
    Ótimo tutorial, estou preparando um novo layout pro bem blog e esse tutorial será bem útil :D

    Bjs

    http://magicmih.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. obrigado linda <3 Que bom que gostou do tuto, to louca pra ver o novo lay do Magic :3

      Excluir
  2. Ai que layout mais lindo! Ficou bem clean e oganizado, amei <3

    ResponderExcluir
  3. Ameii! Vou usar com certeza! Anny o layout nova ficou maravilhoso! Beijos.

    Visita? http://returningtodarkness.blogspot.com/

    ResponderExcluir
  4. Nossa que layout L-I-N-D-O ta de parabéns Anny, e o tutorial super interessante tbm, Beijos.

    http://meninoironia.blogspot.com.br/

    ResponderExcluir
  5. Tuto d++ ! Pena que eu acabei de mudar o lay do blog , quero dizer , ainda mudando , estou consertando algumas coisas lá . Mas em fim , queria te perguntar uma coisa , se não for muito encomodo , como voce deixa o cabeçalho pegando a parte toda do blog ?

    http://delicadasederivados.blogspot.pt

    ResponderExcluir
    Respostas
    1. Ah é bem simples, na verdade é um background! Vou fazer um tutorial em breve (:

      Excluir
  6. Ficou perfeito o novo lay! Amei o tutorial tb *o* Beijos!

    http://dreamsofagirl-blog.blogspot.com/

    ResponderExcluir
  7. Awn, seu novo layout ficou muito lindo! O antigo fazia mais o meu estilo, mas esse ta uma fofura. Eu ainda não conhecia esse tutorial e, pelo que me parece, é bem interessante. Ah, e parabéns pelo seu talento, linda! Beijos, the-zombie-attack.blogspot.com

    ResponderExcluir
  8. Oi Anny amei tudo de novo no seu blg apesar de eu gostar mais do antigo mas este ficou muito lindo , meus parabéns espero que um dia você se torne a melhor blogueira de todos os tempos .
    Mil beijos - Carlos J.
    http://we-moustache.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. muito obrigado querido, desejo o mesmo pra ti :3

      Excluir
    2. Denada Anny acompanho o seu blog desde o ínicio amo muito ele .
      Neijitos - Carlos J.
      http://we-moustache.blogspot.com.br/

      Excluir
  9. Anny!! nunca vi o GI tão lindo!! *U* amei o tuto!!!!!!!!*U*
    Queria te perguntar se vc aceita parceria!
    Sou super fã do blog e sigo há séculos!!
    Beijoos, Vickie
    ---->www.chicletevioleta.blogspot.com.br
    ♥Parabéns pelo blog!

    ResponderExcluir
  10. Nossa me amarrei no novo Lay...ta mtu fofo!!!Adorei tdo aqui viu Parabens!!!

    ResponderExcluir
  11. Meeeeeu, o Go Imagine tá lindo demais *OO*
    fiquei de boca aberta quando vi.
    E vi que o fundo é o como o header...
    Sério, você se inspirou na minha ideia né? *-*

    me-and-myfriends.blogspot.com

    ResponderExcluir
  12. Nosssa!
    Amada como o GI tá divo!!
    amei d+ esse lay heim, vc arrasa!

    bjãooo

    ResponderExcluir
  13. Hoy ♥ tudo bem? AMEI o seu blog *-* Já estou seguindo* Podias tbm seguir o meu,sff? :) http://sweetlove-diiana.blogspot.pt/ Brigada,bjinhos linda*

    ResponderExcluir
  14. Muito lindo o novo layout, amei,amei, e pensei que fosse mais difícil esse tutorial rsrs :3
    http://themudancas.tk/

    ResponderExcluir
  15. Anny, o lay ficou lindo demais :) ficou clean e bem diferente!
    Estou dooida pra usar esse tutorial, mas acabei de fazer meu nov lay, pode conferir e dizer como ficou?

    Hannah -- Teenage Sky

    ResponderExcluir
  16. Lindo design, eu diria que é o melhor que o GI já teve :D E bacana o tuto!
    Plush Republic//OfficialTwitter

    ResponderExcluir
  17. Blog lindo. AMEI *-*!

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br/ (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  18. Mt bom o tutorial ! E A-M-E-I o novo layout ! ^^ Bjs, Stardolleiras

    ResponderExcluir
  19. Lindo o lay e funcionou muito bem no meu blog. Á propósito flor, qual o noem da sua fonte? Beijos s2
    http://bobaespoonja.blogspot.com.br/ (o blog está em reforma rs..)

    ResponderExcluir
  20. blog de merda blog lixo acessem o meu

    ResponderExcluir
    Respostas
    1. Então meu blog é de merda, igual a sua opinião? Porque não deixa o link do teu? Tem medo? Não dou a mínima pra anônimos, mostra a cara querida(o) :)

      Excluir
  21. Anny seu lay ficou lindíssimo!! Adorei as coles usadas.
    Gostei do tutorial!!

    Beijos!!
    http://infinitaeu.blogspot.com.br/

    ResponderExcluir
  22. Annyseu lay ficou maravilhosos agora aquele anonimo e a girl que disse nao ser ele é muito foda como tais pessoas tem cara de pau nao é? eu mesma nao autorizo anonimos no meu por causa dos chingamentos fica a dica flor adorei o clean fica mais fora do jeito que é costumado mais que saudade do antigo ai voce é perfeita!

    ResponderExcluir
  23. Adorei a postagem o tutorial é muito útil !
    Nossa amei o layout tbm ficou lindo ! As combinações de cores ficaram muito lindas !

    Bjos *-*
    http://duplinhateen.blogspot.com.br/

    ResponderExcluir
  24. Oi flor!
    Amei seu blog!
    Adorei o tutorial é muito util :P
    Seguindo.

    Bjs
    justgloss.blogspot.com

    ResponderExcluir
  25. Adorei o novo layout,está muito bonito. E gostei do tutorial, o primeiro gadget fica muito bonito se tiver cores diferentes dos demais.
    http://i-teenbr.net.tc

    ResponderExcluir
  26. AAAA finalmente! Estava a séculos a procura desse tutorial!!
    E novo Layout ficou liiindoooooo! Parabéns!
    Blog Menina Fashion

    Beijo ;*

    ResponderExcluir
  27. Awn, que legal!
    Me sinto importante agora por ter inspirado no seu design, sério *--*
    Eu deveria postar um tutorial sobre isso lá? o.o

    me-and-myfriends.blogspot.com

    ResponderExcluir
  28. Amei o novo Layout! E adorei o tuto também, retribui a visitinha?
    http://alanfelipej.blogspot.com.br

    ResponderExcluir
  29. Oii hein como fazer essa nuvem de Tags ??

    ResponderExcluir
  30. Otimo tutorial! O resultado fica lindoo! Amei o novo layout, já acompanhava aqui a algum tempo, mas nunca comentei o.O pois é haha! Está tudo muito perfeito!
    http://wronggirl-ann.blogspot.com.br

    ResponderExcluir
  31. Gostei do tutorial e amei o novo Lay.
    Muito lindo tudo aqui *--*
    Te achei sem querer e vou acompanhar sempre que der. Beijinhos

    http://our-teen-dream.blogspot.com.br/

    ResponderExcluir
  32. Adorei o tuto, sempre quis saber como se fazia isso ^^

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

    ResponderExcluir
  33. Ameeii demais o seu lay!!!!E o tuto é tudo-de-bom!
    Beijinhos!
    rosa-chocado.blogspot.com e go-html.blogspot.com

    ResponderExcluir
  34. AI Obrigada me ajudou bastante , nossa
    linda , que lay ? nhei divo de mais amei ele
    poderia postar um turial como personalizar a área do comentario ?
    Gostaria bastante já sou fã sigo aqui faz tem po seus tutos e dos reis
    aaa .kisses
    ----- http://smileretro.blogspot.com.br/

    ResponderExcluir
  35. Que layout LINDOOOOO!
    gostei do tuto <3
    http://balaio-sonhos.blogspot.com

    ResponderExcluir
  36. OI amei o lay novo e o tutorial :) Gostaria de saber como vc fez o seu menu houver no cabeçario, me chamou muita atenção! muito obrigada :)

    cherryinmay.blogspot.com.br

    ResponderExcluir
  37. Oii Anny, tudo bem?
    Também fiz isso em meu blog, valeu.
    Aceita afiliação?
    Abraços,
    waverlyplaceblogger.blogspot.com.br

    ResponderExcluir
  38. Oi de novo Anny! Então, eu fiz o post mas programei ele só pra amanhã, por que terça o blog faz sete meses, tals e eu acho que tinha que fazer um post nesse dia sabe. *--*
    E claaro que você pode repassar o tuto depois *-*

    me-and-myfriends.blogspot.com

    ResponderExcluir
  39. AAAA ,morri com esse layout *o* Ficou
    muito lindo.Arrasou Anny ! <3
    Amei o tutorial , sempre
    quis saber como fazia !
    Beijos
    letsdream-br.blogspot.com

    ResponderExcluir
  40. O lay ficou perfeito, nas férias vou fazer um lay novo pro MDD tb, talvez até mude o nome do blog, mas enfim. Lindooo *-* Mas como vc fezesse gadget marcadores?
    makedressesanddreams.blogspot.com

    ResponderExcluir
  41. Aah! Como eu queria ter a mesma criatividade que as sua em arrumar blogs, o meu lay é muito feio D: , tento arrumar e acabo bagunçando tudo D: .. E eu não to conseguindo deixar o Gadget transparente :( , já até tentei arrumar mais não consigo... Você não arruma layout's né ? :(

    tudobailarinas.blogspot.com

    ResponderExcluir
  42. Uau! Seu blog está lindíssimo.Parabéns viu? *-*
    E sobre o tutorial eu tava procurando algo assim e nunca achei obrigada por nos ensinar s2


    Go Belezando

    ResponderExcluir
  43. Deu só um probleminha..quando o gadget fica na caixa,o texto fica tipo querendo sair pro lado esquerdo :(

    ResponderExcluir
  44. adorei seeu post:
    http://mergulhada-nas-fotos.blogspot.com.br/

    ResponderExcluir
  45. Nossa! Ficou lindo, eu estou usando no meu blog http://worldoffbackgrounds.blogspot.com/ seu tutoriais estão sendo bem útil para nossa equipe, pois nós somos iniciantes rsrs Obrigada

    ResponderExcluir
  46. anny me ajude pf, cuando eu procuro no CRL+F .sidebar .widget:first-child { ele ñ consegue achar.

    me ajude pf

    ResponderExcluir
  47. Uso e fica muito legal se for na mesma cor do fundo *-*

    http://garotasederivados.blogspot.com.br/

    ResponderExcluir
  48. Olaaa adorei o seu lay e tbm o post, por isso vou reblogar mais darei os devidos creditos ok!!!

    bjus
    www.primauad.blogspot.com

    ResponderExcluir
  49. Awwn, adorei o novo layout! Já conhecia o tutorial, mas é sempre bom deixar escritinho aqui, acho muito útil!

    Kissus -Pincelando o Céu-|Perfil

    ResponderExcluir
  50. Adorei o post, mas qual é a fonte que você usou pra escrever o titulo do gadget?

    ResponderExcluir
  51. Oieee, eu tentei fazer no meu blog só que não deu... oq é será? pode me ajudar? desde já obrigado

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.