aqui está um- blogger hack que irá ajudá-lo a mostrar Page Navigation Menu

A maioria disse menu de navegação na parte inferior da página podem aparecer apenas em blogs Wordpress. Mas Ora aqui está um blogger hack que irá ajudá-lo a mostrar Page Navigation Menu na parte inferior da página (veja imagem). Você pode adicionar este Navegação Page hack para o seu modelo do Blogger, quer pela inserção de script para o seu modelo de edição ou você pode adicioná-lo como um widget. Neste post vou escrever só sobre como adicionar este menu de navegação Page editando código do modelo.

Eu usei uma imagem de fundo para esta Página de Navegação hack. Se você quer mostrar isso sem a imagem de fundo basta remover o URL da imagem de fundo.

Vamos começar:

Passo 1: Faça login em sua conta do Blogger e navegue até seção de layout. Agora vá para a sub-aba editar HTML.

Passo 2: procure esta linha ]]></ b: skin> e adicione este código CSS acima dessa linha.

CSS CÓDIGO DE IMAGEM:

. showpageArea (padding: 0 2px; margin-bottom: 10px; margin-top: 10px;
)

. showpageArea a (border: 1px solid # 505050;
color: # 000000; font-weight: normal;
padding: 3px 6px! importante;
padding: 1px 4px; margin: 0px 4px;
text-decoration: none;
)
. showpageArea a: hover (
font-size: 11px;
border: 1px solid # 333;
color: # 000000;
background-color: # FFFFFF;
)

. showpageNum a (border: 1px solid # 505050;
color: # 000000; font-weight: normal;
padding: 3px 6px! importante;
padding: 1px 4px; margin: 0px 4px;
text-decoration: none;

)
. showpageNum a: hover (
font-size: 11px;
border: 1px solid # 333;
color: # 000000;
background-color: # FFFFFF;

)
. showpagePoint (font-size: 11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid # 333;
color: # fff;
background-color: # 000000;

)

