Como personalizar Cada Gadget Separadamente

Oi pessoal

Como vocês tão? Tomara que todos estejam bem ^^ . Eu estou super empolgado para o Ano novo , sempre curto ir ver os fogos *-* . Mudando de assunto , hoje eu to trazendo um tutorial de como personalizar cada Gadget separadamente , sim isto é possível. Aqui no blog também tem uns Gadgets separados , porém eu não mudo a cor de fundo , só alguns detalhes.

Lembrando que para fazer este tutorial , tem que ter alguma noção de CSS , pois quem vai adicionar os códigos são vocês

Esse tutorial permite criar menus , e fazer as maiores personalizações. Só depende de quem estará desenvolvendo. Sem mais enrolações vamos lá ! Para podermos personalizar cada Gadget de forma separada, é preciso o ID dele.

Para conseguirmos o ID vão em Modelo > Editar HTML pressione as teclas Ctrl + F e digite o nome do seu gadget na caixa de pesquisa. Se o seu Gadget não tiver nome , coloque um só para ter o ID . Vocês irão encontrar um código assim :

<b:widget id='ID DO GADGET' locked='false' title='NOME DO GADGET' type='Label'>

Aonde está escrito 'Id do Gadget' é o ID que precisamos , e em 'Nome do Gadget' é o nome dele que vocês colocaram , o título no caso. Por exemplo , se eu quisesse personalizar o Gadget Marcadores , que aqui no blog eu coloco o título como 'Categorias' eu teria que digitar Categorias na caixa de pesquisa , e encontraria isto :

<b:widget id='Label1' locked='false' title='Categorias' type='Label'>

Acho que ficou bem explicado , qualquer dúvida é só comentar.
Agora para poder personalizar o Gadget , procure por : ]]></b:skin> . E acima dele cole isto :

#ID Do Gadget {
( Texto da personalização)
}
#ID do Gadget h2 {
/* Personalização do título do Gadget */
font-family: Bebas Neue; /*Fonte do título do Gadget Separado*/
color : #000 /*Cor do título do Gadget Separado*/
font-size: 20px; /* Tamanho do título do Gadget Separado */
}
#ID do Gadget:hover {
/* Efeito Hover , se não quiser apague esta última parte */
}

As devidas explicações estão no código. Quem não quiser o hover tem que apagar desde de #Nome do Gadget:hover { até a chavinha.

Bom gente este foi o tutorial , espero ter ajudado vocês ! Qualquer dúvida é só comentar , abraços Até o próximo post