Templates e Acessórios: Menu de navegação por página, alguns modelos

Vamos modernizando, vamos modificando, vamos melhorando, vamos colocar um menu de navegção de página e substituir "Postagens antigas" no Blogger.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Procure por </body>

Acima dele cole o seguinte código:

<script type='text/javascript'>
var pageCount=7;
var displayPageNum=3;
var upPageWord ='« ';
var downPageWord =' »';
</script>
<script src='https://sites.google.com/site/paginblogger/numeradas/pagenav.js'/>
<script type='text/javascript'>
//<![CDATA[
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='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+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){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">'+thisNum+'</span>'}else{if(p==0){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++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="" class="showpageOf"> Paginas '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=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){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+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){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'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++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="" class="showpageOf"> Páginas ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=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){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

Implementar CSS

No modelo de seu blog", clique em "Personalizar"

Ao abrir essa janela, vá em Avançado -------> Adicionar CSS

Copie o código do modelo de sua preferência e cole no local indicado, como nas imagens acima.

Modelo 1

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
background: #000;
padding: 12px 2px;
}
.showpageOf{
background:#0282dd;
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 8px 0 0;
color:#222;
}
.showpageNum a{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#6f6f6f;
color:#fff;
border:1px solid #39312e
}
.showpageNum a:hover{
padding:8px 8px;
font:16px Arial,Verdana;
color:#fff;
background:#0282dd;
border:1px solid #00558f
}
.showpageArea{
margin:10px 0;
font:16px Arial,
}
.showpagePoint{
color:#fff;
padding:8px 8px;
font:16px Arial,Verdana;
margin:2px;
border:1px solid #00558f;
background:#0282dd;
text-decoration:none
}
.showpage{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#6f6f6f;
color:#fff;
border:1px solid #39312e;
}
.showpage a{
padding:8px 8px;
font:16px Arial,Verdana;
text-decoration:none;
color:#fff;
}
.showpage:hover{
padding:8px 8px;
font:16px Arial,Verdana;
margin:0 4px;
text-decoration:none;
background:#0282dd;
color:#fff;
border:1px solid #00558f;

}
.showpage a:hover{
padding:8px 8px;
font:16px Arial,Verdana;
text-decoration:none;
background:#0282dd;
color:#cc0000;
}

Modelo 2

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #000;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yi02ckKqOtsxGSJCSwDI2MClaziQ9L5Pi6PBeAP4DTcwXiuMPYqRnMdighYUnTx5q9GGV_ThK-vqjcYHH_qkefFV96u3J1toSrwtxbqhHd-rKKcpCuQXIe2nFL3r7mEbUDlwYn_8MII/s1600/background-brushed2.jpg) repeat;
padding: 12px 2px;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

.showpageOf{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
padding:8px 8px;
margin:0 8px 0 0;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
.showpageNum a{
padding:8px 8px;
margin:0 4px;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
border:1px solid #808080
-moz-box-shadow: inset 0 0 2px 2px #888;
-webkit-box-shadow: inset 0 0 2px 2px#888;
box-shadow: inset 0 0 2px 2px #888;
}

.showpagePoint{
padding:8px 8px;
margin:2px;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
text-decoration:none
-moz-box-shadow: inset 0 0 2px 2px #888;
-webkit-box-shadow: inset 0 0 2px 2px#888;
box-shadow: inset 0 0 2px 2px #888;
}
.showpage{
padding:8px 8px;
text-decoration:none;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
border:1px solid #808080;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTsxSJO9B7gS6NBSl66JArU5s_BOgnmwyNLj8kHMhk6PlppiWglBgEkv4V1P5LYd9VajLlDjM4icLN8sHs7bnUnBj3TcfRqT8KS7t5ESQBdpcSc7t5FJo9L6mwWQJz1X68Umc_Cb1a3Mc/s1600/metal.png) repeat;
}

.showpage a:hover{
text-decoration:none;
border:1px solid #808080;
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
.showpageNum a:hover{
background: url(background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDANyFFX784OLVKJjwflII4xGqvTdaybR4HRwN_3gnvngR2yw4_99NJO5x8CyfCApI4DiNWi9rXLtaL6k9tVizsULnU60oh0yMZpcsKSK_MOfCI-AaTb6VsNOJly_Blp72evOYEu9rCNM/s1600/metal2.png) repeat;) repeat;
border:1px solid #808080;
}

Modelo 3

/*Menu de navegação ---------------------------------------------------------------------------------- */
.showpageArea {
margin:10px 0;
color: #fff;
font:16px Arial,Verdana;
text-shadow: black 0.1em 0.1em 0.2em;
background: #000;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 12px 2px;
-moz-box-shadow: 0 0 2px 2px #888;
-webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
}

.showpageOf{
background:#cc0000;
-moz-border-radius: 35px;
border-radius: 35px;
padding:8px 12px;
margin:0 8px 0 0;
}
.showpageNum a{
padding:8px 12px;
color: #000
margin:0 4px;
text-decoration:none;
background:#F9C527;
-moz-border-radius: 35px;
border-radius: 35px;
}

.showpagePoint{
padding:8px 12px;
margin:4px;
background:#1F60F3;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage{
padding:8px 5px;
margin:4px;
background:#ffffff;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
background: #ccc;
}

.showpage a:hover{
text-decoration:none;
}
.showpageNum a:hover{
background: #fff;
}

Mais modelos aqui

Nenhum comentário:

Postar um comentário

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.

Templates e Acessórios

22 de jan. de 2013

Menu de navegação por página, alguns modelos

Posts Relacionados

Nenhum comentário:

Postar um comentário

Quem Sou

Postagens populares

Posts aleatórios