Personalizar cada gadget com um estilo diferente - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Personalizar cada gadget com um estilo diferente

Publicado em 15/01/2018

Personalizar cada gadget com um estilo diferente

Anos atrás eu mostrei aqui no blog como personalizar os títulos dos gadgets.
O tutorial funciona muito bem, tanto que estou postando este agora para incrementar o que ensinei anos atrás.
Hoje você vai aprender como personalizar cada gadget com um estilo diferente.
Vou te dar um exemplo:


Demonstração do tutorial


Como você viu o padrão dos títulos dos gadgets do meu blog de exemplo é fundo preto, fonte branca.
Mas em alguns gadgets eu quis dar um estilo diferente do padrão, mudando a cor de fundo, acrescentando bordas, usando uma faixinha, etc...

Claro que você não vai fazer em seu blog uma mistura tão grande assim de estilos e cores (ou vai, o blog é seu, você decide, não tem regra 😏) mas o ideal é personalizar um ou outro com estilo diferente, pra destacar mesmo.
Vem comigo, vou te mostrar como personalizar individualmente cada elemento de página e aí você decide se quer personalizar todos, só um, alguns, etc....


Como personalizar cada elemento de página do blog com um estilo diferente


Para começar você precisa definir qual (ou quais) gadget vai personalizar.
Definido isso precisará encontrar o ID desse gadget.
Faça assim: acesse o seu blog, vá até a aba Layout e clique em Editar abaixo do gadget que deseja personalizar.
A janela que abrir terá, no navegador, uma série alfa-numérica.
No final dela aparecerá o ID de seu gadget.
Se for, por exemplo, os posts mais vistos como eu escolhi no meu estará mais ou menos assim:


Achou o ID do gadget que deseja personalizar?
Então agora vá até a aba Tema e clique em Editar HTML.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO DE PERSONALIZAÇÃO que escolher.
Salve.

Copiar os códigos


Faça isso com todos os elementos de pagina que desejar personalizar com estilos diferentes do padrão de seu blog e salve.
Também é possível personalizar o fundo do widget, como nesse exemplo aqui:
Nesse caso o gadget não tem título, então eu destaquei o fundo com uma cor diferente dos demais, e coloquei sombra no box.

Importante:
Esses códigos de personalização que disponibilizei são apenas exemplos.
Você pode e deve personalizar do seu jeito, o importante é entender o conceito, compreende?

Por exemplo: dentro da tag h2 você pode mudar tudo que se refere ao título do gadget: cor, fonte, tamanho da fonte, arredondar as bordas do fundo do título, colocar ou não bordas, colocar essas bordas  na lateral direita, na lateral esquerda, no bottom, no top, e muito mais.

Entendendo os conceitos básicos o resto é testar até chegar ao que deseja.
Experimente, divirta-se, use meus códigos como base para seus experimentos e você verá quanta coisa legal dá pra fazer!


Brindes para você usar em seu blog


Abaixo deixo algumas faixinhas para você usar, caso opte por elas.

















Para baixar clique sobre cada imagem e salve em uma pasta no seu computador.
Note que cada uma tem seu próprio tamanho, então fique anteto quando for usar para editar certinho  a largura e a altura de cada faixinha, ok?
Créditos: Tumblr

Confira também:



Dica extra muito importante:
Caso você tenha aplicado em seu blog este tutorial:
Não esqueça de trocar h2 por h4 quando for personalizar os títulos dos gadgets, ok?





7 comentários

  1. Ótima dica, vou ver se consigo, pois às vezes vou fazer no meu seguindo todos os passos e no fim não dá certo, também, ainda sou iniciante, tenho muito o que aprender e essas dicas são valiosas demais.
    Beijos carinhosos!

    ResponderExcluir
  2. Oi Eliane! Venho procurando em seus tutoriais como personalizar minha sidebar. Gostaria de colocar fonte preta e fundo branco. Me apaixonei por um blog de teste seu deslumbrante que usou num post recente sobre carregamento de imagens que a barra lateral, um luxo! era bem clean, simples. Gosto do sidebar do Noele, mas quero testar outras coisas. Estes trechos mencionados nestes tutos são diferentes do que vejo no meu blog. Poderia me dar uma ajuda? grata.

    ResponderExcluir
    Respostas
    1. Regina, qual template está usando?
      Se for o Noelle procure por /* SIDEBAR E FOOTER
      Lá estão os comandos, na seção .sidebar .widget h2 {
      a cor de fundo é em background e a fonte muda pelo painel.
      Tem que mexer, ler o código, até achar onde deseja mudar :)

      Excluir
  3. Olá, adoro seu blog
    queria saber como você faz para listar as postagens na sua pagina inicial em caixas uma ao lado da outra, no meu blog fica uma de baixo da outra e assim desperdiça espaço, adoro suas dicas

    ResponderExcluir
    Respostas
    1. Aqui no blog há um tutorial que ensina um recurso semelhante.
      Procure por Tema Amora, tem o passo a passo e um tema para baixar :)

      Excluir
  4. Elaine estou apaixonada pelo blog desde que conheci comecei a usar um template seu (se n me falha memoria é o camille) infelizmente quando vou criar novas gadgets a moldurinhas dele não vem e eu ja tentei de tudo (inclusive esse tutorial para tentar aplicar) mas simplesmente não vai, uma pena pq terei que mudar o template e nao quero :c

    ResponderExcluir
  5. Amei, estou usando quase todos pra repaginar o meu blog, mas a barrinha do titulo do widget ficou muito grande, como diminuo a largura?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…