Vamos ver- como adicionar- essa Página Menu de Navegação Widget:

hoje eu gostaria de usar um método diferente para adicionar esta página Menu de Navegação ao nosso Blogger Blog. A maioria dos blogueiros vai preferir este método para adicionar navegação de página do menu, pois este método é muito mais fácil do que a edição Blogger Template.

Vamos ver como adicionar essa Página Menu de Navegação Widget:

Passo 1: Entre na sua conta do Blogger e navegar para seção de layout. Agora, clique em Adicionar Elemento de enlace lá.

Etapa 2: Na janela que o elemento de página, escolha HTML / JavaScript.

Passo 3: Agora adicione esta Javascript nessa janela.

<style>
. showpageArea (padding: 0 2px; margin-top: 10px; margin-bottom: 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;
)
</ style>

<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='+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% de resultados 3A00 & max-=' + 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 + '</ 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 + '</ 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 <= "padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px; color: # 000000; border: 1px solid # 333; background-" class = showpage " > Page '+ thisNum + "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 Accessories </ a> </ div>

Depois de adicionar este Javascript você precisa arrastar e soltar o widget abaixo do Blog Posts widget principal. Veja tiro essa tela

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.

Agora salve o seu modelo.
Isso é que agora temos acrescentado Page widget menu de navegação para o nosso blog com êxito.

Espero que vocês sentirão este método é mais fácil do que a um passado.

 

Technorati Marcas: Vamos,ver,como,adicionar,essa,Página,Menu,de,Navegação,Widget

• 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