Blogger/Blogspot 小工具：簡單最新文章

最近我在為Fun Taiwan增加一些SEO的功能，其中一個就是找不到網頁時顯示的自訂錯誤訊息，目前在Fun Taiwan找不到網頁時就只會出現：「Sorry, the page you were looking for in this blog does not exist.」，很簡單，對使用者來說可能沒有幫助，Blogger很有才，可以在Settings選項裡面的earch preferences選項（中文介面就是[設定 | 搜尋偏好設定]）修改。

我的第一個想法就是讓這個頁面可以顯示最新文章的連結，讓朋友去瀏覽，所以找到了「Simple Recent Posts Widget for Blogger/Blogspot」翻譯成中文，讓中文使用者可以獲得幫助，現在就來看看：

最新文章這個小工具最主要的優點就是不只顯示文章標題，還可以顯示文章摘要或片段，這很容易訂製或是使用不同的樣式，要跟你自己的設計配合，你需要修改CSS樣式  – 你可以改變連結或是背景顏色、文字/連結大小跟顏色，這個小工具的功能：

– 只顯示文章標題

– 改變文章數目

– 改變文章片段/摘要的字元數

– 顯示文章日期

看看下面的截圖：

如何增加最新文章小工具到Blogger

步驟1：登入到Blogger Dashboard > 到”Layout（版面配置）”然後點擊”Add a Gadget（新增小工具）”連結

步驟2：從彈出視窗、下拉並選擇 HTML/JavaScript

步驟3：選擇並複製下面其中一個程式碼，貼到新的HTML/JavaScript：

第一種方式：有片段內容的最新文章小工具

<div id=”hlrpsa”>

<script src=”http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js”>

</script>

<script>

var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;

</script>

<script src=”http://blog-address.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts”>

</script></div><a style=”font-size: 9px; color: #CECECE; float: right; margin: 5px;” href=”http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html” rel=”nofollow” >Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<style type=”text/css”>

#hlrpsa a {color: #0B3861; font-size: 13px;}

#rpdr, #rpdr a {color:#808080;}

#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}

.hlrps a {font-weight:bold; }

.hlrpssumm {}

</style>

第二種方式：只顯示文章標題的最新文章小工具

<div id=”hlrpsb”>

<script style=”text/javascript” src=”http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js”></script>

<script style=”text/javascript”>var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>

<script src=”http://blog-address.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”></script></div><a style=”font-size: 9px; color: #CECECE; float: right; margin: 5px;” href=”http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html” rel=”nofollow” >Recent Posts Widget</a>

<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

<style type=text/css>

#hlrpsb a {color: #0B3861; font-size: 13px;}

#rpdr, #rpdr a {color:#808080;}

.bbrecpost2 {

padding-top:6px;

padding-bottom:6px;

border-bottom: 1px #cccccc dotted; }

</style>

步驟4：訂製化：

– 改變 5 (第一種方式) 跟 10 (第二種方式)來顯示你想要的文章數。

– 改變 false 為 true 如果你想要顯示日期的話。

-改變 100 (第一種方式) 如果你想要顯示更多字元的話。

– 要改變連結的顏色及字型大小，修改blue (link連結) 跟 violet (font-size字型大小)的位置

– 要改變文章總結的樣式，修改green (color顏色) 跟 orage (font size自行大小)的位置

– 更換 http://blog-address.com 文字為你的網址

步驟5：儲存你的小工具，就是這樣！請敬請享受！

※雖然這是用在小工具裡頭，但是實測用在文章或頁面上也是可行的。範例：http://funtaiwan.achi.idv.tw/p/blog-page.html