. showpage a: hover (font-size: 11px;
border: 1px solid # 333;
color: # 000000;
background-color: # FFFFFF;

)
. showpageNum a: link,. showpage a: link (
font-size: 11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid # 0066CC;
color: # 0066CC;
background-color: # FFFFFF;)

. showpageNum a: hover (font-size: 11px;
border: 1px solid # 333;
color: # 000000;
background-color: # FFFFFF;
)

Deve ser assim:

Passo 3: Agora, procure por este código ou relacionados em seu modelo (não há necessidade de expandir widgets)

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</ b: section>

Adicionar Este script, logo abaixo do </ b: section>.

<script type="text/javascript">

showpageCount function (json) (
thisURL var = location.href;
htmlMap = new Array ();
isFirstPage var = thisUrl.substring (thisUrl.length-14, blogspot.com )==". thisUrl.length / ";
isLablePage thisUrl.indexOf var = ( "/ search / label /")!=- 1;
isPage thisUrl.indexOf var = ( "/ search? atualizado ")!=- 1;
thisLable var = isLablePage? thisUrl.substr (thisUrl.indexOf ( "/ search / label /") +14, thisUrl.length): "";
thisLable = thisLable.indexOf ("?")!=- 1? thisLable.substr (0, ("?")): thisLable;
thisNum var = 1;
postNum var = 1;
itemCount var = 0;
var fFlag = 0;
var eFlag = 0;
var html ='';
upPageHtml var ='';
downPageHtml var ='';

pageCount var = 5;
displayPageNum var = 3;
firstPageWord var = 'First';
endPageWord var = 'Last';
upPageWord var = 'Anterior';
downPageWord var = 'Next';

labelHtml var = '<span class="showpageNum"> <a href = "/ search / label /' + thisLable + '? & max-results = & # 39; + pageCount +'">';

for (var i = 0, post; post json.feed.entry = [i]; i + +) (
var timestamp = post.published. t.substr $ (0,10);
t var title = post.title. $;
if (isLablePage) (
if (!=''){ título
if (post.category) (
for (var post.category c = 0, post_category; post_category = [c], c + +) (
if (encodeURIComponent (post_category.term) == thisLable) (
if (itemCount == 0 (pageCount% itemCount == (pageCount-1))) (
if (thisUrl.indexOf (timestamp)! =- 1) (
postNum thisNum =;
)

postNum + +;
htmlMap [htmlMap.length] = '/ search / label /' + thisLable + '? updated-max =' + timestamp + 'T00% 3A00% 3A00% 2B08 % 3A00 & max-results = '+ pageCount;
)
)
)
) / / end if post.category () (

itemCount + +;
)

) else (
if (!=''){ título
if (itemCount == 0 (pageCount% itemCount == (pageCount-1))) (
if (thisUrl.indexOf (timestamp)! =- 1) (
postNum thisNum =;
)

if (title postNum !='') + +;
htmlMap [htmlMap.length] = '/ search? updated-max =' + timestamp + 'T00% 3A00% 3A00% 2B08% de resultados 3A00 & max-=' + 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) (
if (isLablePage) (
upPageHtml = labelHtml upPageWord + + '</ a> </ span>';
) else (
upPageHtml = '<span class="showpage"> <a href="/">' + upPageWord + '</ a> </ span> ';
)
) else (
upPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">' + + & upPageWord # 39; </ a> </ span> ';
)

fFlag + +;
)

if (p == (thisNum-1)) (
html + = '<span class="showpagePoint"> <u>' thisNum + + '</ u> </ span>' ;;
) else (
if (p == 0) (
if (isLablePage) (
html = labelHtml + '1 </ a> </ span> ';
) else (
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 # 39; </ a> </ span> ';
eFlag + +;
)
) / / end if (p> = (thisNum-displayPageNum-1) & & p <thisNum (+ displayPageNum)) (
) / / end for (var p = 0; p <htmlMap.length, p + +) (

if (thisNum> 1) (
if (isLablePage!) (
html = '<span class="showpage"> <a href="/">' + firstPageWord + '</ a> </ span> '+ upPageHtml +' '+ html +' ';
) else (
html =''+ labelHtml firstPageWord + + '</ a> </ span>' upPageHtml + + '' + html + ' »;
)
)

html = '<div class="showpageArea"> span style <= "font-size: 11px; padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px; color: # 000000; fronteira border: 1px solid # 333; background-color: # FFFFFF; "showpage class =" "> thisNum Page '+ +" de "+ postNum (-1) +' ;: </ span> '+ html;

if (thisNum <(postNum-1)) (
html + = downPageHtml;
html + = '<span class="showpage"> <a href="'+htmlMap[htmlMap.length-1]+'">' ; endPageWord + + '</ a> </ span>';
)

if (postNum == 1) postNum + +;
html + = '</ div>';

if (isLablePage isFirstPage isPage) (
pageArea var = document.getElementsByName (pageArea ");
blogPager var = 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) (
html = blogPager.innerHTML;
)
)

)
</ script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"> </ script>

<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;'> <a href = 'http://www.techieblogger.com/2008/ 07/page-navigation-hack-for-blogger.html '> Grab this Widget ~ Blogger tecnólogo </ a> </ div>

No código acima você pode editar as linhas em vermelho para o seu desejo.

1: var pageCount = 5;

O dígito em vermelho representa o número de postos de trabalho para ser mostrado em uma única página.Alterar o dígito para mostrar quantas páginas você desejar.

Por exemplo:

No meu blog eu pus esse valor como 2. Em cada página você pode ver apenas 2 posts.

2: displayPageNum var = 3;

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

Por exemplo:

No meu blog eu escolhi 3, 3 páginas, em seguida, será mostrada.

Isso é que agora temos acrescentado Page Navigation menu hack para o nosso blog com êxito.

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

Espero que todos vocês vão gostar desta página blogger Navegação hack. Se você tem alguma dúvida por favor pergunte na seção de comentários. Comentários são muito bem vindas, por favor, me dê a sua opinião acerca deste Hack Blogger.

Você também pode adicionar este navegação Page hack no outro método: o estilo Widget.

 

Technorati Marcas: aqui,está,um,blogger,hack,que,irá,ajudá-lo,a,mostrar,Page,Navigation,Menu

• Divulgar no del.icio.us
• Divulgar no Digg
• Adicionar nos Favoritos do Google
• Enviar para o Twitter
• Compartilhar no Facebook
• Compartilhar no Technorati
• Enviar para o MySpace