personalizando cada gadget

vamos personalizar cada gadget? tipo um colorido o outro branco, um sem fundo e por ai vai ..  Que tal fazer isso? então vamos seguir os passos abaixo:

1-  Primeiro vamos adicionar um gadget em layout no seu blog, escolha um de texto que é melhor para esse teste, escreva um pequeno texto, e depois salve (Com o titulo).

2- agora, salve e depois vá em seu html e procure pelo nome do gadget que você fez (é por ele que vamos saber o Id para poder personalizar.

3- Bom o seu vai está tipo assim, (é claro que não vai está igual pois o nome é diferente mais a ordem vai está mais ou menos assim): 

  <b:widget id='Text1' locked='false' title='Texto escolhido' type='Text'>

o importante é que esteje na ordem o type também, é o tipo de gadget (tipo texto, javascript, image ...)

agora onde esta escrito: 

<b:widget id='Text1' o que está de vermelho retirando as aspas'' é o ID do seu gadget é por ele que vamos personalizar!

copie, edite e cole esse código acima de  /* Variable definitions

#ID DO GADGET AQUI {
background: #006400; /* background do fundo do gadget */
font-size: 20px; /* numero do tamanho do titulo do gadget  só mude o numero, não apague o PX! */
font-family: Comic sans ms; /* nome da fonte */
border: 2px solid #000000; /* borda apague se não quiser */
border-radius: 10px; /* bordas arredondadas, apague se não quiser */
}

Visualize o layout e veja se esta tudo certinho, se estiver salve, se não estiver você deve ter feito algo errado. E também tem como personalizar o titulo! é só acrescentar o código abaixo, abaixo do código que você acabou de colar:

# ID DO GADGET h2 { /* titulos não retire o h2 */
background: #000000; /* fundo dos titulos */
color: #ffffff; /* cor do titulo */
border-top: 2px solid #ffbbff; /* bordas no topo, se quiser em baixo troque top por bottom */
} 

agora você salva! e também tem como trocar o background de cor para imagem é só trocar background: #000000; por: background: url('LINK DA IMAGEM AQUI');  

bom por hoje é só!

beijos e até mais!

- QUEM FOR O PRIMEIRO A COMENTAR COM O CÓDIGO 001TUTORIAL GANHA DIVULGAÇÃO COM BANNER NO PRÓXIMO POST -