Blogger加入文字版相關文章(免外掛)

要在Blogger新主題範本Contempo、Soho、Emporio、Notable、Essential的文章底部加入文字版的相關文章Related Posts（延伸閱讀、您或許對這些文章有興趣、你可能會有興趣的文章），有以下兩個步驟。

步驟一、請到 Blogger 後臺 →【主題 】→【 編輯 HTML】複製以下程式碼，在</head> 的上一行貼上
<!--Related Post-->
<style type='text/css'>
.related-post-title{font-size:1em;margin: 5px 0px;}
#related-posts {margin: 0px 5px;}
#related-posts a {font-size: 0.8em;color:#970E0E;}
#related-posts ul {list-style-type: disc;padding-left: 20px;color: #000000;}
#related-posts li { padding: 0.7em 1.2em;border-bottom: 1px solid #E2E2E2;}
</style>
<script>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write()}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
<!--Related Post-->

上面的程式碼中的
.related-post-title{font-size:1em;margin: 5px 0px;}
是顯示[相關文章]文字的大小及上下、左右的距離，請自行修改。

related-posts a {font-size: 0.8em;color:#970E0E
是顯示[相關文章]的文章標題文字大小及顏色，請自行修改。

步驟二、在想顯示相關文章的位置貼上以下程式碼，以文章底部的位置為範例

按下【ctrl】鍵 +【 F 】鍵(Mac 請按下CMD + F )，
搜尋字串<data:post.body/>，然後在下方</div>的下一行加入
<!-- Related post Start --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'><h4 class='related-post-title'>相關文章：</h4><b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div> </b:if> <!--Related Post End -->

如下圖

上面的程式碼中的相關文章：可改為你想顯示標題文字，如：延伸閱讀、您或許對這些文章有興趣、你可能會有興趣的文章、、、等。

按下[儲存主題]後，你的文章就會顯示文字版的相關文章Related Posts 。

下圖為此程式碼做出來的效果

如果要在舊的主題(範本)中，如：簡單、動態檢視、圖片視窗、頂尖企業、浮水印、輕柔雅緻、旅遊等主題，加入文字版相關文章，請參考
免外掛在Blogger加入文字版相關文章(延伸閱讀)

推薦網誌：宜蘭傳藝中心門票限時優惠買1送1 - 小美輕鬆旅