13 de set. de 2008

Ícones para navegação do blog.

Nesse tutorial vou ensinar a colocar icones na navegação do blog, ficando deste jeito:


Então vamos lá!

Vá ate seu painel no blogger e clique em Layout e em seguida Editar HTML.

Antes de tudo clik em Baixar modelo completo para fazer o Back-up dp seu template.

Agora clik em " Expandir modelos de widget ".

Procure pelo seguinte trecho (ou algo parecido, sendo de <b:includable id='nextprev'> até </b:includable>) :


<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <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'>&lt;&lt;&#160;<data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <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/>&#160;&gt;&gt;</a>
      </span>
    </b:if>

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>



Substitua esse trecho por esse:


<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='URL DO ICONE PARA ESQUERDA'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='URL DO ICONE PARA DIREITA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL DO ICONE HOME'/></a>
</div>
<div class='clear'/>
</b:includable>




NÃO SE ESQUEÇA DE COLOCAR AS URLS DOS ICONES NOS LOCAIS INDICADOS!

0 Comentario:

Postar um comentário