11BloggerHacks
我是Blogger新手！搬來以後，擁有強烈個人風格版面一直是我持續努力的目標。我目前只用這些基礎而重要的應用。其實最新回應、最新文章的功能不是在無名痞客邦等BSP設定數字、按下儲存就輕鬆解決了？在自由度百分百的Blogger打造小模組，必須多花上幾倍的時間搜尋、閱讀、實驗，但真的很有成就感，很好玩！在經過無數教學的指導下，發現函式的神奇。這是給自己的統整筆記，也希望和大家分享。
在此深深向寫出好用hack的前輩致謝<(_ _)>
最後更新：2010
--
1. 最新文章及縮圖：讓讀者更明白近期書寫內容！ via
不連續x思考斷x面解構: Blogger Hack: 最新文章 AJAX 縮圖版
副雜誌夥伴NS的最新外掛。安裝後，我一頁頁檢查以前縮圖是否正常出現，發現Flickr有幾張出現官方unavailable的圖示，憑著以前做網頁的debug魂找原因，發現若是當初上傳的圖不夠大，卻用最大尺寸的圖網址，縮圖就會出現問題，只要改選小一號就ok。熱血幫推，覺得不錯也來裝一個吧！（你的回覆太客氣了:P）
【原用】最新文章(含文章總數)：功能就像所有文章迷你列表 via
因為九月底Blogger的feed修改了，必須更新函式否則會造成文章連到單篇comment feed的bug。2008.10.4
var title = Post.title.$t;
/*var link = Post.link[0].href; 這行要刪掉，用下面四行取代*/
var j = 0;
while (j < Post.link.length && Post.link[j].rel != "alternate")
j++;
var link = Post.link[j].href;
var timestamp=Post.published.$t.substr(0,10);
2.分類及封存之標題折疊模式 via
Abin's Tech Note: 標籤/搜尋頁面只列出標題 (Simplify the result of label and search)
因覺得一般BSP文章分類列表，無法知道有多少留言當閱讀參考，所以嘗試微調，也請多支持我的分類文章^^ 2008.9.13
<td width='40px'>
<a expr:onclick='"javascript:toggleIt (\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='展開/ 收合精簡模式。看留言請點標題^^'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a> - (<data:post.numComments/>)</h3>
</td>
3. 一目了然最新回應 via
4. 作者回應與讀者回應顏色區分 via
經實驗作者回應不會顯示時間/永久連結，所以我有再重複某幾句語法 2008.9.12
<p><data:comment.body/></p> </dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd> /*如法炮製作者也顯示留言footer時間*/
<b:else/>
5. 讓讀者看單篇文章載入速度更快！Plurk外掛等這些元件選擇性顯示 via
堯@部落格: 如何讓某些元件只在首頁/內頁顯示[BLOGGER]
但這一句我是打讓該元件只有在首頁顯示
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>
</b:includable>
讓單篇文章頁面，標題在前、部落格名稱在後，這是我的改造：
▌我的 blogger hack 筆記 (True Colours)
September 2008 (True Colours)
<b:else/>
<title><data:blog.pageName/> (<data:blog.title/>)</title>
</b:if>
6. 讓讀者看單篇文章還能多看一點（把舊文拿出來曬XD）via
Abin's Tech Note: 加入相關文章功能 (Related Post)
這是我一直搞不定的hack，發生了Category顯示好幾次的跳針情況（OS: 我就是要找出原因(／‵皿′)／~ ╧╧）終於找出自己多了一段，導致呼叫重複的動作......2008.9.13
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<!-- Fixed for Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=RelatedLabels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</b:loop>
</b:if> /*標色區是多餘的，因我誤解意思把abin第二第三的程式區組在一起*/
7. 寫作月曆兼好查好用萬年曆 via
其實月曆並不太必要，安裝這個考慮了蠻久。但安裝再改完CSS以後，覺得為自己作一個回憶舊作的途徑也很好^^，月份和年份輸入欄位就像任意門一樣。而且比其他BSP的日曆感覺還精美又好用哦感謝！(這不是網頁安裝版)以下是我改的CSS：2008.10.4
<style> /*在小工具欄位貼上hack後，就直接加上*/
#blogCalendar {
margin-left:0px;
display:block;
text-algin:center;
border:1px dotted #ccc;
}
#CalendarCaption a {
text-decoration:none;
}
#CalendarCaption{
border-bottom:1px solid #ccc;
}
#CalendarTable a{
font-weight:bold;
color: #5D8ACB; /*有寫文章的日期數字變淺藍色*/
}
.Today{
background: #eee; /*今日的背景是淺灰色*/
}
#CalendarFooter{
padding-left:15px;
}
.yearInput{
background:yellow; /*按了年份後，輸入欄位背景是亮黃色*/
}
#monthTable{
background:#000; /*按了月份後，選擇欄位背景是黑色*/
} </style>
8. 單篇文章之年月份資訊列 via
Abin's Tech Note: 以年月份做分類的導覽連結列 (Year & Month Breadcrumbs)
但我卻喜歡把他放在文章「頁尾」而非導覽，所以擺放位置在Subscribe to黑灰雙色區塊的後面 2008.10.4
<div class='feed-links'>
Subscribe to >>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div> /*到這裡是 Subscribe to >> Post (Atom) 區塊*/
<!-- Year & Month Breadcrumbs -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<script type='text/javascript'>
generateBreadcrumbs();
</script>
<b:if cond='data:post.title'>
> <data:post.title/>
</b:if>
</p>
</b:if>
<!-- End of Breadcrumbs Hack –>
發現 Abin 的月份連結是用 /search?updated- 去做的。我又手癢自己改造，把月分連結改成例如 xxx.blogspot.com/2008_09_01_archive.html，因為我喜歡月份封存標題是September 2008，回應區下的黑色區塊兩邊各是 October 2008和August 2008的畫面。（超龜毛XD）2008.10.4
<script type='text/javascript'>
//<![CDATA[
<!-- Functions used for generating Year & Month Breadcrumbs: generateBreadcrumbs() -->
function generateBreadcrumbs() {
var strHref = location.href.toLowerCase();
var intWhereAt = strHref.lastIndexOf('/', strHref.indexOf('.html'));
var intYear = parseInt(strHref.substr(intWhereAt - 7, 4),10);
var strCrumbOutput = ' > Year: <a href="/search?updated-min=' + intYear;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + (intYear + 1);
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00">' + intYear + '</a>';
var intMonth = parseInt(strHref.substr(intWhereAt - 2, 2),10);
var intNextMonthYear = intYear;
var intNextMonth = intMonth + 1;
if (intNextMonth > 11) {
intNextMonth = 1;
intNextMonthYear += 1;
}
var strMonth = intMonth;
if (intMonth < 10) strMonth = "0" + intMonth;
var strNextMonth = intNextMonth;
if (intNextMonth < 10) strNextMonth = "0" + intNextMonth;
strCrumbOutput += ' > Month: <a href="/' + intYear;
strCrumbOutput += '_' + strMonth + '_01_archive.html">' + strMonth + '</a>';
document.write(strCrumbOutput);
}
//]]>
</script>
研究好久後發現，如果某文章有更改年月，導覽列還是以首發年月為準。為甚麼呢？函式如何知道單篇文章在哪天寫的？原來不是由標題之上的日期判斷，而是依照發文那刻Blogger產生的網址上。注意到這點的我更愛去思考，和靈光一閃的成就感（累XD）2008.10.10
9. 顯示第幾樓的回應？ via
Abin's Tech Note: 增加文章留言回應的編號 (Show Comment Index)
每次實驗都沒有一次成功的XD，按照Abin擺放的位址測試，發現我家計數不正常，或者只算回應者是「格主本人」的留言，我在想可能是與「作者回應與讀者回應顏色區分」的hack（<b:if cond='data:comment.author == data:post.author'>）衝突了，於是決定擺在留言者的部份。2009.3.15
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/><!-- Fixed for display comment index -->
#
<script type='text/javascript'>
ShowCommentIndex('<data:post.id/>');
</script> | ♥
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
想說...
</dt>
10. 加入推薦及書籤按鈕（單篇文章內顯示）via
BLOG 加入共享書籤按鈕 | 張可樂 - killing me now with ur pudding.
裝這外掛時很順利，真的很精美噢感謝^_^2009.3.22
11. 最後更新時間（單篇文章內顯示）via
Abin's Tech Note: 增加文章更新時間 (Show Post Update Time)
所謂日期，對習慣網路書寫、整理想法資訊已久的我意義非凡，而我也經常回顧心血舊文多次更動修改，所以加上這hack。2009.3.22
-不定期更新-
【同場介紹】Ajaxload - Ajax loading gif generator，分享我以前就作好的兩個小花等待圖：
1. 
2. 
// Technorati 標籤：blogger hack
