Numerar Páginas do Blogger

Neste post falarei aqui no DicasHot a respeito de como numerar as páginas do blogger. Até por que quando um blog é bem organizado, fica mais fácil para o leitor navegar melhor no seu site.

               Seguir @DicashotBlogger

Neste post mostrarei aqui alguns modelos bem completos de numeradores de página que ficam super bem em qualquer blog...

Você pode estar instalando qualquer um dos modelos abaixo:

Instalando modelo 1:

 

1° passo: Entre em "Design";

2° passo: Clique na aba "Editar HTML";

3° passo: Clique em "Expandir Modelos de Widigets";

4° passo: Cole este código ACIMA da tag: ]]></b:skin>

.paginator { margin-top:60px; font-size:1em; } .paginator table { border-collapse:collapse; table-layout:fixed; width:100%; } .paginator table td { padding:0; white-space:nowrap; text-align:center; } .paginator span { display:block; padding:3px 0; color:#fff; } .paginator span strong, .paginator span a { padding:2px 6px; } .paginator span strong { background:#ff6c24; font-style:normal; font-weight:normal; } .paginator .scroll_bar { width:100%; height:20px; position:relative; margin-top:10px; } .paginator .scroll_trough { width:100%; height:3px; background:#ccc; overflow:hidden; } .paginator .scroll_thumb { position:absolute; z-index:2; width:0; height:3px; top:0; left:0; font-size:1px; background:#363636; } .paginator .scroll_knob { position:absolute; top:-5px; left:50%; margin-left:-10px; width:20px; height:20px; overflow:hidden; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0M3TrSbog0qiLGyrI6QUmzPost9imDvleyN_sdsveNiYcLhRHiDPPB1Bw1Zqd01JbJrNAKdcrHqigW23kdiHUytWVgidzhk-rHmjh-LZAgQkbEtgMQHHd-r4V9QZN4w7TJBVfz59i9g/s1600/slider_knob.gif) no-repeat 50% 50%; cursor:pointer; cursor:hand; } .paginator .current_page_mark { position:absolute; z-index:1; top:0; left:0; width:0; height:3px; overflow:hidden; background:#ff6c24; } .fullsize .scroll_thumb { display:none; } .paginator_pages { width:600px; text-align:right; font-size:0.8em; color:#808080; margin-top:-10px; }

5° passo: Procure pela tag: </body>

6° passo: Acima desta tag cole o código: 

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script> <script type='text/javascript'> var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=7; var numshowpage=6; </script> <script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Obs.: O campo var postperpage=7 dastacado no código é para você definir quantas postagens irão aparecer em cada post; pode ainda estar alterando o número limite de cada página alterando o número 6 no código.


Instalando modelo 2:

1° passo: Entre em "Design";

2° passo: Clique na aba "Editar HTML";

3° passo: Clique em "Expandir Modelos de Widigets";

4° passo: Cole este código ACIMA da tag: ]]></b:skin>

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

5° passo: Procure pela tag </body>  e cole esse código ANTES dele:

&lt;script type='text/javascript'&gt;
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Voltar';
var downPageWord ='Próxima';
&lt;/script&gt;
&lt;script src='http://www.yourjavascript.com/19425042120/pagenav.js' type='text/javascript'&gt;&lt;/script&gt;

Essa linha var postperpage=7; define o numero de postagens por página; você pode estar modificando o número 7.

6° passo: Procure pela tag data:label.url no código HTML do seu blog e substitua por este código:

'data:label.url + &quot;?&amp;max-results=7&quot;'

Tendo feito isto basta salvar o modelo e pronto!!!