免外掛在Blogger加入文字版相關文章
有鑑於前一陣子Linkwithin伺服器有問題,導致網頁無法出現"您或許對這些文章有興趣"功能,因此在網路上搜尋相關文章,發現一個無主的程式碼能滿足此要求,把原本使用外掛的延伸閱讀(相關文章)Related Posts功能,或Linkwithin"您或許對這些文章有興趣"、"你可能會有興趣的文章"等外掛,改為在自己範本中直接加入程式碼就能解決的方法,與大家分享。
在Blogger文章下方加入文字版延伸閱讀(相關文章)有三步驟
步驟一、請到 Blogger 後臺 →【範本 】→【 編輯 HTML】
複製以下程式碼,在</head> 的上一行貼上
步驟二、利用Blogger的標籤功能,在標籤中的文章亂數取樣
接著按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F ),搜尋字串 data:post.labels
然後在下方出現的 </b:loop> 前面加入以下程式碼:
步驟三、在想要顯示[延伸閱讀]的地方加入程式碼
例如想在 post-footer-line-3顯示[延伸閱讀],按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F ),搜尋字串 post-footer-line-3
在<div class='post-footer-line post-footer-line-3'>的下一行複製、貼上以下程式碼
以下是我稍微修改的作法,給大家參考:
我的作法是把post-footer-line-2 的[post-labels 標籤區塊],與顯示[延伸閱讀]的地方做結合,然後與 post-footer-line-1 的[張貼者、顯示分享按鈕區塊]換位置,這樣可以讓[延伸閱讀]在[張貼者、顯示分享按鈕]的上面顯示。方法如下:
1、步驟一作法不變,把步驟二、三及post-footer-line-2 的 [post-labels 標籤區塊]合併成以下的程式碼,複製以下的程式碼。
2、然後按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F ),搜尋以下字串:
post-footer-line-1,搜尋出的第一個是在行動版範本裡面,我們這裡是製作網頁版(電腦版)的相關文章功能,所以要貼在搜尋出的第二個<div class='post-footer-line post-footer-line-1'>的下一行。貼完之後,因為合併後的程式碼已包含原本post-footer-line-2 [post-labels 標籤區塊]的程式碼,所以我們還要把 post-footer-line-1下面的post-footer-line-2內的標籤區塊程式碼,如下,全部刪除。
免外掛在Blogger行動版網頁加入文字版相關文章(延伸閱讀)[手機版][移動版]
以上適用於主題:簡單、動態檢視、圖片視窗、頂尖企業、浮水印、輕柔雅緻、旅遊。若要在新範本Contempo、Soho、Emporio、知名,加入文字版相關文章,請詳閱:
Blogge新範本加入文字版相關文章(Contempo、Soho、Emporio、知名)
推薦網誌:宜蘭傳藝中心門票限時優惠買1送1 - 小美輕鬆旅
在Blogger文章下方加入文字版延伸閱讀(相關文章)有三步驟
步驟一、請到 Blogger 後臺 →【範本 】→【 編輯 HTML】
複製以下程式碼,在</head> 的上一行貼上
<script type='text/javascript'>
//<![CDATA[
<!-- Script functions for Related Posts: RelatedLabels(), RemoveDuplicatedPosts(), contains(), ShowRelatedPosts()-->
var relatedPostsNum = 0;
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();
function RelatedLabels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedPostsNum] = entry.title.$t;
relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
relatedUrls[relatedPostsNum] = entry.link[j].href;
relatedPostsNum++;
break;
}
}
}
}
function RemoveDuplicatedPosts(PostUrl) {
var tmpUrls = new Array(0);
var tmpTitles = new Array(0);
var tmpDates = new Array(0);
function contains(a, e) {
for(var j = 0; j < a.length; j++)
if (a[j]==e)
return true;
return false;
}
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmpUrls, relatedUrls[i]) && PostUrl != relatedUrls[i]) {
tmpUrls.length += 1;
tmpUrls[tmpUrls.length - 1] = relatedUrls[i];
tmpTitles.length += 1;
tmpTitles[tmpTitles.length - 1] = relatedTitles[i];
tmpDates.length += 1;
tmpDates[tmpDates.length - 1] = relatedDates[i];
}
}
relatedTitles = tmpTitles;
relatedUrls = tmpUrls;
relatedDates = tmpDates;
}
function ShowRelatedPosts(PostUrl) {
RemoveDuplicatedPosts(PostUrl);
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if (relatedTitles.length > 0) {
document.write('延伸閱讀: <ul>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
if (r < relatedTitles.length - 1)
r++;
else
r = 0;
i++;
}
document.write('</ul>');
}
}
//]]>
</script>
上面的程式碼中的 延伸閱讀:為所顯示的標題,可改為自己想要的標題,如:相關文章、您或許會喜歡等。上面的程式碼中的 5 是顯示[延伸閱讀]的文章數,可自行修改。//<![CDATA[
<!-- Script functions for Related Posts: RelatedLabels(), RemoveDuplicatedPosts(), contains(), ShowRelatedPosts()-->
var relatedPostsNum = 0;
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedDates = new Array();
function RelatedLabels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedPostsNum] = entry.title.$t;
relatedDates[relatedPostsNum] = entry.published.$t.substr(0,10);
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
relatedUrls[relatedPostsNum] = entry.link[j].href;
relatedPostsNum++;
break;
}
}
}
}
function RemoveDuplicatedPosts(PostUrl) {
var tmpUrls = new Array(0);
var tmpTitles = new Array(0);
var tmpDates = new Array(0);
function contains(a, e) {
for(var j = 0; j < a.length; j++)
if (a[j]==e)
return true;
return false;
}
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmpUrls, relatedUrls[i]) && PostUrl != relatedUrls[i]) {
tmpUrls.length += 1;
tmpUrls[tmpUrls.length - 1] = relatedUrls[i];
tmpTitles.length += 1;
tmpTitles[tmpTitles.length - 1] = relatedTitles[i];
tmpDates.length += 1;
tmpDates[tmpDates.length - 1] = relatedDates[i];
}
}
relatedTitles = tmpTitles;
relatedUrls = tmpUrls;
relatedDates = tmpDates;
}
function ShowRelatedPosts(PostUrl) {
RemoveDuplicatedPosts(PostUrl);
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if (relatedTitles.length > 0) {
document.write('延伸閱讀: <ul>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a> - ' + relatedDates[r] + '</li>');
if (r < relatedTitles.length - 1)
r++;
else
r = 0;
i++;
}
document.write('</ul>');
}
}
//]]>
</script>
步驟二、利用Blogger的標籤功能,在標籤中的文章亂數取樣
接著按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F ),搜尋字串 data:post.labels
然後在下方出現的 </b:loop> 前面加入以下程式碼:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=RelatedLabels&max-results=10"' type='text/javascript'/>
</b:if>
上面的程式碼中的 10為[延伸閱讀]相關文章的亂數樣本數目,可自行修改。。<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=RelatedLabels&max-results=10"' type='text/javascript'/>
</b:if>
步驟三、在想要顯示[延伸閱讀]的地方加入程式碼
例如想在 post-footer-line-3顯示[延伸閱讀],按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F ),搜尋字串 post-footer-line-3
在<div class='post-footer-line post-footer-line-3'>的下一行複製、貼上以下程式碼
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
ShowRelatedPosts('<data:post.url/>');
</script>
</b:if>
按下儲存範本後,你的文章就會顯示延伸閱讀(相關文章)Related Posts 。<script type='text/javascript'>
ShowRelatedPosts('<data:post.url/>');
</script>
</b:if>
以下是我稍微修改的作法,給大家參考:
我的作法是把post-footer-line-2 的[post-labels 標籤區塊],與顯示[延伸閱讀]的地方做結合,然後與 post-footer-line-1 的[張貼者、顯示分享按鈕區塊]換位置,這樣可以讓[延伸閱讀]在[張貼者、顯示分享按鈕]的上面顯示。方法如下:
1、步驟一作法不變,把步驟二、三及post-footer-line-2 的 [post-labels 標籤區塊]合併成以下的程式碼,複製以下的程式碼。
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=RelatedLabels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
<div style='font-size: 17px;'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
ShowRelatedPosts('<data:post.url/>');
</script>
</b:if>
</div>
上方程式碼中的font-size: 17px是顯示[延伸閱讀]的文字大小,可自行修改。<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=RelatedLabels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
<div style='font-size: 17px;'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
ShowRelatedPosts('<data:post.url/>');
</script>
</b:if>
</div>
2、然後按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F ),搜尋以下字串:
post-footer-line-1,搜尋出的第一個是在行動版範本裡面,我們這裡是製作網頁版(電腦版)的相關文章功能,所以要貼在搜尋出的第二個<div class='post-footer-line post-footer-line-1'>的下一行。貼完之後,因為合併後的程式碼已包含原本post-footer-line-2 [post-labels 標籤區塊]的程式碼,所以我們還要把 post-footer-line-1下面的post-footer-line-2內的標籤區塊程式碼,如下,全部刪除。
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
這樣就會在 post-footer 區塊的標籤下面,顯示出延伸閱讀的效果,如此網誌般。如果想再行動版網頁也有[相關文章]功能,請詳閱:<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
免外掛在Blogger行動版網頁加入文字版相關文章(延伸閱讀)[手機版][移動版]
以上適用於主題:簡單、動態檢視、圖片視窗、頂尖企業、浮水印、輕柔雅緻、旅遊。若要在新範本Contempo、Soho、Emporio、知名,加入文字版相關文章,請詳閱:
Blogge新範本加入文字版相關文章(Contempo、Soho、Emporio、知名)