Dicas Blogger Page Navigator Hack

Share |

Webmaster Blogger Tools. Dicas Blogger. Customizar o template no Blogger (Blogger Page Navigator), mudando os links de navegação de página padrão do Blogger, numerando cada página. Para facilitar a navegabilidade de seu blog é importante e uma formas de permitir que o visitante percorras suas páginas uma por uma, passando pelo conteúdo que deseja. O modelo apresentado é como ilustra a imagem.

Introdução e recomendações.
Faça um Backup do Template antes de efectuar alterações

• Paginação Numerada para Blog

• Personalizar Links de Navegação do Blogger

Antes de fazer qualquer modificação no seu blogue, teste em num blog preparado para isso e faça um backup completo do seu blog original para poder reverter as mudanças caso algo corra mal.

Inserindo paginação numerada no Blogger.
O modelo que vou mostrar, encontrei no blog Blogger Widgets (em inglês). Veja o artigo original caso tenha alguma dúvida:
Proceda da seguinte forma:

1. Abra o painel do Blogger, clique no menu “Layout” > “Editar HTML”. No código fonte de seu blog procure pela seguinte linha:

]]></b:skin>

2. Imediatamente ACIMA dela cole o seguinte trecho de CSS (que determina as caracteríticas dos elementos que serão usados):

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4. Não altere nada aí e agora procure por </body> que estará bem no final do código-fonte. Também, imediatamente ACIMA dele, cole o trecho que segue:

<!-- Inicio do codigo de navegação de Páginas -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;

var upPageWord ='Previous';
var downPageWord ='Next';

</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!-- Final do codigo de navegação de Páginas -->

O coloque o número adequado para o padrão do seu blog.

Como pode ver, existem alguns parâmetros customizaeis neste codigo

var pageCount=5;

O número na linha de código acima, determina a quantidade posts exibidos por página,

var displayPageNum=5;

O número na linha de código acima, determina a quantidade de números de navegação de páginas que serão mostrados.

var upPageWord ='Previous';
var downPageWord ='Next';

Estas duas linnhas determinam o texto que será mostrado para previous page and next page respectivamente.

Label Fix

Por defeito,,as blogger label pages mostram 20 posts.We Temos de alterar este valor para o valor que defenimos na variável pageCount (ou posts per page). Agora temos de editar o template

How to Edit the template to cut short the posts per page?

Vamos a Edit HTML, expandir modelos do Widget Templates
Procuramos pela linha de código HTML abaixo

'data:label.url'

(incluindo quotes) e substituimos tudo pela linha abaixo

'data:label.url + "?&max-results=5"'

Aqui, o número 5 representa o nº de posts a mostrar por pagina.
Se estiver a usar a label cloud widget phydeaux3, procura:

a.href = '/search/label/'+encodeURIComponent(t);

e substitui por

a.href = '/search/label/'+encodeURIComponent(t)+'?&max-results=5';

Novamente o número 5 representa o nº de posts a mostrar por pagina.
Agora o Blogger Page Navigation deve estar a funcionar no teu blog. :)

O número na linha azul é a quantidade de números que aparecerão nos links de navegação. Escolha a quantidade de acordo com a estética e largura da área de postagem.
5. Salve e veja o resultado em seu blog

Creditos: Codes de Abu Farhan  Abu Farhan e Muhammad Rias Techie Blogger . Numbered Page Navigation For Blogger.