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

Para quem deseja substituir o texto que fica ao final das postagens no Blooger por imagens como este exemplo AQUI, siga a dica.

Pegue AQUI a imagem que quiser para colocar como botão de navegação.

Este hack vale para o velho e o novo Blogger, implementado em julho de 2010

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Vá até o HTML do seu blog e clique em "Expandir modelos de widget"

Agora copie este código abaixo.
<div class='blog-pager' id='blog-pager'>

Agora clique na tecla "F3" de seu teclado, ao abrir uma janela, cole o código que você acabou de copiar. Viu que ficou selecionado ?


Agora substitua todo este trecho

<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></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>


Por este:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFcxvLc5-j6Zlmnt7jzy7nAF22EmTFGJtwknm0521DaBzPA5nOo2Rl4ru21dvWNZRxyb-FvqBfbBRwFHkk25Hqsd4wtX4pb3NQ-p7mybX_nEblfJcVJXr6_a-K_qergc_8DJauGeV62md/s1600/arrow21.gif'/></a>
      </span>
    </b:if><b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwX8i8CY83ZfNbrwxfLxr1Q-lgDnyUmLBqHzIV8xKG6XNdDN-Vrz8KB9zZSylwczPUTJ7Dp19rCIbcuiGviQN99-jeqwmcg5TX1ZZqT5Cw_-fpckY2YYsI23SucpESFV7AvyZW2gHjgCEy/s1600/home8.png'/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglQfpdrmP_N623se0PgQYCUomcm81F3qYNOLx0DWK-js8lh51JTs4pfuNTsUwoEWjO8zEg0E13IHFGaifyCir3rxrNxXkd5nCoDNa1f_bUX2MaLB8arx7jyDse0EjtfIeJLj4MvKu4rui3/s1600/arrow20.gif'/></a>
      </span>
    </b:if>
 </div>
</b:if>

Agora basta colar o endereço de suas imagens nos locais grifados com cores.


LARANJA----------------------------seta para esquerda

AZUL----------------------------------casinha

VERMELHO--------------------------seta para direita


Para centralizar as imagens, copie o código abaixo e cole antes de:

]]></b:skin>

/*Blog pager------------------------------------*/ #blog-pager {width: 500px;clear: both;text-align: center;} #blog-pager-newer-link {float:left; padding: 10px 0 0 30px;} #blog-pager-older-link {float:right; padding: 10px 30px 0 0;} #blog-pager {text-align:center;padding: 10px 0 0 0;}

O código em rosa deverá ser modificado de acordo com a largura de seu "#main-wrapper"