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:
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.
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:
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?
Dias online
Postagens
comentários
Ó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.
ResponderExcluirBeijos carinhosos!
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.
ResponderExcluirRegina, qual template está usando?
ExcluirSe 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 :)
Olá, adoro seu blog
ResponderExcluirqueria 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
Aqui no blog há um tutorial que ensina um recurso semelhante.
ExcluirProcure por Tema Amora, tem o passo a passo e um tema para baixar :)
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
ResponderExcluirAmei, estou usando quase todos pra repaginar o meu blog, mas a barrinha do titulo do widget ficou muito grande, como diminuo a largura?
ResponderExcluir