Background nos marcadores do blog

11/09/2012

Tumblr_ma219gf1o21rfqxfqo1_500_large

No tutorial de hoje, vou ensinar á colocar imagem como background nos marcadores do blog, já que alguns leitores estavam pedindo. Recomendo que coloquem os marcadores em Cloud. O resultado será mais ou menos esse:


1) Vá no Painel do Blogger > Modelo > Editar HTML > Ctrl + F e procure por:

/* Header

2) Cole o código abaixo depois dele:

#Label1 {
font-size: 13px;
line-height: 12px;
margin-left: 0px;
background: #ffffff url(' url da imagem') no-repeat left top;
}
#Label1 .widget-content {
padding: 50px 10px 10px 10px;
margin: 0;
color: #696969;
}

  • Parte destacada em azul: cor do background (a mesma da imagem).

Fiz algumas imagens para vocês, se quiserem fazer uma, recomendo que usem como base as imagens abaixo, pois já estão com o tamanho certo.

cor: #f9e4ef

cor: #e4e6f9

cor: #f9f8e4

Se não der certo, tentem esse tutorial. Espero que tenham gostado!

18 comentários:

  1. É disso q eu precisava, rs
    Vou tentar qdo tiver um tmepinho.
    Boa semana. bj
    by: Veve Pink
    Portal Pattys

    ResponderExcluir
  2. OMG, que lindas as imagens que você fez *3* acho que vou usar ^^

    desenrola-official.blogspot.com

    ResponderExcluir
  3. Adorei, não sabia desse truque! No próximo design vou usar!

    Beijos,
    Paraisodemenina(.blogspot.com)

    ResponderExcluir
  4. Adorei o tutorial! Salvei nos favoritos :)

    Beijos
    http://www.deliriosdegarota.com/

    ResponderExcluir
  5. A plataforma do meu blog é em wordpress, so ... rs
    Mas ótimo tutorial!
    Bj

    ResponderExcluir
  6. Acho lindo esse efeito, amei os backgrounds que você fez, ficou muito divo!!

    Beijos!
    Garota Vertigem

    ResponderExcluir
  7. Adorei a dica. Fica bem mais bonito e organizado assim!

    Beijos

    Jéssica
    Fashion Jacket

    ResponderExcluir
  8. Que tutorial ótimo hein! Muitas meninas realmente precisavam disso! Obrigada por ele, e, sucesso! ^^

    Beijinhos,
    http://indypimenta.blogspot.com.br/

    ResponderExcluir
  9. vou fazer, fica lindo *0*
    bjs

    http://crazyggirls.tk/

    ResponderExcluir
  10. Eu já conhecia o tuto ^^
    Flor, fazia acho que uns dois dias que não visitava o Place, e quando entro, o que vejo o banner do meu blog, na barra lateral, quase pirei de emoção, até to chorando :)
    http://s2hay. blogspot.com

    ResponderExcluir
  11. que lindo que fica! No meu próximo layout vou testá-lo!
    boa semana
    ;*
    Red Behavior

    ResponderExcluir
  12. Quando eu comecei ai a mexer no layout do blog passava horas e horas buscando tutoriais, e no fim nada dava certo e eu ficava muito brava, desapontada heuheueheuh… agora toda vez que vezo um tutorial lembro das minhas noites em claro pesquisando e tentando.

    O bom do seu que é bem facinho e dá um super efeito *____*


    Con amore, Donna Yellow ♥

    maybe yellow store

    ResponderExcluir
  13. Perai só um pouquinho que eu vou gritar AAAHHHHHHH!!!! Que tutorial PERFEITO, ainda não tinha visto em nenhum blog e fica lindo demais :)

    tudyteen*blogspot*com

    Troque os * por ponto ;)

    ResponderExcluir
  14. Que dica maravilhosa! Adoro tutoriais de html pra customização de blog!
    Bjs

    www.sweetbleeding.blogspot.com

    ResponderExcluir
  15. Amei o tutorial e já estou usando do meu blog novo *-*

    http://perspective-teen.blogspot.com.br/

    ResponderExcluir