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”翻译成中文，让中文使用者可以获得帮助，现在就来看看：

[adsense][/adsense]

最新文章这个小工具最主要的优点就是不只显示文章标题，还可以显示文章摘要或片段，这很容易订制或是使用不同的样式，要跟你自己的设计配合，你需要修改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