07/06/2012

Personalize o título dos Gadgets

Ola gente, tudo bom? A pedidos da Luana (www) hoje eu trago um Tutorial ~~um não, vários~~ para que vocês possam personalizar o Título dos Gadgets ok? Alguns tutoriais foram criados por mim, outros eu encontrei na Net, todos estão com os créditos!
Se usarem um dos Tutoriais abaixo, por favor, deem os devidos créditos ao Blog certo? Então... Vamos começar?

Fundo colorido igual o do POM
Sabe esse fundo verde que está por trás de cada título dos Gadegets aqui no POM? Ensinarei agora como deixá-lo desse jeitinho, o Tutorial é bem fácil!
Na página de Editar HTML do seu Modelo, clique em Ctrl + F e procure por: .footer-inner .widget h2
Quando achar o código acima, cole em baixo esse código com suas devidas personalizações:


.footer-inner .widget h2,  .sidebar .widget h2 { text-align: center; background: #3CB371 /** Cor do fundo **/; color: #fff /** Cor do título **/; font-size:22px /** Tamanho da fonte **/; margin-top:-15px;margin-left:-15px; margin-bottom:10px;  padding:2px /* regule de acordo com a largura da sua Sidebar */; width:111% /* regule também aqui de acordo com a largura da sua sidebar*/; overflow:hidden }
Linha pontilhada abaixo do Título
Para deixar uma linha pontilhada embaixo do título, vá em Desgin, Editar HTML, Ctrl+F e procure por: h2 { 
Você irá encontrar algo parecido com isso:

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
Antes de fechar a chave } cole o código abaixo:
border-bottom:1px dashed;
Imagem base de fundo (www)
Para deixar uma imagem base de fundo para todas as vezes que você criar um Gadget Vá em Design, Editar HTML, dê Ctrl+F e procure por: .sidebar .widget h2 {
Assim que encontrar, cole abaixo esse código fazendo as devidas alterações:
background: url(URL DA SUA IMAGEM);
 Imagem diferente para cada título de Gadget (www)
Agora, se você quer colocar uma imagem diferente para cada título vá em Design, Editar HTML, Clique em Expandir Modelos de Widgets e procure pelo nome de cada Gadget (por exemplo: "O Blogueiro". Você encontrará algo parecido com isso:
<b:section-contents id='sidebar-left-1'>
<b:widget id='HTML5' locked='false' title='O Blogueiro&apos;' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
Substitua o que está em Amarelo pelo código abaixo:
<img src="URL-DA-SUA-IMAGEM"/>
E por último, é claro, substitua o que está de verde pela URL da sua imagem .


Espero que tenham gostado dos Tutoriais! Se usarem algum, creditem ok? Beijinhos e Até...

28 comentários:

  1. Fica super legal, com o fundo colorido! Adorei ^^

    Beijos :*
    http://sweet-flower-laura.blogspot.com.br/
    Visite !!

    ResponderExcluir
  2. post completo e cheio de opções amei! e tudo bem explicado! :)
    http://kelly-club.blogspot.com.br

    ResponderExcluir
  3. ahh, adorei! quando eu usava um diferente em cada, eu criava cada um, aí colocava em imagem e ai eu colocava em cima do gadget. Acho que não deu pra entender o que eu disse HAHAHAHAH mas tudo bem, acho.

    blog-anothergirl.blogspot.com

    ResponderExcluir
  4. São muito legais esses tutos, mas eu personalizo eles de outro jeito, sabe? Com outro tuto.

    Beijos, Gabby. 4Brownies ♥

    ResponderExcluir
  5. Amei o tutorial Alex, é tudo muito útil, muito bem explicado! Adorei aqui,seu blog é ótimo,você escreve muito bem.Estou seguindo aqui pela conta do google,se puder poderia seguir o meu? Mas é só se puder e gostar tá linda? E se puder participa do concurso que está rolando lá?

    Concurso
    Blog

    ResponderExcluir
  6. Ain,, Ameei alex!
    Queria saber se você ainda tem aquele lay free, que era o antigo lay do Amora Azeda!! bjs

    ResponderExcluir
  7. hm!!!!! kk, quero veer!
    hauhsuhahs, por inquanto vou ficar com aquele C>3 bjss!
    the-scene-one.tk

    ResponderExcluir
  8. Ameii os tuto's *----*
    Obrigada pela visita no CCC,
    volte sempree :)

    http://fanideisi.blogspot.com.br

    ResponderExcluir
  9. ahan! vou fazer, beijos e valeu pela dica!! estou muito feliz, consegui o Amora Azeda de volta! Atravez de um tutorial no Youtube!! ainda consegui com uma parte das postagens!! bjs
    the-scene-one.tk

    ResponderExcluir
  10. Os tutoriais são ótimos! Todos bem explicadinhos e super úteis. Gadgets personalizados são lindos :)
    Beijos

    blogmodaonline.blogspot.com

    ResponderExcluir
  11. *----* Tava procurando esse tutorial há séculos!!! *------* achei kkk

    www.porenseetcs.blogspot.com

    ResponderExcluir
  12. Muito bom..
    http://imaginesooficial.blogspot.com.br/

    ResponderExcluir
  13. Fica bem legal mesmo,adorei!

    caprichadasbr.blogspot.com.br

    ResponderExcluir
  14. Desculpe por não ter mudado o link, já mudei!
    Beijos;*

    http://girlonlline.blogspot.com.br

    ResponderExcluir
  15. Até favoritei sabe pra não perde, primeiro blog que eu acho esse tutorial eu ficava que nem louca procurando <3

    beijão
    http://garotamuitotimida.blogspot.com.br

    ResponderExcluir
  16. Adorei os tutorias :D

    bjs

    ResponderExcluir
  17. Se o tempo acha que eu deve voltar, é isso que vou fazer e ponto final.

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

    ResponderExcluir
  18. Muito obrigada pelo tuto! Já coloquei no meu novo template!
    vidademenina.tk

    ResponderExcluir
  19. muito bom! adorei, tem alguns tipos diferentespara títulos de gadget, mas esse também é muito bom *-*

    http://thislovinggirl.blogspot.com/

    ResponderExcluir
  20. Já começaram as votações para o concurso!

    http://docinho-pink.blogspot.com.br/

    ResponderExcluir
  21. Ameii as dicas...
    lifeonalin.blogspot.com.br

    ResponderExcluir
  22. Oi... eu soube agora o que aconteceu com o CCT, sinto muito ,mais olha não se deixa abater por essas pessoas invejosas que não sabem ver outros blogs fazendo sucesso. Quero dizer que pode contar comigo e com o meu blog. Tudo de bom pra você.Bjos

    http://renata-diariodeumaadolecente.blogspot.com.br/

    ResponderExcluir
  23. Pode não parecer mas esse é um dos melhores tutoriais porque dá uma personalizada no blog, afinal cada detalhe conta :)

    docequintafeira.blogspot.com

    ResponderExcluir
  24. Parceiro estou adorando seus tutoriais *-* Parabéns por voltar com o blog e com a força toda.

    Beijos,
    Monique <3
    http://www.secretsofalittlegirl.com/

    ResponderExcluir
  25. Alez meu fofo *o*, meu querido!!
    haush' queria perguntar a você se você cobra para fazer um lay para o Amora Azeda!! Queria um novo *o* Beem cheguei!!!! bjs
    amoraazeda.blogspot.com

    ResponderExcluir
  26. achei eles lindos sempre é bom mudar e inovar

    ResponderExcluir
  27. e a sombra nas paginas ? muitos blogs tão usando isso u-u

    ResponderExcluir
  28. Alex, me ajudou muito com esses tutoriais! Já estou usando uma imagem base de fundo como voce ensinou. Obrigada ^^

    Beijos
    Candy Blast

    ResponderExcluir