2012年11月1日 星期四

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

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

Wayne Fu 0 A+

(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 技巧相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP