星期日, 5月 11, 2008

繼續加油~~~加上[延伸閱讀]的功能吧~~~~[2008/5/17 update]


看完一篇文章之後,
如果有興趣我通常都會看看那個作者還有沒有其他相關的文章~~~
這個時候如果那個網站有[延伸閱讀]的功能就派上用場啦~~~
自從有了上次那個[繼續閱讀]的經驗之後~~~
我相信一定可以用吸星大法(其實就是剪剪貼貼啦)來為我自己的blog加上這樣的功能~~~
接下來~~~有需要的人就開始跟著我施展吸星大法吧~~~



SETP 1.
先登入你的blogger吧,然後到版面配置\修改HTML,記得把[展開小裝置範本]打勾。


SETP 2.
找到 <head> 的標籤,然後在後面貼上下面的code
---------------------------------------------------------------------------------
<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('Related Posts: <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>

---------------------------------------------------------------------------------

SETP 3.
找到下面的這一段 code
---------------------------------------------------------------------------------
<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>


---------------------------------------------------------------------------------
在紅色的</b:loop>之前塞入下面那一段紅色的code
---------------------------------------------------------------------------------
<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>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=RelatedLabels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>

---------------------------------------------------------------------------------
這邊做完之後記得範本要存檔哦~~~
不然你就得再剪貼一次了!


結束!!!沒錯~~~這樣就結束啦!
快去試看看吧~~~

[2008/5/17 update]
那天在改版的時候一直失敗~~~
原來是少放了一段~~~~

---------------------------------------------------------------------------------
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
ShowRelatedPosts(&#39;<data:post.url/>&#39;);
</script>
</b:if>
---------------------------------------------------------------------------------

這一段就配合自己的blogger找地方放吧!
只有一個原則,
就是要放在上一段的後面!

註:以上的文章是參考[Abin's Tech Note]

沒有留言:

最新文章