sexta-feira, 17 de junho de 2011

Trocar texto "Postagens mais antigas" por imagens de navegação no Blog

Neste ótimo tutorial ensinaremos como substituir os textos de "Postagens mais Antigas" e "Postagens mais recentes" por imagens, sejam elas setas para direite e esquerda, ou qualquer uma que desejem. também mostaremos como colocar a imagem da Homepage entre elas.


1 - Em primeiro lugar recomendo que já escolham as imagens que desejam usar. Vamos precisar de três imagens: Uma para indicar postagens mais antigas (seta para direita), uma para postagens mais recentes (seta para esquerda) e outra para Homepage (casinha). Sugiro procurar no Google Imagens ou o http://www.iconfinder.net.

2 - Após encontrar as imagens que deseja, hospede-as em um luagr qualquer de sua preferência. recomendo aqui o www.photobucket.com ou o www.imageshack.us. Após hospedar reserve os links das imagens (links diretos).

3 - Vá até o editor de Html de seu blog e procure pelo seguinte código:


<b:includable id='nextprev'>


4 - Logo abaixo dele encontre:

  
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"'expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
  

5 - Substitua todo o código acima pelo seguinte para imagem de "Postagens mais recentes":

  
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><div align='left'><img src='AQUI O ENDEREÇO DE SUA SETA PARA A ESQUERDA'/></div></a>
  

6 - Mais abaixo encontre o código:

  
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
   

7 -  Substitua todo o código acima pelo seguinte para imagem de "Postagens mais antigas":

  
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><div align='right'><img src='AQUI O ENDERÇO DA SUA SETA PARA A DIREITA'/></div></a>
  

8 - Procure este código:

  
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  

9 - Substitua todo o código acima pelo seguinte para imagem de "Homepage":

  
<a class='home-link' expr:href='data:blog.homepageUrl'><div align='center'><img src='AQUI O ENDEREÇO DA CASINHA'/></div></a>
 

10 - Lembre-se de substituir os textos em AZUL pelos endereços de suas imagens e pronto! O resultado será semelhante a este abaixo:


Nenhum comentário:

Postar um comentário