Links de navegação

No rodapé das postagens nós encontramos os links de navegação, que nos levam para postagens mais antigas, mais recentes ou para a página inicial do blog.

Se você não gosta desses links é muito fácil retirá-los.

O código para isso é esse: #blog-pager { display:none; }.

A parte { display:none; } é a que define que um elemento não aparecerá no blog.

Um dos caminhos é Layout > Designer de tema > Avançado > Adicionar CSS:

Cole o código na linha, clique no disquete no canto inferior direito e espere a mensagem de Atualização feita.

O Blogger colocará esse código no código fonte do blog.

Se não funcionar (bugs momentâneos do Blogger) o segundo caminho é caminho é Tema > Personalizar > Editar HTML - ctrl F - digitar ]]></b:skin>.

Acima desse cócdigo cole o código #blog-pager { display:none; }, clique no disquete e espere a mensagem A atualização foi feita.

Já não há mais links de navegação.

Pode ser útil caso haja áreas restritas no seu blog, acessíveis com senhas, ou caso você não goste desse widget ou até se você optou por uma paginação diferente.

Mas caso você queira continuar com os links de navegação e trocar os textos "Postagens mais recentes", "Página inicial" e "Postagens mais antigas" por imagens prepare as suas imagens (ou use essas que disponibilizei no arquivo zipado) e salve-as na sua página de imagens, para obter os links.

O código para trocar o texto por imagem é muito simples: <img src="URL-DA-IMAGEM"/>.

Naturalmente você usará o código 3 vezes trocando apenas a url. Prepare os links.

Vá em Tema > Personalizar > Editar HTML - ctrl f - digite nextprev e dê Enter 4 vezes porque é o 4º código que queremos, o que está acima de <div class='blog-pager' id='blog-pager'>.

Nós vamos trocar os 3 códigos destacados pelos códigos das imagens correspondentes.

Trocar:

<data:newerPageTitle/>

por:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHcn6wHUo_NvsiBURX7LV1ZDgDz9Yfws9TURuOSzOmEUAno9qgqiXavlNPI-sUJejlo_vCooyQZHO6p9qagOHab2rGwE9t2YpOAyGuHsPqoYYNgCR3KbmiNldUvZqnW1yagmZLDTHKXbQ90Fqwm16m9j_Z25p4IEZIX2qZNo3SpZXmw4vVg34kge45w/s1600/postagens%20novas.png"/>

Trocar:

<data:olderPageTitle/>

por:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk1dAdzWH-34yvW9kBD1rTOykK3SkkFFHKlnIz-APvpkEUlSUy2eu02m6IWL9beTCL3zFq2W2pf2ddgtLjlbXvbEncod8p9pOVsbNG6Q-IN-ydc_fW7ct9adlEsi3DWV_dxW3jV8m_zlOZ2QE9_vh_JETc5WPFriBueCKDORBslEeDMBnhOqIjQ7R50A/s61/postagens%20antigas.png"/>

E trocar:

<data:homeMsg/>

por:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmeJCknXxiNIG0TlOn1B2NWCnjHTkOozaCkC2iHdEDHmVYleF7lNjpyL_YW0ig9M-qpO0hBNHLfx5KVER2Y9W-SbAfgLrtuaYdegHA2kCa_Onfq6F-ZAC_8X4mTyzmTwdOAwuMzlhHlcSsv7VoCmJp9KuNriC60_275wVxPgV97DSOPQ-IWW3RCgsHQ/s45/p%C3%A1gina%20inicial.gif"/>

Clique no disquete e espere as mensagens Processando... e A atualização foi feita.

  

Visualize o blog.

Caso você queira manter apenas o link para a página inicial, removendo os links para as postagens mais antigas e postagens mais recentes proceda do seguinte modo:

1- Ache o código nextprev  acima de <div class='blog-pager' id='blog-pager'> e vamos apagar os códigos referentes aos links que não desejamos.

2- Primeiro ache <data:newerPageTitle/> e apague-o.

3- Depois ache <data:olderPageTitle/> e apague-o.

4- Por fim ache <data:homeMsg/> e troque-o pelo código <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmeJCknXxiNIG0TlOn1B2NWCnjHTkOozaCkC2iHdEDHmVYleF7lNjpyL_YW0ig9M-qpO0hBNHLfx5KVER2Y9W-SbAfgLrtuaYdegHA2kCa_Onfq6F-ZAC_8X4mTyzmTwdOAwuMzlhHlcSsv7VoCmJp9KuNriC60_275wVxPgV97DSOPQ-IWW3RCgsHQ/s45/p%C3%A1gina%20inicial.gif"/>, sendo que a url deve ser da imagem que escolher.

Clique no disquete no canto superior direito e espere a mensagem "A atualização foi feita.

Visualize o blog. Mesmo abrindo uma postagem individual só a imagem do link da página inicial aparece.

Caso queira trocar o texto "Página inicial" por outro texto como por exemplo "Volte ao começo" apenas apague  <data:homeMsg/> e escreva Volte ao começo no lugar, clicando no disquete em seguida:

A cor, a fonte e o tamanho do texto será a que você definir para os links do blog.

Aproveitando que estamos com a mão na massa, vamos retirar esse aviso de "Assinar Postar comentários (ATOM)” que tem no rodapé.

Ainda  no código fonte do blog abra a caixinha de pesquisa e cole a tag </b:skin>.

Logo acima cole:

.feed-links { display: none; }

Clique no disquete e espere as mensagens Processando... e A atualização foi feita.

Visualize o blog:

Dúvidas, clique na plaquinha e me escreva: