Como colocar páginas numeradas no Blogger

Este hack da uma aparência mais de site ao seu Blog pois permite navegar por páginas e não por simples postagens, o que é um efeito muito bom que garante uma boa navegação sem ter que ficar procurando por categorias que nem sempre são fáceis de achar uma que tem o que queremos.Para inserir este hack é fácil mais lembre se de baixar o modelo completo.Veja como aplica-lo:


1.Faça login no Blogger


2.Vá para Layout->Editar HTML
E utilizando as teclas Ctrl e F procure pelo código abaixo:
]]</b:skin>
Agora antes dele insira o código abaixo:
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
3.Agora procure pelo código abaixo:
<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/> </b:section>

Agora abaixo deste código insira o código abaixo personalizando de acordo com a nota :

<script type='text/javascript'> var home_page_url = location.href; var pageCount=10; var displayPageNum=6; var upPageWord ='Previous'; var downPageWord ='Next'; 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 =''; htmlMap[htmlMap.length]='/'; postNum++; for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount; } var banyaknomer = htmlMap.length; if (json.feed.entry.length % pageCount == 0){ var banyaknomer = htmlMap.length -1 ; postNum=postNum-1; }; for(var p =0;p< banyaknomer;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="COLOR: #000;" class="showpageOf"> Pages ('+(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; htmlMap[htmlMap.length]=labelHtml; postNum++; for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount; itemCount++; } var banyaknomer = htmlMap.length; if (json.feed.entry.length % pageCount == 0){ var banyaknomer = htmlMap.length -1 ; postNum=postNum-1; }; for(var p =0;p< banyaknomer;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="COLOR: #000;" class="showpageOf"> Pages ('+(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; } } </script> <script type='text/javascript'> 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 && thisUrl.indexOf(".html")==-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>


4.Salve as alterações

Como adicionar a opção “Responder Comentários” no Blogger

Este é um serviço que o Blogger deveria ter naturalmente em sua área de comentário, para que o escritor possa interagir com o leitor de forma fácil. Mas como ainda não possui esta opção nativamente temos fazer uma alteração que ainda sim dão dá uma função satisfatória mas como muitos diriam “Quebra o galho”, então veja abaixo como inserir em seu blog.

Inserindo o Hack ao Blogger

1) Acesse o painel do Blogger(blogger.com)

2) Vá em "Layout/Design"->"Editar HTML"->Marque a opção "Expandir Modelos de Widgets"

3) Procure o seguinte trecho no seu HTML utilize as teclas “CTRL” e “F”:

<data:commentPostedByMsg/>

Abaixo do código acima insira o seguinte adaptando de acordo com seu blog:

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-DO-SEU-BLOG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Responder comentário]</a></span>

Obs.: Em vermelho substitua pelo ID do seu blog, se não sabe veja o pequeno tutorial abaixo:

1) Acesse Layout/Design no Blogger

2) Observe o endereço na “barra de endereços” do seu navegador:

Os números circulados em vermelho são o id do seu blog basta substitui-lós no código.

Em verde é o titulo do link, que pode ser o que você quiser.

4) Salve as alterações. Você verá algo parecido com imagem quando clicar no link de resposta:

E na área de comentário aparecerá algo como a imagem seguinte:

Considerações

Há vários templates na blogosfera por isso é bom ressaltar que existem outros locais nos quais o código pode ser inserido veja:

Abaixo de:

<dd class='comment-footer'>

ou

abaixo de:

<data:comment.author/>

Pronto seu blog agora possui um recurso muito útil de resposta a comentários

Como colocar a Navbar no final da página - Blogger

A Navbar é a barra de serviços padrão do Blogger(que apesar de padrão é opcional), ela oferece alguns recursos básicos e que podem ser muito úteis, ela é exibida no topo da página, mas hoje veremos como coloca-lá no final. Com o uso de CSS^{[Folha de Estilo]}, veja como fazer abaixo:

1) Acesse o painel do Blogger(blogger.com)

2) Vá em Layout/Design-> Editar HTML

3) Procure pelo seguinte:

]]></b:skin>

E antes do código acima insira o próximo:

#navbar-iframe { 
position: fixed; 
z-index:999; 
right: 0px; 
bottom: 0px; 
left: 0px; 
}

4) Salve as alterações e visualize.