Como colocar numeração das postagens na página inicial do blogger

Numerar as postagens do seu BLOGGER/SITE é muito importante e útil, pois através dessa numeração os visitantes do seu site poderá acessar as postagens anteriores de forma fácil. Esse código será inserido num widjet.

Sem delongas, veja como irá ficar seu página inicial.

Demonstração da numeração de página

Primeiramente entre no blogger(ou seu site) e vá na aba LAYOUT e lá crie um GADJET HTML/JAVASCRIPT. Veja a imagem.

Criando gadjet HTML

Ao criar o GADJET uma janela irá ser exibida (Configurar HTML/JavaScript). Em CONTEÚDO será onde você irá colar o código abaixo.

<style type="text/css"> .blog-pager, #blog-pager { clear:both;font:bold 12px Arial; text-align:center; padding:15px 20px; margin-bottom:-40px; padding-top:20px} .blog-pager a:hover, #blog-pager a:hover{  //ESTE HOVER É PARA HOME E POSTAGENS ANTIGAS color:#fff; text-decoration:none; background-color:#d0d0d0; border:1px solid #000;} .showpageNum a,.showpage a{     //PARTE QUE MOSTRA A NUMERAÇÃO POR PAGINA font-size:20px; background:#fff; text-decoration:none; white-space:nowrap; color:#222; margin:10px 3px; padding:5px 10px; border:1px solid #ddd} .showpageNum a:hover,.showpage a:hover{   //NUMERAÇÃO MUDA DE COR AO PASSAR O MOUSE color:#fff; text-decoration:none; background-color:#000; border:1px solid #000;} .showpageOf{display:none;margin:0} .showpagePoint    //NUMERO DA PAGINA ATUAL SELECIONADO {color:#fff; text-decoration:none; background-color:#000; font-size:20px; margin:10px 3px; padding:5px 10px; border:1px solid #000;} .share-post {clear:both; margin:10px 0 0;padding:10px 0 10px 10px; background:#f7f7f7; border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; height:20px} </style> <script type='text/javascript'>               var postperpage=5; //Postagem por pagina               var numshowpage=5; //Numeração de paginas mostradas               var upPageWord ='« Anterior ';               var downPageWord ='Proxima »';               var urlactivepage=location.href;               var home_page="/";             </script> <script type='text/javascript'> //<![CDATA[ var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat} //]]> </script>

SCRIPT EXTERNO

SEM

Código da numeração de páginas

Ao terminar e colar seu código irá ficar igual ao da imagem abaixo. Por fim clique em SALVAR.

Salvando gadjet

Pronto, agora basta escolher o local onde seu GADJET será exibido. Ele irá numerar automaticamente todas suas postagens. Para editar basta mexer no código através do CSS. Visualize seu site e veja se gostou, qualquer dúvida comente.