Colocar o link de navegação do blog dentro dos posts

DEMO

Há muito que penso em deixar o menu de navegação do blog dentro do post, entre outras coisinhas que estou preparando para vocês, aguardem. Acho até estranho o menu lá, embaixo de tudo, depois dos comentários, fica um pouco sem nexo. Mas vamos então implementar logo esse hack.

  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

A primeira coisa que vamos fazer será dar o estilo e depois esconder o outro menu nas páginas internas.










Vá até o Modelo de seu blog, clique em Editar modelo

Agora procure por:

]]></b:skin>  

 

Substitua então pelo código abaixo:

#menu-navegar{width:100%;  margin: 30px 0 90px 0;}
]]></b:skin>

Salve.



Agora clique em "Expandir modelos de widgets"

Procure pelo seguinte 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

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



Troque-o pelo código abaixo:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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'><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/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

Salve.

Agora vamos implementar o menu dentro dos posts.

Para que o menu fique na parte inferior do post, procure por:

 <div class='post-footer'>

Acima dele, cole o próximo código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div id='menu-navegar'>
<b:if cond='data:newerPageUrl'>
<a 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/AVvXsEguU41b7oE2doFUvQZyTARUwQZDrPYBuFQQye30yPhQGG5yly51Ohtv_EW1Z1whwQtXyvAkAyjBO7rk8KxBpYbPZisDVXviG6320x4CmhfV91vHjyEymBW6Ok87OnoorRfAfPEk-aL7Y54/s1600/back.png' style='float: left; padding: 10px 0;'/></a>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a expr:href='data:blog.homepageUrl'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-TIjG8i5AR4JYdKVspApeZ0JgJbT5eMR0s7_eHVwKEfJtMKQBuuupURhAYDKAc7IKav8pdExy-0k0YUM_Fi-SS3NsXTLW3HbieO5WSFmaPjx0gOkQ4TLIZRmsdTapXZlsRSyz7-DJqY/s1600/home.png' style='  position:relative;float:right; left:-50%;'/></a><b:else/>
</b:if>
<b:if cond='data:olderPageUrl'>
<a 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/AVvXsEh-4bzlFBLfbmI5sFe7nV3F3CzNuEpNwjEngU4XDC9UYytN6mbIWaW2X-SkFp1vn_jyyhbwNB-p_HnX_lDM7wmLbYxXthywBs1y1Y8BxPiR4XlEez29GzC1wcP5tH7o3ydmxXVXqSCUz8c/s1600/next.png' style='float: right; padding: 10px 0;'/></a>
</b:if>

</div>
</b:if></b:if></b:if>

Para trocar as imagens, troque os códigos coloridos pelos endereços de suas imagens

Vermelho----------------------------------Seta a esquerda

Verde--------------------------------------Casinha

Azul--------------------------------------- Seta a direita



Se prefere o menu na parte superior do post, cole o último código acima de: 

 <div class='post-header'>