另一种以标签显示最新文章的小插件－－ViewTab Widget

不好意思第一次弄，代码有点乱，不过已经有最新更新的了，在博客里显示最新文章的小插件－－ViewTab Widget，功能更全面。
第一步： 在

]]></b:skin>

后面加入下面的代码

<script type='text/javascript'> // This credit must be included in all your derived usages. // "cb" is intended to be a common library, where different widgets would // utitlize the shared operations such as getTitle, getLink, etc. from a json object. var cb = { // search function requires these parameters: // 1. query: a blogger address, such as "sisea.blogspot.com", // 2. type: type of return data, either "comments" or "posts", // 3. start: the start-index parameter (where to start extracting data) // 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back) // 5. func: the returned function the json object will feed. search: function(query, type, start, increment, func) { var script = document.createElement('script'); script.setAttribute('src', 'http://' + query + '/feeds/' + type + '/default?alt=json-in-script&start-index=' + start + '&max-results=' + increment + '&callback=' + func); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); }, // searchLabel function return a result of posts w/ a label query // it requires these parameters: // 1. query: a blogger address, such as "sisea.blogspot.com", // 2. an array of labels // 3. func: the returned function the json object will feed. searchLabel: function(query, label, func) { var script = document.createElement('script'); script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + label + '?alt=json-in-script&callback=' + func); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); }, // getTotalResults needs the json object, and it'll return the total number of comments (or posts) of the blog. getTotalResults: function(json) { return json.feed.openSearch$totalResults.$t; }, // getStartIndex gets the start index of a search inside an json object. getStartIndex: function(json) { return json.feed.openSearch$startIndex.$t; }, // getLink return a href link if "name" matches the content inside "a" tags) of the link getLink: function(entry, name) { var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == name) alturl = entry.link[k].href; } return alturl; }, // getTitle gets the title of the title of an entry of a json object. getTitle: function(entry) { return entry.title.$t; }, // getContent gets the content inside an entry of a json object. getContent: function(entry) { return entry.content.$t; }, // getCommentAuthor: gets the commenter name inside an entry of a json object. getCommentAuthor: function(entry) { return entry.author[0].name.$t; } }; </script>

第三步： 在任何“<b:widget>”之间加入下面的代码

<b:widget id='HTML102' locked='false' title="What's News?" type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> <div id='doc'> <div id='demo' class='yui-navset'> <ul id='tabNav' class='yui-nav' /> <div id='tabContent' class='yui-content' /> </div> </div> <h6 id='own102'></h6> </div> <script type='text/javascript'> // This credit must be included in all your derived usages. // Initializing tab view var tabView = new YAHOO.widget.TabView('demo'); // Place to place labels, and number of maximum posts allowed var labels = ["Latest Posts", "JSON Hacks", "Label Hacks", "Free Templates", "Notable Hacks"]; var uTab = { nPost : 10 }; // this is the special object, one specialized for each widget, to be written in such // a way that myriad of these objects all used the same library "cb" defined above. var cTabView = { // this is the place to define the blog name for subsequent retrieval data web : "sisea.blogspot.com", // private value to store the "selected" status of tab. selected : 0, // This is the callback funtion and is called everytime we have a result. If we // call 10 times, this function will be automatically called 10 times, for example. // Inside, we make a loop through all elements. For each element, the common functions // from "cb" is called (reused) repeatedly to form a piece of HTML "text". // At the end, "innerHTML" is called to add this data to the "data" div we defined inside // the widget. listOneTab: function(json, tab, content) { var tabText = ''; var text = ''; for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(this.web.length+21); var labelText = label; for (k=0; k<20; k++) labelText = labelText.replace("%20", " "); } } tabText += "<li><a href='#" + label + "'>" + labelText + "</a></li>"; text += "<div id='" + label + "'><ul>"; var numberPost = (json.feed.entry.length <= uTab.nPost) ? json.feed.entry.length : uTab.nPost; for (var i = 0; i < numberPost; i++) { var entry = json.feed.entry[i]; text += "<li>" + "<a href='" + cb.getLink(entry, "alternate") + "'>" + cb.getTitle(entry) + "</li>"; } text += "</ul></div>"; if (this.selected == 0) { tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: text, active: true })); // Subsequent tab is no longer selected! this.selected = 1; } else tabView.addTab( new YAHOO.widget.Tab({ label: labelText, content: text })); }, // This function serves as a "stub", allowing multiple parameters to be called // instead of the limitation of "one" default value. callcommentJson: function(json) { this.listOneTab(json, 'tabNav', 'tabContent'); } }; var p1 = document.createElement('span'); document.getElementById('own102').appendChild(p1); p1.innerHTML = txt; // Activating calls! for (var i=0; i < labels.length; i++) if (labels[i]) cb.searchLabel(cTabView.web, labels[i], 'cTabView.callcommentJson'); </script> </b:includable> </b:widget>

第四步: 在第三步的代码里找到下面的代码，把标签替换成你的。

var labels = ["Latest Posts", "JSON Hacks", "Label Hacks","Free Templates", "Notable Hacks"];

第五步： 继续在第三步的代码里找到下面的代码，设置你要显示文章的数目。

var uTab = {nPost : 10};

第六步： 继续在第三步的代码里找到下面的代码，换成你的博客地址

web : "sisea.blogspot.com",

第七步： 在第二步代码中找到下面的代码，设置插件的大小。

#demo { width:40em; }

我试用了一下，发现不支持中文的标签，我用我的英文标签“google fans”试验一下一切正常，期待高手修改下，使它支持中文呀。