31 de ago. de 2011

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




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'>

2 comentários:

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube