02/07/2015

PERSONALIZANDO CADA GADGET DE FORMA DIFERENTE

......
Bom, já aviso que vou ensinar o básico. Vocês que com o tempo irão aperfeiçoar o código, como eu fiz no meu blog. Esse tutorial foi feito pelo blog Cherry Bomb, mas o código foi adaptado por mim, então se for repassar, dê os devidos creditos ao Cherry e ao Illustrarte.

Primeiro vamos procurar o gadget que queremos mudar. Vá em MODELO > EDITAR HTML e procure pelo nome que você deu ao seu gadget. No meu código, vou procurar (ctrl+ f) pelo gadget com o nome de Blog Info


Bom, temos duas coisas destacadas. O primeiro é o ID do gadget e o segundo é o nome do gadget. Sempre que você quiser mudar um gadget, procure pelo nome dele para achar seu ID.
Usaremos somente o ID do gadget, nesse caso o HTML7.
Agora copie o código abaixo:


#ID-DO-GADGET h2 { /*Título do gadget transparente*/
Font-family: Raleway;
font-size: 18px;
padding-left: 70px;
background: transparent;
font-weight:800;
color:#transparent;}

#ID-DO-GADGET .widget-content {
width: auto;
background: url("link da imagem de fundo");
color: #5C5C5C;
padding: 15px;
height: 378px;
padding-top: 80px;
padding-left: 28px;
margin-bottom: 50px;
margin-top: 0px;
overflow: hidden;
}

No lugar de ID-DO-GADGET, cole o ID do gadget que você quer. Se fosse baseado na ultima imagem, colaria HTML7.
OBS.: Esse tutorial serve perfeitamente para o meu código, não garanto que fique perfeito com outros códigos.

Tutorial feito por,
Letícia Persi

Um comentário: