Inserir setas de navegação flutuante no Blogger

Neste tutorial veremos como inserir setas de navegação flutuante no blogger, que nada mais é do que os links de “Postagens mais antigas” e “Postagens recentes” do blog.

Você já deve ter visto em alguns blogs links de navegação flutuantes, que deslizam ao longo da tela, possibilitando que seus visitantes possam navegar entre seus posts, facilitando assim, que ele encontre o post anterior, ou o post mais recente, fazendo com que ele continue navegando pelo seu blog.
Aqui no Mundo Blogger, os links de navegação são flutuantes, só que no meu caso, eu uso um plugin para wordpress.

Eu já mostrei, em outro artigo, que é possível alterar os links de navegação do blogger, alterando o texto padrão dos links, ou substituindo o texto por uma imagem, assim como já mostrei outras formas de personalização destes links.

O diferencial deste hack é que não usaremos javascript, o efeito dele é todo a base de puro CSS. Desta forma você não precisará e preocupar com problemas de conflitos entre scripts.

Ao implementar esse recurso, as setas dos links de navegação flutuam entre os posts, sempre que um visitante navega para cima ou para baixo da página.

Veja imagem demonstrativa:

Setas de navegação flutuante no Blogger

A instalação é bem simples, e você poderá ajustar a distância das setas, de acordo com o seu gosto.
Siga os passos a seguir para iniciar a instalação.

1º passo: Implementar o código CSS:

Se você estiver usando um dos modelos padrões do Blogger, Designer de Modelo, você poderá adicionar código CSS de 2 maneiras. Vou mostrar aqui as 2, assim você poderá escolher qual a maneira mais fácil para você, ok?

1. Adicionar CSS através do HTML do Template:

Acesse o painel do Blogger e clique no menu “Modelo“, em seguida clique no botão “editar HTML“.
No editor HTML do seu template, clique no botão “formatar modelo” e em seguida use as teclas Ctrl+F e procure pela tag]]></b:skin>

Dica: Se ao lado desta tag tiver aparecendo aquela setinha preta, clique nela.


Você deverá colar o código CSS bem ACIMA da tag ]]></b:skin>

2. Adicionar CSS através do painel do blogger:

No painel do Blogger, clique no menu “Modelo”, em seguida clique no link “Avançado” e em seguida no link “Adicionar CSS”.
Dentro do campo à direita, é o local que você vai adicionar o código CSS, que eu estou disponibilizando logo aqui em baixo. Depois de adicionado, clique no botão “aplicar ao blog” para salvar as alterações.

ESTE É O CÓDIGO CSS PARA VOCÊ ADICIONAR:

/* Links de navegação flutuante 
----------------------------------- */
#blog-pager-newer-link {   /*-----botão do lado direito -postagens recentes----*/
float : left;
padding-left : 680px;     /* --ajuste as medidas aumentando ou diminuindo a numeração--*/
border : none;
}
#blog-pager-older-link {   /*----botão do lado esquerdo - postagens mais antigas----*/
float : right;
padding-right : 537px;    /* --ajuste as medidas aumentando ou diminuindo a numeração--*/
border : none;
}

.Blogprevlink{ 
margin-left:-100px; position:fixed;top:55%;display:block;text-decoration:none;width:54px;height:65px;z-index:99;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl11BuSastQw7VPXno1kYhaKX0kXs7am7VYpgRpUgsxqek14znoxdcfqH7Czq_J2uxgf3sP7C9OwfZxHYThB842xKOPneP2yGdyAF8rQqwyFIKUSXWV2TJKRt0CVDBJxSxMJfM5G2QGlWZ/s1600/button_prev.png) no-repeat; width:47px;
height:133px;
}

.Blogprevlink .detail{width:0;line-height:1.6em;overflow:hidden;position:absolute;top:0;left:70px;}
.Blogprevlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}

.Blognextlink{ 
margin-left:-100px; position:fixed;top:55%;display:block;text-decoration:none;width:55px;height:65px;z-index:99;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmEFiyzMbVdeJRb-VJI7bZbBb9LP3j4Kbjz3MADCdot2OGmQy1PHykBfM372kNt9lBAemRegE_JCr6SnGHT3dkM6RjrfrkrRbXZ_uXzyFg_Q00ACFSieM4OghnU9SjZJgNT_LXQ22kmDUe/s1600/button_next.png) no-repeat; width:47px;
height:133px;
}

.Blognextlink .detail{width:0;line-height:1.6em;overflow:hidden;position:absolute;top:0;left:70px;}
.Blognextlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}
#prevLink{left:10px !important}
#prevLink{left:30px}
#nextLink{right:30px; }
#nextLink .detail{right:70px !important;left:auto}
#nextLink{right:10px !important}

Agora vamos verificar as partes que você deve editar para ajustar as setas de acordo com a largura do seu template.

Para ajustar a seta referente as postagens recentes:
680 ? ajuste as medidas aumentando ou diminuindo esta numeração.
Para ajustar a seta referente as postagens mais antigas:
537 ? ajuste as medidas aumentando ou diminuindo esta numeração.

Se quiser substituir a imagem da seta, você deve usar uma imagem no tamanho de 47X133 (47 de largura e 133 de altura).