Colocar setas de navegação no Blogger com Plugin Floating NextPrev

Olá a todos de novo, neste artigo vou mostrar-vos como instalar este Plugin no Blogger que é basicamente ter setas flutuantes nos artigos dos teus blogs, quer na esquerda quer na direita, que que são os links dos artigos antes e depois do que esta a ser exibido, como tenho no Dicas Box, acho que me fiz enteder. Este Plugin é muito util pois possibilita uma melhor acessibilidade a outros artigos no teu blog.

Esta é a nova versão do Plugin da autoria de Claudio Sanches. Como sabem os Plugins são essencialmente disponibilizados para Wordspress mas como os blogueiros de Blogger ainda são muitos os metabloggers são obrigados a criar adaptações para Blogger. Esse Plugin já foi publicado á algum tempo no Ferramentas Blog.

Se você usar o WordPress.org, podes colocar este Plugin no teu blog seguindo o tutorial do Ferramentas Blog: “Como inserir setas de navegação nos posts do blog – Floating NextPrev WordPress Plugin“.

Esta adaptação do Plugin para Blogger foi da autoria do Iago Melanias do  Blogando com Facilidade, um blog que admiro muito.

• Como instalar:

1º – Acessa o painel do teu blog e clica no separador modelo.
2º – Seguidamente, clica no botão Editar HTML.
3º – Marque a caixa 
4º – Prima CTRL+F e procure por:

</head>

5º- A cima dela cole o seguinte código:

 <script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
window.onload = function socialButtons() {
$('.floating-nextprev-1').hover(function() {
$(this).stop().animate({
left: '0px'
},
'fast')
},
function() {
$(this).stop().animate({
left: '-199px'
},
'fast')
})
$('.floating-nextprev-2').hover(function() {
$(this).stop().animate({
right: '7px'
},
'fast')
},
function() {
$(this).stop().animate({
right: '-199px'
},
'fast')
})
}
</script>
<script type='text/javascript'>
$(document).ready(function(){
var newerLink = $("div.proximo-artigo").attr("href");
$("div.proximo-artigo").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("div.proximo-artigo").text();
$("div.proximo-artigo").text(newerLinkTitle);
});
var olderLink = $("div.artigo-anterior").attr("href");
$("div.artigo-anterior").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("div.artigo-anterior").text();
$("div.artigo-anterior").text(olderLinkTitle);//rgt
});
});
</script>
<link href='http://dl.dropbox.com/u/44914301/codigos/floating-nextprev/floating-nextprev.css' rel='stylesheet' type='text/css'>
</link>  

6º- Prima novamente CTRL+F e procure por:

 post-footer-line-1  

7º- Por baixo disso cole o seguinte código:

  <b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:olderPageUrl'>
<a class='btn-proxima' expr:href='data:olderPageUrl'><div class='floating-nextprev-1 floating-nextprev-box' id='social_link_users'><div class='seta1'/>
<div class='caixa bandeja'>
<p id='mensagem-artigo'>Artigo Anterior</p>
<p id='proximo-artigo'>
<div class='proximo-artigo' expr:href='data:olderPageUrl'><data:olderPageTitle/></div>
</p>
</div></div></a></b:if>
<b:if cond='data:newerPageUrl'>
<a class='btn-anterior' expr:href='data:newerPageUrl'><div class='floating-nextprev-2 floating-nextprev-box'><div class='seta2'/>
<div class='caixa bandeja espaco'>
<p id='mensagem-artigo'>Próximo Artigo</p>
<p id='proximo-artigo'>
<div class='artigo-anterior' expr:href='data:newerPageUrl'><data:newerPageTitle/></div>
</p>
</div></div></a></b:if></b:if> 

Tem que ficar deste género:


8º- Clica em salvar modelo e está feito!

Espero que tenham gostado, se gostaram agradeçam ao Iago Melanias, grande blogueiro!
Até ao próximo artigo...