30 setembro 2010

Como colocar páginas numeradas no Blogger

Posted on 12:39 by Beatriz ribeiro

Este hack da uma aparência mais de site ao seu Blog pois permite navegar por páginas e não por simples postagens, o que é um efeito muito bom que garante uma boa navegação sem ter que ficar procurando por categorias que nem sempre são fáceis de achar uma que tem o que queremos.Para inserir este hack é fácil mais lembre se de baixar o modelo completo.Veja como aplica-lo:


1.Faça login no Blogger


2.Vá para Layout->Editar HTML
E utilizando as teclas Ctrl e F procure pelo código abaixo:
]]</b:skin>
Agora antes dele insira o código abaixo:
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
3.Agora procure pelo código abaixo:
<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/> </b:section>

Agora abaixo deste código insira o código abaixo personalizando de acordo com a nota :
&lt;script type=&#039;text/javascript&#039;&gt; var home_page_url = location.href; var pageCount=10; var displayPageNum=6; var upPageWord =&#039;Previous&#039;; var downPageWord =&#039;Next&#039;; 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= &amp;#39;&amp;#39;; var upPageHtml =&amp;#39;&amp;#39;; var downPageHtml =&amp;#39;&amp;#39;; htmlMap[htmlMap.length]=&amp;#39;/&amp;#39;; postNum++; for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = &amp;#39;/search?updated-max=&amp;#39;+timestamp+&amp;#39;&amp;amp;max-results=&amp;#39;+pageCount; } var banyaknomer = htmlMap.length; if (json.feed.entry.length % pageCount == 0){ var banyaknomer = htmlMap.length -1 ; postNum=postNum-1; }; for(var p =0;p&amp;lt; banyaknomer;p++){ if(p&amp;gt;=(thisNum-displayPageNum-1) &amp;amp;&amp;amp; p&amp;lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;amp;&amp;amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = &amp;#39;&amp;lt;span class=&amp;quot;showpage&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;/&amp;quot;&amp;gt;&amp;#39;+ upPageWord +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; }else{ upPageHtml = &amp;#39;&amp;lt;span class=&amp;quot;showpage&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+ upPageWord +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; } fFlag++; } if(p==(thisNum-1)){ html += &amp;#39;&amp;lt;span class=&amp;quot;showpagePoint&amp;quot;&amp;gt;&amp;#39;+thisNum+&amp;#39;&amp;lt;/span&amp;gt;&amp;#39;; }else{ if(p==0){ html += &amp;#39;&amp;lt;span class=&amp;quot;showpageNum&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;/&amp;quot;&amp;gt;1&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; }else{ html += &amp;#39;&amp;lt;span class=&amp;quot;showpageNum&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+ (p+1) +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; } } if(eFlag ==0 &amp;amp;&amp;amp; p == thisNum){ downPageHtml = &amp;#39;&amp;lt;span class=&amp;quot;showpage&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+ downPageWord +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; eFlag++; } } } if(thisNum&amp;gt;1){ html = &amp;#39;&amp;#39;+upPageHtml+&amp;#39; &amp;#39;+html +&amp;#39; &amp;#39;; } html = &amp;#39;&amp;lt;div class=&amp;quot;showpageArea&amp;quot;&amp;gt;&amp;lt;span style=&amp;quot;COLOR: #000;&amp;quot; class=&amp;quot;showpageOf&amp;quot;&amp;gt; Pages (&amp;#39;+(postNum-1)+&amp;#39;)&amp;lt;/span&amp;gt;&amp;#39;+html; if(thisNum&amp;lt;(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += &amp;#39;&amp;lt;/div&amp;gt;&amp;#39;; var pageArea = document.getElementsByName(&amp;quot;pageArea&amp;quot;); var blogPager = document.getElementById(&amp;quot;blog-pager&amp;quot;); if(postNum &amp;lt;= 2){ html =&amp;#39;&amp;#39;; } for(var p =0;p&amp;lt; pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&amp;amp;&amp;amp;pageArea.length&amp;gt;0){ html =&amp;#39;&amp;#39;; } if(blogPager){ blogPager.innerHTML = html; } } function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf(&amp;quot;/search/label/&amp;quot;)!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&amp;quot;/search/label/&amp;quot;)+14,thisUrl.length) : &amp;quot;&amp;quot;; thisLable = thisLable.indexOf(&amp;quot;?&amp;quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&amp;quot;?&amp;quot;)) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &amp;#39;&amp;#39;; var upPageHtml =&amp;#39;&amp;#39;; var downPageHtml =&amp;#39;&amp;#39;; var labelHtml = &amp;#39;&amp;lt;span class=&amp;quot;showpageNum&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;/search/label/&amp;#39;+thisLable+&amp;#39;?&amp;amp;max-results=&amp;#39;+pageCount+&amp;#39;&amp;quot;&amp;gt;&amp;#39;; var thisUrl = home_page_url; htmlMap[htmlMap.length]=labelHtml; postNum++; for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!=&amp;#39;&amp;#39;) postNum++; htmlMap[htmlMap.length] = &amp;#39;/search/label/&amp;#39;+thisLable+&amp;#39;?updated-max=&amp;#39;+timestamp+&amp;#39;&amp;amp;max-results=&amp;#39;+pageCount; itemCount++; } var banyaknomer = htmlMap.length; if (json.feed.entry.length % pageCount == 0){ var banyaknomer = htmlMap.length -1 ; postNum=postNum-1; }; for(var p =0;p&amp;lt; banyaknomer;p++){ if(p&amp;gt;=(thisNum-displayPageNum-1) &amp;amp;&amp;amp; p&amp;lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;amp;&amp;amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml + upPageWord +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; }else{ upPageHtml = &amp;#39;&amp;lt;span class=&amp;quot;showpage&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+ upPageWord +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; } fFlag++; } if(p==(thisNum-1)){ html += &amp;#39;&amp;lt;span class=&amp;quot;showpagePoint&amp;quot;&amp;gt;&amp;#39;+thisNum+&amp;#39;&amp;lt;/span&amp;gt;&amp;#39;; }else{ if(p==0){ html = labelHtml+&amp;#39;1&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; }else{ html += &amp;#39;&amp;lt;span class=&amp;quot;showpageNum&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+ (p+1) +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; } } if(eFlag ==0 &amp;amp;&amp;amp; p == thisNum){ downPageHtml = &amp;#39;&amp;lt;span class=&amp;quot;showpage&amp;quot;&amp;gt; &amp;lt;a href=&amp;quot;&amp;#39;+htmlMap[p]+&amp;#39;&amp;quot;&amp;gt;&amp;#39;+ downPageWord +&amp;#39;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;&amp;#39;; eFlag++; } } } if(thisNum&amp;gt;1){ if(!isLablePage){ html = &amp;#39;&amp;#39;+upPageHtml+&amp;#39; &amp;#39;+html +&amp;#39; &amp;#39;; }else{ html = &amp;#39;&amp;#39;+upPageHtml+&amp;#39; &amp;#39;+html +&amp;#39; &amp;#39;; } } html = &amp;#39;&amp;lt;div class=&amp;quot;showpageArea&amp;quot;&amp;gt;&amp;lt;span style=&amp;quot;COLOR: #000;&amp;quot; class=&amp;quot;showpageOf&amp;quot;&amp;gt; Pages (&amp;#39;+(postNum-1)+&amp;#39;)&amp;lt;/span&amp;gt;&amp;#39;+html; if(thisNum&amp;lt;(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += &amp;#39;&amp;lt;/div&amp;gt;&amp;#39;; var pageArea = document.getElementsByName(&amp;quot;pageArea&amp;quot;); var blogPager = document.getElementById(&amp;quot;blog-pager&amp;quot;); if(postNum &amp;lt;= 2){ html =&amp;#39;&amp;#39;; } for(var p =0;p&amp;lt; pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&amp;amp;&amp;amp;pageArea.length&amp;gt;0){ html =&amp;#39;&amp;#39;; } if(blogPager){ blogPager.innerHTML = html; } } &lt;/script&gt; &lt;script type=&#039;text/javascript&#039;&gt; var thisUrl = home_page_url; if (thisUrl.indexOf(&amp;quot;/search/label/&amp;quot;)!=-1){ if (thisUrl.indexOf(&amp;quot;?updated-max&amp;quot;)!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf(&amp;quot;/search/label/&amp;quot;)+14,thisUrl.indexOf(&amp;quot;?updated-max&amp;quot;)); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf(&amp;quot;/search/label/&amp;quot;)+14,thisUrl.indexOf(&amp;quot;?&amp;amp;max&amp;quot;)); } } var home_page = &amp;quot;/&amp;quot;; if (thisUrl.indexOf(&amp;quot;?q=&amp;quot;)==-1 &amp;amp;&amp;amp; thisUrl.indexOf(&amp;quot;.html&amp;quot;)==-1){ if (thisUrl.indexOf(&amp;quot;/search/label/&amp;quot;)==-1){ document.write(&#039;&amp;lt;script src=&amp;quot;&#039;+home_page+&#039;feeds/posts/summary?alt=json-in-script&amp;amp;callback=showpageCount&amp;amp;max-results=99999&amp;quot; &amp;gt;&amp;lt;/script&amp;gt;&#039;) }else{document.write(&#039;&amp;lt;script src=&amp;quot;&#039;+home_page+&#039;feeds/posts/full/-/&#039;+lblname1+&#039;?alt=json-in-script&amp;amp;callback=showpageCount2&amp;amp;max-results=99999&amp;quot; &amp;gt;&amp;lt;/script&amp;gt;&#039;) } } &lt;/script&gt;


4.Salve as alterações

Marcadores: ,

No Response to "Como colocar páginas numeradas no Blogger"

Leave A Reply

Assinar: Postar comentários (Atom)
Related Posts with Thumbnails