02/12/2012

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 .


6 comentários:

  1. Respostas
    1. A imagem não apareceu ? Ou vc não está conseguindo posicionar amor ?
      O meu deu certinho e eu usei esses códigos '-' Qr ajuda ?
      http://www.facebook.com/jessica.dasilvasiqueira.3
      Me add que fica mais fácil para eu te ajudar ok ?

      Excluir
  2. vou tentar usar no meu proximo lay :3
    seguindo aqui.
    http://capricornizando.blogspot.com.br/

    ResponderExcluir
  3. Arigato Jee-chan !! , vo usar no meu otro lay , eu to acabando ja , e vou usar isso no proximo q eu fizer .

    blog lindo hein !! Ren *.*

    ResponderExcluir

-Primeiro , não não peça Tutoriais / Materiais pelos comentários , use a Ask - me .
-Não desrespeite ninguém , tenha educação .
- Comente sobre o post .
- Deixe a sua url no fim do cometário para que eu posso lhe retribuir o mesmo .