.

segunda-feira

Numerar Páginas do Blogger

ACESSOS:
Deixe seu comentário

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.

               


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:



Numerar páginas do blogger 

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(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/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!!!