março 06, 2011

Tutorial - Colocar fundo em titulos do gadget

Para colocar um fundo ou uma imagem no titulo do seu gadget
é bem simples, vá em Design > Editar HTML > Ctrl + F > e procure por
/* Headings deve aparecer assim:

/* Headings
----------------------------------------------- */
mais a baixo você deve encontrar
.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .7em;
}
 Antes de fechar a chave coloque:
  background-image: url(URL DA SUA IMAGEM);
  background-position: center;
Deve ficar assim:
.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .7em;
  background-image: url(URL DA IMAGEM);
  background-position: center;
}
Em roxo coloque o url da sua imagem e Pronto, caso
não queira colocar imagem apenas uma cor de fundo troque
background-image: url(URL DA IMAGEM); por background: #000000;
duvidas com as cores? use a Tabela.
Tutorial testado apenas no modelo travel (viagem do blogger)

39 comentários:

  1. Oii ^-^
    Visita meu blog, ahh e se gostar segue: hey-luuh.blogspot.com

    Eu posto no Garota-tagarela.blogspot.com e fiz um post indicando blogs e você era um deles *-* Beijos ;* HeyLuuh

    ResponderExcluir
  2. E como eu faço para a muda a fonte ? Consegui colocar imagem, mas não consegui troca a fonte :/

    ResponderExcluir
  3. Dica maravilhosa,eu ri muito quando vi seu 'status' kkkk si sentindo?kkkkk adoro essas coisas bobinhas [:
    http://justdreams-ana.blogspot.com/

    ResponderExcluir
  4. #HeyLuuh: ook flor.

    #Geiziane: a fonte? você não quis dizer formato da data? vá em Configurações > Formatação > Formato da data. E pronto ve como fica melhor.

    #Ana: ahaha, obrigada ;pp

    ResponderExcluir
  5. Olá, sou do blog "About Young" e gostaria de uma parceria com o "Material Extra".
    Passa lá, se aceitar, já pega o link-me que eu farei o mesmo.
    Obrigado ^^

    ResponderExcluir
  6. A fonte que estou dizendo, é a fonte do título do do gadget. A fonte atual que ta é Arial e ja tentei muda no Html e no Designer do blog e não consegui :/

    ResponderExcluir
  7. Consegui florzinha. Obrigada pela dica \o/

    ResponderExcluir
  8. Ajudou muito *-*
    Como põe seus coment's destacados?

    thesweetfrozen.blogspot.com
    hey-luuh.blogspot.com

    ResponderExcluir
  9. eu ainda ñ entendi pode esplicar de uma forma mas facil

    ResponderExcluir
  10. essa é a mais fácil flor, não tem como te explicar de outra forma, se poder me dizer no que você não consegue ..

    ResponderExcluir
  11. fiz no meu segundo blog e agora estou fazendo no primeiro e vou fazer no layout por encomenda *--* é muito divo!

    ResponderExcluir
  12. olha só eu não encontrei esse /* Headings expandi o modelo e td e nada,sos!!!!

    ResponderExcluir
  13. #Brenda: que bom flor.

    #Jo: hmm :s qual o seu modelo flor?
    mas de qualquer jeito era para ter aparecido.

    ResponderExcluir
  14. Meu modelo é do próprio blogger e é esse "simples",fiz o outro tutorial seu que diz pra colok imagen ou cor no titulo das postagens e deu certo mais mudar a cor da data e dos gadgets não foiii :/ pq ñ achei esse bentido...aiaiaiai
    BjoO flor!!

    ResponderExcluir
  15. Nossa, eu consegui não colocar fundo na data, me senti KKK!
    é só não colocar a parte h2.date-header {background-color: #000000 ; none. :F

    ResponderExcluir
  16. Oieee,eu fiz esse tuto,mais não ficou cono o seu a imagem inteira de cima pra baixo sabe,só ficou nos titulos dos gadgets e nas datas,como faço pra ficar igual o seu??

    ResponderExcluir
  17. O meu não deu!
    Sempre que tento não adianta!

    ResponderExcluir
  18. Parabéns para quem conseguiu, não é difícil gente, e em relação ao modelo, isso é relativo, mas vou ver quem não conseguiu e tentar ajudar ok meninas ^^ beijos

    ResponderExcluir
  19. Oii! eu queria saber se tem como colocar a imagem só nos títulos do garget! tem como?
    http://by-my-sefl.blogspot.com

    ResponderExcluir
  20. tem sim flor, eu refiz esse post agora esta pronto ^^

    ResponderExcluir
  21. MUITO ÚTIL, AMEI AMEI AMEI <3

    ResponderExcluir
  22. nossa obrigada pela dica me ajudou muuuito
    http://fearlessstyleofgirls.blogspot.com/

    ResponderExcluir
  23. ai pra quem o codigo estva assim

    /* Headings
    ----------------------------------------------- */
    h2 {
    font: $(widget.title.font);
    color: $(widget.title.text.color);
    }

    apague tudo depois do -------...
    e cole o codigo a seguir

    .footer-inner .widget h2,
    .sidebar .widget h2 {
    padding-bottom: .7em;
    background-image: url(URL DA IMAGEM);
    background-position: center;
    font-size: 11px;
    text-align: center;
    }

    q tenso sou o único garoto aki acessem meu blog
    http://romsxp.blogspot.com/

    ResponderExcluir
  24. Mto bom, como faço para deixar as pontas arredondadas?

    ResponderExcluir
  25. Upgrade Films: Entre neste site http://border-radius.com/ ajuste os valores que quiser e copie o código e cole dentro das chaves.

    ResponderExcluir
  26. hey queria saber onde que fica porque j procurei no meu em html so achei o headings os outros não o que fasso?flor?

    ResponderExcluir
  27. oi sua dica me ajudou muito no meu novo blog amei, seu blog tambem e maravilhoso parabens
    http://girlteen-perfect.blogspot.com.br/

    ResponderExcluir
  28. no meu ele foi para as datas

    Beijos

    jademarlla.tk

    ResponderExcluir
  29. Opa,boa tarde,Sou da equipe detive-particular.com Olha eu aqui denovo,blog muito bom,sempre que dá passo por aqui,continua postando ai,quero ver isso aqui cada vez melhor,alguem ai sabe desse site http://www.rastreadorgps.org/ ? to querendo saber se é bom,dizem que rastrea carro,moto,pessoas até...alguem ja ouvir falar?abraços,bom trabalho ai com o blog que ta fera!

    ResponderExcluir
  30. Eu tentei fazer,mas o meu ficou repetindo a imagem em horizontal, e também cortou a parte de cima!!! Ajuda? bjs.

    ResponderExcluir
    Respostas
    1. Coloca dentro das chaves:
      background-repeat:no-repeat;

      deve funcionar assim,ok? beijus

      Excluir
  31. adorei o tuto!!
    http://distractionsofaagirl-oficial.blogspot.com.br/

    ResponderExcluir