22 de jan de 2013

Substituir Postagens mais antigas por menu no Blogger



Eis aí, mais alguns modelos de menu de navegação no Blogger para dar aquele estilo a seu template.


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>




E acima dele cole o código abaixo:

<!-- MENU DE NAVEGAÇÃO -->

<script type='text/javascript'>
var pageCount=7;
var displayPageNum=3;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</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>

<!-- MENU NAVEGAÇÃO FIM-->





Salve !



Implementar CSS                                                                             



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





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




Copie o código abaixo e cole no local indicado o modelo escolhido.







Modelo 1


/* Navegação
----------------------------------------------- */
.showpageNum a,.showpage a {
background: #F39C1F; border: 3px 0 3px 0 solid#DB850B;
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
-o-box-shadow: 0px 2px 2px #000;
-ms-box-shadow: 0px 2px 2px #000;
goog-ms-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #000;
font: bold 23px  Arial, Tahoma, Helvetica, FreeSans, sans-serif;
text-decoration: none;
padding:16px 14px;
white-space: nowrap;
color: #fff;
margin: 5px;

}
.showpageNum a:active {
color: #fff;
padding:15px 14px;
margin: 5px;
position: relative; top: 0px;
}
.showpageNum a:hover,.showpage a:hover {
background: #808080;
color: #000;
text-decoration:none;
}
.showpageOf{
display:none;
}
.showpagePoint {
background: #F39C1F; border: 3px 0 3px 0 solid#DB850B;
margin: 5px;
color:#ffffff;
text-decoration:none;
width:36px;
height:16px;
font-size:18px;
padding: 16px 14px;
font: bold 23px  Arial, Tahoma, Helvetica, FreeSans, sans-serif;]
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
-o-box-shadow: 0px 2px 2px #000;
-ms-box-shadow: 0px 2px 2px #000;
goog-ms-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #000;
}

Modelo 2


 /* Menu de Navegação
-------------------------------------------- */
showpageArea {
font-family:"Oswald", Lucida Sans Unicode, Helvetica, Arial, sans-serif;
color: #8B008B;
font-size:18px;
margin:20px;
}
.showpageNum a,
.showpage a{
padding:0px 8px;
margin:0 3px;
text-decoration:none;
background:#fff;
border:1px solid #000;
font-size:19px;
color:#000000;
-webkit-border-radius:5px;-moz-border-radius:8px;
}
.showpageNum a:hover{
background:#F35B1F;
color:#000;
}
.showpagePoint{
color:#000;
font-size:20px;
padding:0 8px;
margin:2px;
-webkit-border-radius:5px;-moz-border-radius:8px;
border:1px solid #000;
background:#F35B1F;
text-decoration:none;
}
.showpageOf{
display:none !important;
visibility:hidden !important
}


Salve. Agora clique em Layout


Modelo 3


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

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

.showpagePoint{
padding:8px 12px;
margin:4px;
border: 1px solid #000;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage{
margin:4px 6px;
background:transparent;
border: 1px solid #000;
-moz-border-radius: 35px;
border-radius: 35px;
padding:8px 12px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.showpage a{
padding:8px 8px;
text-decoration:none;
}
.showpage:hover{
text-decoration:none;
background:#548054;
}

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





Um comentário:

  1. Seu modelo é o Simple por Josh Peterson, o meu é o da Tina Chen modelo LTDA Answer Inc.
    Não funcionou. Vou tentar refazer

    ResponderExcluir

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.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube