Tutorial - Imagem no lugar do Título dos Gadgets /Atualizado\

Gente , amanhã arrumo a pg de Goodies (aquela droga de menu não abre o link ) , agora vou ir assistir animes. Ah , e me digam o que vocês acham do dia do natal fazermos brincadeiras ., Beijos *-*

Meu xerúh u.u

Boa Noite !

Eu estava pensando em fazer alguma brincadeira no dia do natal , o que vocês acham ? Eu quero a opinião de vocês ,talvez postar um layout free ? Algo assim , ainda não sei bem o que irei fazer nesse dia , mas como eu amo o natal e ele vai ser o primeiro do Blog eu não posso deixa-lo passar em branco não é mesmo ?

Duas leitoras pediu para que eu ensinasse  a colocar imagem ao invés do título do gadget igual eu uso aqui ,já vou dizendo que eu não peguei esse tutorial de nenhum lugar , eu fui fazendo com meu lindo cérebro , acredito que todos façam assim , mas mesmo assim se esse tutorial for útil ,credite . Ah , e também nada de fazer igual ao meu ,use a sua criatividade . Talvez, algum dia desses eu faço alguns título editáveis para vocês ok ?
Let's Go ~

#1: Adicione um novo Gadget HTML/Javascript e nele cole :

<div class="título1">
<a href="/" class="titu1"></a>
</div>
<div class="título2">
<a href="/" class="titu2"></a>
</div>
<div class="título3">
<a href="/" class="titu3"></a>
</div>
<div class="título4">
<a href="/" class="titu4"></a>
</div>

#2 : Agora vá no seu HTML dê Ctrl + F e procure por :  </b:skin>
Assim que encontra-lo , cole o seguinte código acima dele :

.título1 {position: absolute; margin-top:VALORpx; margin-left: VALORpx; width: 650px} 

.titu1 {background: url('LINK DA IMG'); width: VALOR2px; height: VALOR2px;  float:left; margin-left:5px;padding:2px;}

.título2 {position: absolute; margin-top:VALORpx; margin-left:VALORpx; width: 650px} 

.titu2 {background: url('LINK DA IMG'); width: VALOR2px; height: VALOR2px; float:left; margin-left:5px;padding:2px;}

.título3{position: absolute; margin-top:VALORpx; margin-left: VALORpx; width: 650px} 

.titu3 {background: url('LINK DA IMG'); width: VALOR2px; height: VALOR2px; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease;-o-transition: all 1.3s ease;  float:left; margin-left:5px;padding:2px;}

.título4 {position: absolute; margin-top:VALORpx; margin-left: VALORpx; width: 650px} 

.titu4 {background: url('LINK DA IMG'); width: VALOR2px; height: VALOR2px; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease;-o-transition: all 1.3s ease;  float:left; margin-left:5px;padding:2px;}

#3 : Desculpe gente , eu esqueci do terceiro passo , podem bater em mim ...
Procurem por : /* Widgets
E você irá encontrar algo assim  :

/* Widgets

----------------------------------------------- */

.sidebar .widget {

  border-bottom: 2px solid $(widget.border.bevel.color);

  padding-bottom: 10px;

  margin: 50px 0;

Viram onde está em negrito ? É alí que vocês vão aumentar ou diminuir o espaço entre cada gadget para poder colocar a imagem .

Explicações : 

Não tem muito o que explicar , mas mesmo assim :

VALOR : Nessa parte você irá arrumar o posicionamento dele .

VALOR2: Nessa é a altura e a largura da imagem.

LINK DA IMG : Você pode hospedar a imagem aqui (www) .

Espero que tenham gostado do Tuto , Bye .