Demo : http://webapp.heliohost.org/html/blogger_recent_posts_json.htm
使用方法都是一樣很簡單 :
如果你的Template並未加入jQuery，請去設計 / 修改 HTML / 修改範本中，把以下程式碼放在<head>與</head>之間。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
然後在Blogger新增一個HTML/Javascript小工具，然後把下面的程式碼貼上後，再儲存就完成。
大家使用前，需要去調整一下設定 :
maxcount (line 18) - 最多文章顯示數目。
maxlength (line 19) - 長度多於這個值時，用"..."代替。
feedURL (line 48) - 換上你blogger的ID。
樣式方面，大家可以自行去修改。
<script type="text/javascript">
var BloggerFunctions = {
getPosts : function(feedURL) {
var paras = {
alt : 'json-in-script'
};
$.ajax({
url : feedURL,
type : 'GET',
dataType : "jsonp",
success : BloggerFunctions.onGotPostData,
data : paras
});
},
//Parse the JSON post data returned by the Google Blogger API
onGotPostData : function(data) {
var maxcount = 10;
var maxlength = 20;
var feed = data.feed;
var entries = feed.entry || [];
var title = "";
var content = "";
var url = "";
var published = "";
var cnt = 0;
var html = "";
for(var i = 0; i < entries.length; ++i) {
var entry = entries[i];
var title = entry.title.$t;
//var content = entry.content.$t;
var url = entry.link[4].href;
var published = entry.published.$t.substring(0,10);
html += "<a href='" + url +"'><span style='font-family:Arial;color:#333;font-size:11px;font-weight:bold;'>" + "[" + published + "] " + (title.length > maxlength ? title.substring(0, maxlength) + '...' : title) + " </span></a><br />";
cnt++;
if(cnt == maxcount)
break;
}
var dom = $(html);
$('#recent_posts').append(dom);
}
}
$(document).ready(function() {
var feedURL = "http://tatmingstudio.blogspot.com/feeds/posts/default";
BloggerFunctions.getPosts(feedURL);
});
</script>
<div id="recent_posts"></div>
沒有留言:
發佈留言