Blogger RecentPosts 最新文章插件 V1.0.0

這次ＮＳ利用週末的時間把原本的Blogger Hack: 最新文章 AJAX 縮圖版大改，以JQuery Plugin的方式重現其原面貌，原本的功能一樣沒少，但寫法精簡很多，壓縮之後JS檔案只有3k大小，是個非常輕量化的插件。

這次的最新文章Widget，NS放入了很多強化過後的功能，利如讀取時的overlay，數字跳頁碼，自訂客製參數，都比前一個版本來的有彈性，Plugin化之後要做擴充也比較簡單，預計在下一版本的大更新時加入更多的客製參數與動畫特效。

在此隆重推出《 Blogger RecentPosts 最新文章插件 V1.0.0 》本插件特點有：

1. JQuery插件化，僅需指定一空白DIV元素即可啟動。
2. 內建文章縮圖，對應flickr圖床自動尋找最小縮圖節省頻寬。
3. 動態換頁功能，本版新增數字頁碼可前後快速跳頁。
4. 可自行更換樣式、字串，方便進階使用者客製特化。

安裝方法：

因為這是一套JQuery Plugin，所以要確保網誌內有JQuery的檔案，程式版本至少1.4.0以上，而且不能同時引用兩種版本以免造成衝突。如果先前網誌有安裝其他套件引用了舊版JQuery，請將之移除並替換成最新版本。

再來NS已經將本外掛原碼壓縮並上傳到google code，各位可以直接外連。（但如果你要確保外連的穩定性請自行下載後放到個人網路空間）


進入後台[設計] -> [修改HTML]選項，在</head>之前貼上以下兩行程式碼：
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script charser="utf-8" src='http://jqery-recentposts.googlecode.com/files/recentposts100.js' type='text/javascript'/>JQuery部份是利用Google提供1.4.4版的公用程式，後者空間則是我開的google code project。



接著到[網頁元素]選擇新增一個HTML/Javascript元件，進入編輯模式之後填入以下程式碼：
<style>
.RecentPosts { padding:0; margin:0; width:240px; }
.RecentPosts a { text-decoration:none; color:#333; }
.RecentPosts .display { position:relative !important; font-size:12px; padding:10px 10px 5px; }
.RecentPosts .overlay { width:100%; height:100%; position:absolute; top:0; left:0; z-index:999; color:#fff; background:#000; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; text-align:center; }
.RecentPosts .overlay span { display:block; margin-top:50%; }
.RecentPosts li { list-style:none; height:50px; margin-bottom:5px; }
.RecentPosts li img { float:left; width:50px; height:50px; margin-right:10px; }
.RecentPosts .pager { font-size:9px; clear:both; margin:10px 0 5px; text-align:center }
.RecentPosts .btn { border:1px solid #ccc; padding:2px 3px; margin-right:3px; }
.RecentPosts span.btn { color:#ccc; border:1px solid #fff; }
.RecentPosts span.current, .RecentPosts a.btn:hover { background:#ccc; color:#fff; border:1px solid #999; }
.RecentPosts .copyright { color:#ccc; display:block; font-size:9px; text-align:center; }
</style>

<div id="recentposts"></div>
<script type="text/javascript">

$("#recentposts").RecentPosts();
</script>
前者的部份是CSS樣式，中間有一個空的DIV，id可以自取，之後接一段script就是用JQuery選到這個空白DIV再啟動RecentPosts。

就這樣，完成了，是不是非常簡單呢？

進階使用法：

呼叫這個Plugin時候可以填入一些參數來做變化的，請參見下表。

參數名	預設值	說明
'currentIndex'	1	起始的項目編號，1為網誌第一篇
'displayAmounts'	5	每一頁顯示的文章數
'pagerAmounts'	2	跳頁頁碼的數量，若為2的話則是前後各兩頁加現在頁數共五個數字
'defaultImage'	圖檔url	在沒有找到文章縮圖時會顯示此圖檔，預設為一張no image的圖示
'MSG_PREV'	"上一頁"	上一頁按鈕的字串值
'MSG_NEXT'	"下一頁"	下一頁按鈕的字串值
'MSG_LOADING'	"載入中"	載入時overlay顯示的字串值

填入自定參數的作法如下：
$("#recentposts").RecentPosts({
'displayAmounts':7,
'defaultImage': "http://dl.dropbox.com/u/7604339/blog/nothumb.jpg",
'MSG_LOADING' : "讀取中請稍後"
});
基本上就填入你想要改的東西在一個{}中，參數名稱與值以分號相隔，項次與項次間要用逗號分開，呼叫的時候放在()內。

CSS樣式客製：

元件結構如下：
<div class="RecentPosts">
<div class="display">
<ul>
<li><a><img><span></span></a></li>
...
..
.
</ul>
<div class="pager">
<a class="btn prev"></a>
<a class="btn jump"></a>
...
..
.
<a class="btn next"></a>
</div>
<div class="overlay"></div>
</div>
<a class="copyright"></a>
</div>

除了.display要加relative來定位，還有.overlay要absolute對齊元件最左上方，其他CSS都可以自行變動。

原碼與DEMO： (點選result可直接試用此套件)



以上，歡迎給予錯誤回報或改版建議，我會在下次改版時納入參考。