Ribbons determinados em cada gadget

Ohayooo pessoal da madrugada, venho trazer um tutorial rapidinho antes de mim ir dormi, mentira vou ver anime. Mas em pedido de uma nova blogueira quis fazer isso rapidinho, ela pediu para divulgar o nome do blog dela ainda bububu...mas em pedido de Melissa irei mostrar como colocar ribbons (faixinhas) em determinados gadgets. Ou seja, colocar faixinhas diferentes em cada gadget do blog, podendo colocar imagens diferente ou aquelas numeras. Não deu para tirar um print e nem colocar em blog de amostra, mas irei colocar o endereço do demo do meu novo layout assim que eu o terminar.

Eu já tinha um tutorial similar, mas eu apenas mostrei como modificar a cor, formato e fonte de cada gadget. Caso queiram ver aqui esta. Mas vamos ao tutorial agora, né?

Antes de tudo quero lembrar que você tem que fazer um ribbon (faixa) para cada gadget.
Vá ate seu HTML e procure pelo título de seu gadget. Um exemplo, o título do seu gadget e "Wellcome" então pegue esse nome e usando o atalho Ctrl+F procure por ele. Você encontrara algo similar a isso:

Códigos

<b:widget id='HTML1' locked='false' title='Wellcome' type='HTML'/>

A parte que destaquei em negrito é a ID e em itálico é o nome do seu gadget. Lembrando que em determinados gadgets os IDs são diferentes, quando é de imagem entra apalavra 'Image1' quando é seguidores entra 'Followers1' e por ai vai. Mas agora copie o ID de seu gadget e separe ele, então procure por ]]></b:skin>, e acima dele adicione esse código:

Códigos

#IDDOGADGET h2 { background: url('URL DE SUA FAIXA') no-repeat; color: transparent; width: 310px; height: 55px; margin-top: -10px; margin-left: -25px; float:left; }

Onde esta IDDOGADGET coloque o ID que pegou antes, onde esta "url de sua faixa", basta colocar o link de sua faixinha. As medidas já estão certinhas para um gadget tamanho padrão, mas caso  mais para cima ou para baixo basta meche nas partes em itálico. Então salve e vamos para o próximo passo.

Ainda dentro de seu HTML, procure pelo trechinho abaixo:

.sidebar .widget {

Dependendo do modelo que você  usa vai desta forma:

Códigos

.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

Então apague toda ela e coloque este no lugar:

Códigos

.sidebar .widget {
background: #fff;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-top: 5px;
margin: 30px 0;
 }

O modelo acima esta em fundo branco simples, caso você queira com um detalhe, coloque essa aqui:

Códigos

.sidebar .widget {
 border-bottom: 2px solid $(widget.border.bevel.color);
 padding-bottom: 10px;
 margin: 10px 0;
 border-top: 5px solid #621E85;
 padding-bottom: 20px;
 margin: 10px 0;
 background: #fff;
 padding:12px;
 box-shadow: inset 0 0 15px #eee, 0 0 3px #ccc;
}

Bom ai esta espero que vocês gostem, caso tenham alguma dificuldade e só falar que eu ajudo, esta bem? Me desculpem se tem muitos erros de português na postagem, estou morrendo de sono e na esperança de ver um anime antes de dormi rsrs mas ate aproxima bunnys.