Blogger技巧三

我的Blogger又做了一次修改，这次主要修改的是：

• 在每篇文章后面，添加了“相关文章”模块
  

相关文章模块的就是找出和该篇文章有相同标签的文章，这个hack的好处是可以删掉重复的文章和自身文章的列队。这样，就只显示与该文章有相同标签的其它文章了。
关于操作方法，请点击到加入相关文章功能了解。

• 废弃原先最新文章模块，启用新的最新文章模块
  

这个最新文章的模块使用更灵活，对于输出的篇数可以自由设定，在下角有一个统计的功能。并且，当你文章多的时候，有一个<<让你点选查看更多的列表。
操作非常简单，就是在页面元素里添加一个(HTML/Javascript)元素就可以了。其代码如下：
<div id="newPosts">
<noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
var nPostStartIndex = 6;
var nPostShow = 10;

function showRecentPosts(nIndex) {
if (!nIndex)
nIndex = nPostStartIndex;
var sFeedURL = '/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
var script = document.createElement('script');
document.getElementById('newPosts').innerHTML = 'Loading <blink>...</blink>';
script.setAttribute('src', sFeedURL);
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

function generatePosts(json) {
function compareentry(a,b) {
order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
return 0-order;
}

var sHTML = '<ul>';
var sortentry = json.feed.entry.sort(compareentry);
var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
for (var i = 0, Post; Post = sortentry[i]; i++) {
if (i >= nPostShow)
break;
var title = Post.title.$t;
var link = Post.link[0].href;
var timestamp=Post.published.$t.substr(0,10);
sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';
}
sHTML += '</ul>';
sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
document.getElementById('newPosts').innerHTML = sHTML;
}

function generatePostLink(nFetch, nIndex, nTotalPost) {
var bOld = (nFetch > nPostShow);
if (bOld) nFetch = nPostShow;
var sResult = '<p align="right">Recent '+nIndex+'-'+(nIndex+nFetch-1)+', total: '+nTotalPost+'.  ';
if (nIndex > nPostStartIndex)
sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts"><<</a>  ';
if (bOld)
sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">>></a>';
sResult += '</p>';
return sResult;
}
</script>

<script language="javascript">showRecentPosts();</script>
上面两个HACK，都来自ABIN'S TECH NOTE。该作者有许多非常好的hack，因为可以直接访问该作者的博客，不用通过代理，所以，现在就把该作者的一些hack列出，感兴趣的话就点击进去。
計算 Blog 的文章總數和回應總數
最新文章模組「終極版」
以年月份做分類的導覽連結列 (Year & Month Breadcrumbs)
標籤/搜尋頁面只列出標題 (Simplify the result of label and search)
Blogger 資料來源用法與整理 (Site Feed Usage)
最新文章的加強版：其他的最新文章 (Other Recent Posts)
加入相關文章功能 (Related Post)
計算頁面產生時間
讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)
讓側邊列 (Sidebar) 的元件只在首頁顯示/不顯示
首頁即時可展開的留言回應 (Comment Toggling)
為 Blogger 加入整合日曆 Archive Calendar
Google Analytics
動態調整文章字體大小
更改 HTML 首頁檔頭資訊 (head-content)
在 Blogger 裡加入 Google AdSense
在文末加入文章訂閱圖示
調整 Post footer 的回應連結
在版面格式中放入小圖示

• 另外：更新CODE的功能，即在Blogger中显示程序代码
  

想直接在blogger里贴html源代码似乎是不可能的，因为系统每次都会转换代码。其实只要把代码的<和>换为＆lt;与 ＆gt; 即可（请自己把＆换为&）。

良人的大秘密就提供了这样的hack在文章裡顯示優質的程式碼區

1.先加上CSS在你的布局HTML里。

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

2.在写文章的时候，把代码放在<code></code>之间。注意：<和>仍然要替换为＆lt;与 ＆gt;