Menu de navegação por página com títulos das postagens

Troque as palavras "Postagens antigas" e "Postagens recentes" pelo título das postagens.



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

  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

Agora procure por:  </body>  

Acima dele, cole o seguinte código.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Post titles to Older Post and Newer Post links (without stats skew)
// by MS-potilas 2012. See http://yabtb.blogspot.com/2012/01/add-post-titles-to-older-and-newer-post.html
//<![CDATA[
var urlToNavTitle = {};
function getTitlesForNav(json) {
for(var i=0 ; i < json.feed.entry.length ; i++) {
var entry = json.feed.entry[i];
var href = "";
for (var k=0; k<entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href!="") urlToNavTitle[href]=entry.title.$t;
}
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"></'+'script>');
function urlToPseudoTitle(href) {
var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
if(title) {
title=title[1].replace(/-/g," ");
title=title[0].toUpperCase() + title.slice(1);
if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
}
return title;
}
$(window).load(function() {
window.setTimeout(function() {
var href = $("a.blog-pager-newer-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("&lt;&lt;  &nbsp;" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html( "&gt;&gt; &nbsp;" + title);
}
}, 500);
});
//]]>
</script>
</b:if>

Salve.



Procure então por: </head>

Acime dele cole:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Salve, está prontinho. 

Se  quiser customizar  o menu, procure por:

.blog-pager {
  background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}


E troque por:

.blog-pager {
padding: 4px 3px 4px 3px;
}
.blog-pager  a{
text-shadow: 0.1em 0.1em 0.2em black;
color: #fff;
border: 1px dashed #808080;
background: #ccc;
}
.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font: 12px/14px sans-serif;
padding:6px 8px; margin: 0 10px 3px 10px;
}

Se quiser colocar o menu na parte superior, clique em "Expandir modelos de widget"

Procure por:

<b:include name='nextprev'/> 

e apague.


Agora procure por:


 <b:if cond='data:mobile == &quot;false&quot;'> 


    <!-- posts -->
    <div class='blog-posts hfeed'> 

Troque-o por:



 <b:if cond='data:mobile == &quot;false&quot;'>
    <!-- posts -->
    <div class='blog-posts hfeed'>
<b:include name='nextprev'/>