Personalizar cada gadget com um estilo diferente - * Blog Elaine Gaspareto *

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?





1 comentários via Blogger
comentários via Facebook

Um comentário:

  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

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.
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…