星風寫語: blogger：增加依標籤分類的相關文章

文章末端，增加延伸閱讀，讓訪客容易找到相關文章

第一個方式來源：skyvee的依標籤分類的相關文章(related posts)功能
效果如下：

1.後台-->版面配置-->修改HTML-->打勾V展開小裝置範本
2.下面的語法複製到 <data:post.body/>後面一行。
(官方樣本的話，可以考慮複製到<div class='post-footer-line post-footer-line-3'>後面)

<!-- 延伸閱讀 -->      

<b:if cond='data:blog.pageType == &quot;item&quot;'>       

<div class='similiar'>       

<div class='widget-content'>       

<h3><green>延伸閱讀</green> : </h3>       

<div id='data2007'/>       

<script type='text/javascript'>       

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;       

maxNumberOfLabels = 1; //延伸標籤數        

maxNumberOfPostsPerLabel = 6; //文章數   

function listEntries10(json) {      

var ul = document.createElement(&#39;ul&#39;);       

var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?       

json.feed.entry.length : maxNumberOfPostsPerLabel;       

for (var i = 0; i &lt; maxPosts; i++) {       

var entry = json.feed.entry[i];       

var alturl; 

for (var k = 0; k &lt; entry.link.length; k++) {      

if (entry.link[k].rel == &#39;alternate&#39;) {       

alturl = entry.link[k].href;       

break;       

}       

}       

var li = document.createElement(&#39;li&#39;);       

var a = document.createElement(&#39;a&#39;);       

a.href = alturl; 

if(a.href!=location.href) {      

var txt = document.createTextNode(entry.title.$t);       

a.appendChild(txt);       

li.appendChild(a);       

ul.appendChild(li);       

}       

}       

for (var l = 0; l &lt; json.feed.link.length; l++) {       

if (json.feed.link[l].rel == &#39;alternate&#39;) {       

var raw = json.feed.link[l].href;       

var label = raw.substr(homeUrl3.length+13);       

var k;       

for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);       

label=decodeURI(label); //避免中文標籤出現亂碼       

var txt = document.createTextNode(label);       

var h = document.createElement(&#39;b&#39;);       

h.appendChild(txt);       

var div1 = document.createElement(&#39;div&#39;);       

div1.appendChild(h);       

div1.appendChild(ul);       

document.getElementById(&#39;data2007&#39;).appendChild(div1);       

}       

}       

}       

function search10(query, label) {       

var script = document.createElement(&#39;script&#39;);       

script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;       

+ label +       

&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);       

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);       

document.documentElement.firstChild.appendChild(script);       

}       

var labelArray = new Array();       

var numLabel = 0;       

<b:loop values='data:posts' var='post'>       

<b:loop values='data:post.labels' var='label'>       

textLabel = &quot;<data:label.name/>&quot;;       

var test = 0;       

for (var i = 0; i &lt; labelArray.length; i++)       

if (labelArray[i] == textLabel) test = 1;       

if (test == 0) {       

labelArray.push(textLabel);       

var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?       

labelArray.length : maxNumberOfLabels;       

if (numLabel &lt; maxLabels) {       

search10(homeUrl3, textLabel);       

numLabel++;       

}       

}       

</b:loop>       

</b:loop>       

</script>       

</div>       

</div>       

</b:if>

3.紅字部份可以進行調整，
其中~~<green></green>~~是我自己設定的底線樣式，可以刪除、或參考這一篇：CSS：幫文字加上底線

第二個方式來源：Related Posts with Thumbnails for Blogger效果相同，但是會增加簡圖(從文章的圖片抓)
(另外還有一種LinkWithin 用縮圖顯示部落格「相關文章」
也可以參考)

1.在</head>前面放入css樣式

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}



#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}



#related-posts  a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

 </head>

2.把下面語法放到要呈現的位置
(不知道要放哪的話，可以放在官方樣本的class='post-footer-line post-footer-line-1'後面一行)

<!-- Related Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

 var maxresults=5; //文章數

var relatedpoststitle="Related Posts"; //相關文章標題

removeRelatedDuplicates_thumbs(); 

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->