27 de dez de 2011

Gadgets com fundo colorido

Tumblr_lwujebww131qaodf4o1_500_large
Postagem atualizada dia 23/08/2013 às 21h07

Oi, gente! Eu ainda não acredito que fiquei uma semana sem postar nada. Essa semana simplesmente passou voando!, e, ah, lhes desejo um Feliz Natal super atrasado. E, atendendo à pedidos, vou ensiná-los como dividir os gadgets que nem daqui do blog, antes de começar só quero avisar que eu o aprendi ele visitando o blog da Karol, o Material Extra. Um tutorial super fácil, rápido, e super útil!

Primeiramente vá até Design > Editar HTML, procure (F3 ou Ctrl+F) por /* Widgets. Deverá aparecer um código mais ou menos igual a esse:
/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
Dentro das chaves, acrescente mais o código que divide a coluna, deixando a cor somente em cada gadget: background-color: #COR_HTML; não sabe que cor usar? Consulte a tabela de cores HTML. Deverá ficar da seguinte maneira:
/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
background-color: #COR_HTML;
}
 Visualize, e, se estiver tudo certo, salve!
Caso você não achar esae código, copie ele e cole acima de ]]</b:skin>. Espero ter ajudado a quem pediu e a quem estava procurando por esse tutorial! Beijos!
P.S.: Tem muita gente perguntando como divide a coluna da postagem, o modelo do Blogger que eu editei já veio assim, mas vou tentar fazer um tutorial pra vocês, ok?

46 comentários:

  1. Hum será perfeito para o novo lay do meu blog.
    Emily me desculpa por não ter vindo a tanto tempo aqui.
    Girl Teen - Pensamento sem fim

    ResponderExcluir
  2. Ai flor se você fizer o tutorial de como dividir os posts você vai me salvar!
    Tô fazer um lay e quero os posts assim!
    Esperando ansiosa por ele viu!
    Cute Bii

    ResponderExcluir
  3. Oi Emily...Você é uma fofa... Um anjo...òtimo tutorial...Assim que fizer o tutorial avisa...Bjs Fran.

    http://123make.blogspot.com/
    http://blogavidaeumacancao.blogspot.com/
    http://blog-juventude-renovada.blogspot.com/

    ResponderExcluir
  4. Flor, como se coloca o título dos gadgets igual ao seu?!
    Faz um tutorial pra gente!

    http://antigomoderno.blogspot.com

    ResponderExcluir
  5. Que demais esse tutorial. Com certeza vou tentar fazer em meu blog. O modelo que você usa é o Marca D'água né? Porque nele tem as postagens dividas, eu já usei. Ah, muito obrigada por me colocar nos afiliados e obrigada por colocar meu link nesse post. Tu é uma fofa!

    Beijos, onthefame.blogspot.com

    ResponderExcluir
  6. Poxa, tava precisando desse tutorial, mas achava que só dava pra fazer com usando um layout diferente, não sabia que dava dividir assim pelo html. Me ajudou muito seu tutorial, obrigada.

    Bjs, Rafa
    http://rafadeoliveira-tudosobrequalquercoisa.blogspot.com/

    ResponderExcluir
  7. [aaaaaaaaa]muito facil e fica lindo e diferente *---*
    obrigada por postar, nem tinha percebido q o ME tinha postado lah rsrs
    bjs

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  8. Amei o tutorial, vai me ajudar bastante :)

    Como se faz essa borda na imagem que ela fica parecendo uma fotografia?

    Beijosss

    http://queloucura-blog.blogspot.com

    ResponderExcluir
  9. Oi da uma passadinha no meu blog e commenta o post novo?Creio q vc vai gostar,hahahihihoho
    bejão,adoro aki,sucesso!
    http://blog-da-byaa.blogspot.com

    ResponderExcluir
  10. U.U
    Amei este tuto S2
    Amo os tutos daqui
    tô seguindo
    faz um tuto de como colocar a imagem da postagem dentro da caixinha e com legenda, igual a do seu blog .

    gpurple.blogspot.com

    ResponderExcluir
  11. Ai to ali em baixo de novo *-*
    rs ' , Tutorial ótimo , vou usar
    no meu blog de encomendas , (:

    Beijos, Duda !

    ResponderExcluir
  12. Mudei o design o meu blog da uma passadinha lá e comenta *-*

    http://extras-for-you.blogspot.com/

    ResponderExcluir
  13. Há! e eu consegui colocar sombra nos textos das postagens, só que eu que inventei o tutorial rsrs não achei em nenhum blog fucei tanto no HTML que achei!!!

    ResponderExcluir
  14. Amei, amei e amei! Talvez eu use no meu próximo layout. Êêê apareci nos links -dança- rsrs

    goimagines.blogspot.com

    ResponderExcluir
  15. Emily, se eu importar ou exportar meu blog para outra conta os meus seguidores vão em bora eu continuam ?

    ResponderExcluir
  16. Há!, eu consegui colocar sombra nos textos das postagens, mais não foi em nenhum blog não "foi de tanto fuçar no meu html" que eu consegui \O/

    ResponderExcluir
  17. Amei amei amei, muito obrigada por aqueles titulos do gadgets personalizados, aprendi a fazer meus proprios codigos com vc, vlw msm emily.

    http://cherrypink-juuh.blogspot.com/

    ResponderExcluir
  18. Oi Florzinha!
    seguindo... Será que você poderia retribuir?
    gostei muito do seu blog, parabéns!
    Beijo&Queijos

    http://chocoomel.blogspot.com/

    ResponderExcluir
  19. Bebê, o que aconteceu com o maratona de tutoriais? Acabou? Sem falar do design dele, aconteceu alguma coisa que deixou ele todo desconfigurado :s

    ResponderExcluir
  20. Eu adorei o tutorial, obrigada por fazer Emily.
    Fiquei tão feliz que você comentou no nosso blog, muito mesmo, obrigada mesmo!
    Seu blog como sempre, continua perfeito e o meu preferido!
    Tem um post novo, se quiser conferir.

    Beijos ;3
    meianoiteequinze.blogspot.com

    ResponderExcluir
  21. UHUUU A-M-E-I ♥

    http://mundinhomegamary.blogspot.com

    ResponderExcluir
  22. Tipo, queria saber mais ou menos como fez esse titulo do Gadget, é uma imagem, sei lá ?

    ResponderExcluir
  23. Oi fofa! MUITO OBRIGADA POR COMENTAR NO MEU BLOG!
    Agradeço de coração e ainda mais vindo de você uma postadora de uns dos meus blogs favoritos!
    E que legal que você gostou de lá.
    Agradeço novamente *--*
    Cute Bii

    ResponderExcluir
  24. EU AMEI, TAVA LOUCA QUERENDO SABER COMO FAZIA,! Emily faz um post com mtas fontes qe você gosta?

    blog-alldesigner.blogspot.com

    ResponderExcluir
  25. muito obrigada ^^
    vou tentar fazer no meu blog,se eu conseguir eu aviso ^^

    http://www.spaceyourfashion.blogspot.com/
    siga e comente que eu retribuo no seu blog ^^

    ResponderExcluir
  26. Este comentário foi removido pelo autor.

    ResponderExcluir
  27. Fica muito perfeito *-* Eu adoro hehe
    eeeeba, sai no post dnv hahaha *-*
    beijo,
    www.otherthingsattitudeincluded.blogspot.com

    ResponderExcluir
  28. AAH! Eu precisava! haha Quero ter um super lay em 2012, e seus tutos estão me ajudando bastante Emily! Vlw! haha Adorei! Beijão!

    http://girlsrepublic-s2.blogspot.com/

    ResponderExcluir
  29. OIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

    Parabéns pelo tutorial!

    Minha véspera de Natal também foi assim, mas eu até que gostei muito HJKGFHKGHFJ

    Bjonas! Fique com Deus <3

    ResponderExcluir
  30. Emily , tenho um presente para você .
    É só você ir até o meu blog que ele estará lá .
    http://fashion-thi.blogspot.com/

    ResponderExcluir
  31. Emily que show esse tutorial adorei , eu tava atrás menina , amiga posta também utilitários tipo aquelas faixas para banners , rs .
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  32. Tava procurando esse tutorial faz um bom tempo. E bom que não é tão difícil de fazer. E caso desse pra você explicar gostaria de saber o tutorial do título das suas gadgets!

    http://all-reserved.blogspot.com/

    ResponderExcluir
  33. Tutorial novo é sempre bom, mas esse novo lay do EPF está lindo mesmo hein ^^)

    Crazy Manic || Facebook || Twitter || Antenados

    ResponderExcluir
  34. Alice♥: Não vou nem responder teu comentário. x_x

    ResponderExcluir
  35. Emily, lá no designer do modelo, a gente deixa o gadget transparente, né?
    Girl Teen - Comenta? - Pensamento sem fim

    ResponderExcluir
  36. Oi, amei aqui, seguindo já quando puder da uma passadinha lá no meu blog também, e segui se gostar >.< http://1mundoteen.blogspot.com/

    ResponderExcluir
  37. Amei o tuto! Fica super cute *-*

    Se puder retribuir o comentário, agradeço! :*

    world-cutest.blogspot.com

    ResponderExcluir
  38. Oiii Emily, essa é a primeira vez que entro no seu blog, e já amei logo de cara. Votei em você no concurso do Menina Nerd, Cherry Bomb e Attitude Included!
    O conteúdo daqui é apaixonante e o layout uma fofura! Não pude deixar de segui-la! Ainda bem que faz tutoriais, adorei esse! Ah, seria uma honra vê-la no meu blog, e se gostar, seguir também! Beijos querida blogueira!

    Psiu, I Love You!

    ResponderExcluir
  39. Oii Flor, amei seu blog. Sigo já faz um tempo e falando sério sempre tive um pouco de vergonha de mandar um comentário dizendo 1001 motivos pra você passar no meu e retribuir! Agora tomei coragem e vim dizer que se tenho um bom blog hoje em dia é graças a você e a muitas outras blogueiras! Seu blog é maravilhoso assim como os tutoriais!
    E por fim gostaria de te dejasar um Feliz Ano-Novo e se você quiser (e puder claro) passar lá no meu blog, se gostar, segue também?
    Rosa Chiclete
    Kizuus ;P

    ResponderExcluir
  40. Vou usar no meu novo, lay Emily!!!! Obrigado por fazer esses tutoriais, ajudam demais.


    jeito-inedito.blogspot.com

    ResponderExcluir
  41. Participe do meu concurso"Bye 2011, Hey 2012", acesse o Laura5mais para maiores informações! swettystar.blogspot.com!

    ResponderExcluir
  42. Oiii adorei o tutorial, alias adoro todos!
    meu blog acho que eh baseado no seu, pq eu adoro isso aqui, muito praticos! parabens . aproposito, podemos fazer parceria?

    www.dantastrendy.blogspot.com

    ResponderExcluir
  43. Estava procurando esse tutorial!!!
    Próximo template ele vai estar presente!
    Beijinhos

    ResponderExcluir
  44. oie adorei a post muito legal sigam meu blog www.modernstyle7.blogspot.com

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.