Blogger 文章置頂+首頁公佈欄實作技巧

(Pic from: psdgraphics.com)過去在「Blogger 小技巧」曾整理了一些公佈欄的筆記，以備實作時參考之用。一般而言，在 Blogger 要找到一個區塊能長期置頂實現公告的功效，大致有以下這幾個作法：

A. 放在導覽列上方
B. 放在文章區塊上方
C. 放在側邊欄頂端
D. 發一篇未來文章長期置頂

其中 A～C 的作法很簡單，在後台新增 HTML/Javascript 小工具，再拖曳到 A～C 的位置即可。而 D 的作法需要用到一點小技巧，因為如果開一篇新文章後選擇未來的日期發佈，那麼這篇文章會列入排程，等到日期到了才會出現在部落格，自然就無法長期置頂。

正確的作法為開一篇新文章後立即儲存發佈，接著再重新編輯這篇文章 → 文章設定 → 發佈日期 → 設定日期及時間 → 改為未來的日期 → 完成 → 更新。回到首頁之後，如下圖，就可以看到這篇到 2100 年之前都會置頂的文章了：




一、需求

有訂閱本站文章的朋友先說聲不好意思, 你的閱讀器例如「Google Reader」可能會出現以上這篇未來文章，但點了網址又沒內容，因為文章只是測試效果，已經被刪除了。以下為我製作本站公佈欄的需求──

1. 主要需求：我的主要需求為「首頁時展開公告，非首頁時自動隱藏公告，不妨礙文章閱讀，但提供展開的按鈕」，因此本文的實作採前言提到的 B 點。

2. 次要需求：其次的需求為「公告內容的編輯必須十分方便，最好是"所見即所得"(Wysiwyg)。」如果把公告內容儲存在 HTML/Javascript 小工具，除了索引、資料維護不便，編輯時也不易上色、對字體加粗等。因此為了達到這個需求，決定把公告內容放在文章內，在後台編輯時才方便。

因此如何結合以上兩點需求，是本文要分享的內容。


二、製作公告內容

為了讓版面好看，我採用「部落格文章＋特殊文字區塊」 的方式來裝飾公告內容，以下為步驟──

1. 開一篇新文章，我用「Blogger 自訂文章網址的要訣」 設定文章網址，完整網址成為 "http://wayne-fu.blogspot.com/2012/09/2012-wfu-blog-index.html"，這個網址之後會用到，請記住自己的公告文章網址。

2. 文章內容：填入以下──

<div class="bulletin" id="blog-2012-history">公告內容</div>
藍字「公告內容」的部分請填入自己的公告內容，雖然這一句很像廢話，不過將來若更改、編輯公告內容時，都必須在藍字「公告內容」這個區域範圍內，若在 <div> 區塊之前或之後的話，都會抓不到公告內容。

儲存文章後請繼續下個步驟。



三、製作公告區塊

1. 請到 Blogger 後台 →「版面配置」→「新增小工具」→ 選擇「HTML/Javascript」→ 拖曳到「網誌文章」的上方（如下圖）



2. 編輯這個小工具，標題請隨意（例如：公佈欄），內容填入以下：


3. 存檔之前請先修改幾個重要參數，行號請參考以上程式碼：

T：紅字 100 可改為自訂的高度 px 值，超過高度的部分公告內容會自動產生捲軸。

AA：請檢查一下範本，如果已經安裝過 Jquery 的話，這一行可以刪除。

AE：綠字部分請改為自己的公告文章網址，但必須去掉自己的網域字串，例如我的公告文章網址為 "http://wayne-fu.blogspot.com/2012/09/2012-wfu-blog-index.html"，去掉網域字串後成為 "/2012/09/2012-wfu-blog-index.html"，字串開頭為斜線"/"，這就是綠字部分要填入的字串。原理請見「四、原理及提醒」。

AF：綠字部分請改為自己完整的公告文章網址。

以上三行改完即可存檔，效果可參考本站文章上方的公佈欄。


4. 其他相關說明：

D～Q：這裡是公告區塊的美化 CSS 參數，可參考「部落格文章＋特殊文字區塊」看詳細的參數修改解說。

AI～AN：這個判斷句代表首頁的時候執行 AJ～AK，展開公佈欄；而不是首頁的時候執行 AM，不載入公告文章，只顯示展開文字說明。

而想要自訂文字說明，請在程式碼尋找相關的中文敘述並替換即可。


四、原理及提醒

1. 利用程式碼 AE 行稍微解釋一下這個公佈欄小工具的原理，主要是利用 Jquery 的 load() 方法，動態載入我們的 "公告文章" 網址中 id 名稱 "blog-2012-history" 的內容到這個 "公佈欄" 區塊。由於安全性因素，javascript 只允許存取同網域的資料，因此 load() 只能夠載入同網域的資料。但在「Blogger 轉換網址事件」之後，Blogger 網址會隨不同國家而變動，以本站為例，wayne-fu.blogspot.hk 與 wayne-fu.blogspot.tw 會被視為不同網域，如果我們在 load() 裡面的參數使用完整網址例如 "http://wayne-fu.blogspot.tw/2012/09/2012-wfu-blog-index.html"，那麼台灣以外的訪客例如香港，就讀不到這篇網址為 tw 網域的公告文章了。

唯一的解決方法就是將文章網址就是去掉網域，當網址不含網域時，例如香港的訪客，系統會自動讀取 hk 網域下 "http://wayne-fu.blogspot.hk/2012/09/2012-wfu-blog-index.html" 這篇文章(其實就是轉址後的同一篇文章)，就能正確抓到公告文章了。

附帶一題，很多以前的 Blogger 小工具在轉址事件後會失效，主要就是讀取 json 資料時設定了 blogspot.com 的網域，若使用本文的解決方法，那麼這些小工具就能恢復功能了。

2. 本文的程式碼在 Blogger 新範本測試沒問題，但本站使用舊範本，這個小工具在 IE 下與 Jquery 的 load() 相衝而無法執行，我只好另外用個判斷句讓 IE 無法顯示公佈欄。

由於篇幅的緣故就先不列出我自己用的程式碼，如果你也是使用舊範本又想安裝這個公佈欄的功能，請再留言詢問，或是急的話先看看本站的網頁原始碼也可找到答案。

CSS 技巧相關文章：