【Blogger】讓「較新的文章」，「較舊的文章」顯示標題

「較新的文章」，「較舊的文章」其實是一個很雞肋的功能，上面沒有任何文章的訊息來引導讀者按下去，倒不如從文章分類，或者從網誌存檔、標籤、相關文章等等去找更多想看的文章。

網路上有些很好的範本已經添加了這樣的功能，看起來就比較清楚，也讓讀者有更多資訊決定要不要繼續貢獻PV。

這邊要分享的是這一個教學，再搭配安裝JQuery，集中整理成一篇。




主要是以下三個步驟
安裝JQuery在</head>前面
安裝程式碼到</body>前面
安裝程式碼到]]></b:skin>前面






安裝JQuery在</head>前面

首先請檢查範本裡面是否曾經安裝過JQuery，這裡因為曾經安裝過Wayne Fu大大的G+留言框，所以已經安裝過了，就省略這一步。

如果你的範本裡面沒有安裝過JQuery，請將下面這一行放在</head>前面，比方上圖
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>







安裝程式碼到</body>前面
<!--Start post title code http://www.spiceupyourblog.com -->
<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) {
href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />" + title);
}
href = $("a.blog-pager-older-link").attr("href");
if(href) {
href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");
var title=urlToNavTitle[href];
if(!title) title=urlToPseudoTitle(href);
if(title) $("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />" + title);
}
}, 500);
});
//]]>
</script>
</b:if><a href="http://www.spiceupyourblog.com/">Gadgets By Spice Up Your Blog</a><!--End post title code http://www.spiceupyourblog.com -->
如圖

安裝程式碼到]]></b:skin>前面
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}

如圖

這一個步驟的另一個方法是在下圖位置貼上並套用，效果是一樣的。

不過因為在這個版面看不到結果，有可能不小心會重複套用，造成多餘的程式碼，所以還是自己打開看一看比較安全。



完工～