Hack Navegador de Paginas Para Blogger Blogspot

Respondendo ao pedido do adm do blog "Eusocurtooqueebom":
EU SO CURTO O QUE E BOM: Eu queria saber se tem como inserir um navegador de paginas no blogger, e possivel isso, vou ti mando o link da imagem e o site que encontrei esse assunto.
Ele quer um navegador como o da imagem abaixo, então encontrei um site que explicasse melhor os códigos do gosublogger e traduzi e adaptei algumas coisas:

Vamos começar:

Passo 1: Faça login na sua conta do Blogger e navegue até a seção Layout .
Agora acesse a subguia editar HTML.

Etapa 2: Pesquise e encontre
esta linha

]]></b:skin>

e adicione o esse código CSS acima dessa linha.

CSS CODE WITH IMAGE :

.showpageArea {font-size: 11px;
width:470px;background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg)
no-repeat left top; padding-top:10px;padding-bottom:10px;padding-right:15px;padding-left:30px;
color:#003366;text-align:left;

}

.showpageArea a {

color:#0F0;

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

color:#0F0;

border:1px solid #FFF;

margin:0 10px;

padding:0 5px 0 8px;

}

.showpageNum a:hover {

color:#FE8314;

border:1px solid #0071A5;

background-color:#FFF;

}

.showpagePoint {

color:#FE8314;

margin:0 8px 0 4px;

}

.showpage a {

text-decoration:none;

color:#FFF;

padding:0 2px 0 4px;

}

.showpage a:hover {

color:#FE8314;

text-decoration:underline;

} .showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#cc0000;

}

Se você não quiser imagem de fundo, remova a URL da imagem e coloque o código da
cor lá.

Você pode ver alguns textos estão em vermelho, você pode alterar os textos a sua
escolha.

Ele deve ser semelhante a este:

Quando você adiciona CSS código para o seu modelo, ele deve ser semelhante a
esta

Etapa 3: Agora busca por este código ou relacionados em seu modelo (não há
necessidade de ampliar widgets)

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

Agora Adicione Este script logo abaixo do </b:section>

&lt;script type=&quot;text/javascript&quot;&gt;



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length)
: &quot;&quot;;

thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;))
: thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= &#39;&#39;;

var upPageHtml =&#39;&#39;;

var downPageHtml =&#39;&#39;;



var pageCount =
2;

var displayPageNum =
3;

var upPageWord = &#39;Back&#39;;

var downPageWord = &#39;Next&#39;;







var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a
href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;



for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=&#39;&#39;){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=&#39;&#39;){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

itemCount++;

}

}



for(var p =0;p&lt; htmlMap.length;p++){

if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

if(fFlag ==0 &amp;&amp; p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+
upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+
upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}



fFlag++;

}



if(p==(thisNum-1)){

html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;

}else{

if(p==0){

if(isLablePage){

html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

}

}else{

html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+
(p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;

}

}



if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+
downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

eFlag++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){



if(thisNum&gt;1){

if(!isLablePage){

html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39;
&#39;+html +&#39; &#39;;

}else{

html = &#39;&#39;+labelHtml + +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39;
&#39;+html +&#39; &#39;;

}

}



html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR:
#000;&quot; class=&quot;showpage&quot;&gt; Pages (&#39;+(postNum-1)+&#39;):
&lt;/span&gt;&#39;+html;



if(thisNum&lt;(postNum-1)){

html += downPageHtml;



}



if(postNum==1) postNum++;

html += &#39;&lt;/div&gt;&#39;;



if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName(&quot;pageArea&quot;);

var blogPager = document.getElementById(&quot;blog-pager&quot;);



if(postNum &lt;= 2){

html =&#39;&#39;;

}



for(var p =0;p&lt; pageArea.length;p++){

pageArea[p].innerHTML = html;

}



if(pageArea&amp;&amp;pageArea.length&gt;0){

html =&#39;&#39;;

}



if(blogPager){

blogPager.innerHTML = html;

}

}



}

&lt;/script&gt;



&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;;
type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;'>
<a href='http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html'>Grab
this Widget ~ </a><a href="http://www.gosublogger.com/">GosuBlogger</a></div>

No código acima você pode editar o código das cores ao seu gosto.



1: pageCount var = 2;



O dígito em vermelho representa número de postos de trabalho a ser apresentado
na única página. Altere o dígito para mostrar as muitas páginas que você deseja.




por exemplo:



No meu blog eu ter colocado esse valor como 2. Em
cada página, você pode ver apenas 2 lugares.





2: displayPageNum var = 3;



aqui em vermelho representa o dígito do número de páginas a serem listados.



Por exemplo:



No meu blog eu ter escolhido 3 e, em seguida, 3 páginas serão mostradas.



É isso que agora temos acrescentado Page menu de navegação hack para o nosso
blog com êxito.



CSS código que irá atender quase todos os modelos. Por favor, não retire o link
de crédito.



Se você tiver alguma dúvida pergunte no comentário dessa seção. Os comentários
são muito bem-vindos, por favor, dar-me os seus comentários sobre este Blogger
Hack.

Conteúdo Traduzido e adaptado dos sites:

http://rias-techno-wizard.blogspot.com
http://www.gosublogger.com