menu icones

Image Map

Colocando imagem nos nomes dos GADGET.


Olá Olá :) .

 Como prometi, aqui vai um tutorial pra vocês. Então,eu fiquei louca procurando tutoriais ensinando colocar imagem nos nomes dos GADGET, claro que achei VARIOS, mas nenhum deu certo.. Ai eu fui relatar isso pro meu coleguinha Gu *-* dono do Design Maniia,,ele foi super paciente me explicou passo a passo , e deu super certo , então eu recomendo muito. CREDITOS TOTAL PRO DESIGN MANIA/Gustavo

Mas vamos lá ;D

Primeiro vamos colocar o código que vai permitir que a imagem fique certa. Assim...

Entre em seu blog, vá até Design Editar HTLM expandir modelos dos wadgets

Procure por: ]]></b:skin> ( Usando o CTRL+F pra facilitar )

Então cole o cogigo a seguir antes da tag  ]]></b:skin>

 

.widget .title img{
padding-bottom: 5px;
display: block;
text-align: center;}

 

Clique em SALVAR MODELO. (Obs.: Não precisa Visualizar por que não mudou nada no seu Template.)
Agora vamos procura os nomes dos Gadget que você deseja colocar a imagem no fundo.
Fique em Editar HTML e Marque em Expandir Modelos dos Wadgets.
Pressione as teclas CTRL + F e procure pelo nome do Gadget que quer colocar imagem.  Feito isso vai aparecer um Código quase igual a esse...


<b:widget id='HTML3' locked='false' title='Blogs do Ano' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title !=
&quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>

 

 

No Lugar do código que está em NEGRITO e ROSA, cole o seguinte código ABAIXO: 

<img src='URL_DA_IMAGEM'/>


Substitua URL_DA_IMAGEM pelo link da imagem que você hospedou ( a imagem no qual você quer fazer as alterações.
Pronto! Clique em Visualizar e veja se está tudo certo e se ficou da forma que desejava, se ficou ótimo, clique em salvar.


 Aqui uns modelos que eu mesma fiz, pra vocês... Só a base o nome dos Gadgets vocês podem adicionar em um editor de imagem da sua preferência , e se não souber deixa um comentário aqui pedindo que eu posso editar pra vocês 
Para pegar é bem facil , com o botão direito do mouse selecione copiar URL/endereço de imagem . Prontinho :D 













 

Creditos pro Gu , obrigadãao seu diwo lindo *-* <3 
É isso ai gente , beijoscas :*  



Nenhum comentário:

Postar um comentário

Olanka - Todos os direitos reservados. Criado por: Thawany Olanka
imagem-logo