Menu de navegação por página, alguns modelos

Vamos modernizando, vamos modificando, vamos melhorando, vamos colocar um menu de navegção de página e substituir "Postagens antigas" no Blogger.




Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Procure por </body>

Acima dele cole o seguinte código:

<!-- MENU DE NAVEGAÇÃO -->

<script type='text/javascript'>
var pageCount=7;
var displayPageNum=3;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script src='https://sites.google.com/site/paginblogger/numeradas/pagenav.js'/>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="" class="showpageOf"> Paginas '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="" class="showpageOf"> Páginas ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

<!-- MENU NAVEGAÇÃO FIM-->

Implementar CSS                                                                             



No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 

Copie o código do modelo de sua preferência e cole no local indicado, como nas imagens acima.

Modelo 1

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
background: #000;
padding: 12px 2px;
}
.showpageOf{
background:#0282dd;
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 8px 0 0;
color:#222;
}
.showpageNum a{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#6f6f6f;
color:#fff;
border:1px solid #39312e
}
.showpageNum a:hover{
padding:8px 8px;
font:16px Arial,Verdana;
color:#fff;
background:#0282dd;
border:1px solid #00558f
}
.showpageArea{
margin:10px 0;
font:16px Arial,
}
.showpagePoint{
color:#fff;
padding:8px 8px;
font:16px Arial,Verdana;
margin:2px;
border:1px solid #00558f;
background:#0282dd;
text-decoration:none
}
.showpage{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#6f6f6f;
color:#fff;
border:1px solid #39312e;
}
.showpage a{
padding:8px 8px;
font:16px Arial,Verdana;
text-decoration:none;
color:#fff;
}
.showpage:hover{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#0282dd;
color:#fff;
border:1px solid #00558f;

}
.showpage a:hover{
padding:8px 8px;
font:16px Arial,Verdana;
text-decoration:none;
background:#0282dd;
color:#cc0000;
}

Modelo 2

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #000;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yi02ckKqOtsxGSJCSwDI2MClaziQ9L5Pi6PBeAP4DTcwXiuMPYqRnMdighYUnTx5q9GGV_ThK-vqjcYHH_qkefFV96u3J1toSrwtxbqhHd-rKKcpCuQXIe2nFL3r7mEbUDlwYn_8MII/s1600/background-brushed2.jpg) repeat;
padding: 12px 2px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

.showpageOf{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
padding:8px 8px;
margin:0 8px 0 0;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
.showpageNum a{
padding:8px 8px;
margin:0 4px;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
border:1px solid #808080
-moz-box-shadow: inset 0 0 2px 2px #888;
-webkit-box-shadow: inset 0 0 2px 2px#888;
box-shadow: inset 0 0 2px 2px #888;
}

.showpagePoint{
padding:8px 8px;
margin:2px;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
text-decoration:none
-moz-box-shadow: inset 0 0 2px 2px #888;
-webkit-box-shadow: inset 0 0 2px 2px#888;
box-shadow: inset 0 0 2px 2px #888;
}
.showpage{
padding:8px 8px;
text-decoration:none;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
}

.showpage a:hover{
text-decoration:none;
border:1px solid #808080;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
.showpageNum a:hover{
background: url(background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDANyFFX784OLVKJjwflII4xGqvTdaybR4HRwN_3gnvngR2yw4_99NJO5x8CyfCApI4DiNWi9rXLtaL6k9tVizsULnU60oh0yMZpcsKSK_MOfCI-AaTb6VsNOJly_Blp72evOYEu9rCNM/s1600/metal2.png) repeat;) repeat;
border:1px solid #808080;
}

Modelo 3 

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #fff;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
background: #000;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 12px 2px;
-moz-box-shadow: 0 0 2px 2px #888;
-webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
}

.showpageOf{
background:#cc0000;
-moz-border-radius: 35px;
border-radius: 35px;
padding:8px 12px;
margin:0 8px 0 0;
}
.showpageNum a{
padding:8px 12px;
color: #000
margin:0 4px;
text-decoration:none;
background:#F9C527;
-moz-border-radius: 35px;
border-radius: 35px;
}

.showpagePoint{
padding:8px 12px;
margin:4px;
background:#1F60F3;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage{
padding:8px 5px;
margin:4px;
background:#ffffff;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
background: #ccc;
}

.showpage a:hover{
text-decoration:none;
}
.showpageNum a:hover{
background: #fff;
}

Mais modelos aqui