公告版位


(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. 編輯這個小工具,標題請隨意(例如:公佈欄),內容填入以下:

全文已移往WFU BLOG 主站,請點:「Blogger 首頁公佈欄實作

創作者介紹

WFU BLOG

Wayne Fu 發表在 痞客邦 PIXNET 留言(21) 人氣()


留言列表 (21)

發表留言
  • Mark X
  • 不採用未來文章, 使用Pages就沒有時間上的問題了.(ㄟ? 中文選項是叫做創建網頁嗎?)
  • Wayne Fu
  • <3868378064604770>(以上內容請勿刪除,從括號之後開始留言)
    以下引自G+與mark的討論內容
    [quote]是針對這個部分:
    "二、製作公告內容
    1. 開一篇新文章,我用「Blogger 自訂文章網址的要訣」 設定文章網址,完整網址成為 "http://wayne-fu.blogspot.com/2012/09/2012-wfu-blog-index.html",這個網址之後會用到,請記住自己的公告文章網址。"

    如果是我就不會開一篇新文章, 而是開新網頁, 如圖.
    http://i48.tinypic.com/sopzjd.jpg
    對第一次使用你這個公布欄的人來說, 發一篇新文章勢必他的讀者都會收到RSS通知, 而且在他的部落格首頁上面會有個公布欄, 下面又有同樣一篇的公布欄內容的文章同時顯示. 當然這都可以用修改文章發布時間來控制不要顯示在首頁, 我自己是覺得這是網站私下操作的部分, 改用Pages就不會發布到RSS, 在後台修改也能方便找到.
    只有這小小的差異啦! 只是將load()連結網址改成像這樣 http://wayne-fu.blogspot.com/p/公布欄命名.html[/quote]
    謝謝您的建議,使用「網頁」發佈的確有直接的好處,比較方便,不必另外再修改文章的時間來避免出現在訂閱的 RSS。

    我完全沒有想到使用「網頁」模式,是因為過去有不好的使用經驗及看到一些案例,所以我的網站全部取消「網頁」模式了:
    1. 網頁模式的留言無法使用「以電子郵件訂閱」的功能來追蹤回覆。
    2. 一些案例:「<a href="http://disp.cc/b/?page=b_fav#!33-4Mfv" rel="nofollow">1</a>」、「<a href="http://disp.cc/b/?page=b_fav#!33-4Mfu" rel="nofollow">2</a>」、「<a href="http://disp.cc/b/?page=b_fav#!33-4Mft" rel="nofollow">3</a>」
    如果沒有以上這些狀況的需求的話,那麼是可以使用「網頁」模式的。
  • API
  • 您好,想請教,如果點選"按此觀看完整大事紀要"之後,開啟新頁,但是想要隱藏布告欄的標題文字,請問要如何修改?

    我修改您的範例是要做到置頂文,但是置頂文,並不會全部show 出來,模擬類似閱讀更多,點選以後,會在新頁顯示全文,這時的置頂文的標題是會出現,我想在這部分是否可以在顯示該置頂文的時候,可以把該文章的標題隱藏,類似<h2></h2>,但是我不知道要如何把語法加入?謝謝幫忙
  • Wayne Fu
  • <8829971357208007311>(以上內容請勿刪除,從括號之後開始留言)好的,瞭解你的意思了,這樣的效果應該類似「當隱藏文章內容時,標題一併隱藏;顯示文章內容時,標題一併顯示」。按以下操作可得到這樣的效果:

    1. 到後台範本找到這個小工具的區塊,原本的文章標題程式碼為:<h2><data:title/></h2>

    請改為:<h2 id="bulletin-title" style="display: none;"><data:title/></h2>

    2. 本文程式碼 AF 與 AG 之間插入以下程式碼:

    $("#bulletin-title").show();

    這樣就能做到「將標題預設為隱藏,文章展開時才讓標題顯示。」
  • 元極聖元
  • 剛開始以為是要開"新網頁",後來弄懂是"新文章"並發佈吧!試著用一下,結果內容沒進去,怎麼分家了呢?問題出在哪??點選"按此觀看完整大事紀要"也沒內容.....詳細情形請看
    http://www.shinean99.com/
    麻煩您看一下...謝謝
  • Wayne Fu
  • <1024483089122136188>(以上內容請勿刪除,從括號之後開始留言)我看了你的網頁,「最新消息」這篇文章的網址是 http://www.shinean99.com/2013/04/shinean-blog-index9_9.html

    但你的程式碼
    $("#bulletin").attr("class","bulletin-home").load("/2013/04/shinean-blog-index_9.html .bulletin");

    看到網址參數不一樣了嗎?我猜你文章網址有變動過,修正一下再試試看吧.(有兩個地方要修正, 對照一下原文)
  • 元極聖元
  • <8161529071698755678>(以上內容請勿刪除,從括號之後開始留言
    原來是網址弄錯啦~~~已經更改了....但是...還是不成功....反覆檢查了,還是不知道又漏了哪裡呢?
  • 元極聖元
  • <4254570841329145080>(以上內容請勿刪除,從括號之後開始留言)
    哇哈哈~~~成功了...可惜不能刪掉留言~~~超級謝謝板大啦~~~^O^~~已經變成你的忠實迷啦~~~
  • 元極聖元
  • <9201002267171609578>(以上內容請勿刪除,從括號之後開始留言)
    奇怪?!我有這問題耶....消息是放進去公布欄裡了,但因為是發表新文章,所以同樣的內容會重複1次,可是版大的看起來沒這問題,是我漏了甚麼或又有什麼魔法將新文章藏起來嗎?
  • Wayne Fu
  • <1315777014494603612>(以上內容請勿刪除,從括號之後開始留言)
    恭喜你成功了,不想讓那篇文章出現在首頁,你可以到後台編輯文章,把發佈時間改成過去的日期,例如 2012 年的日期就行了。
  • 元極聖元
  • <7872573460057929560>(以上內容請勿刪除,從括號之後開始留言)哈哈~~原來是這樣阿~~了解~~謝謝您的開示啦~~~之後再試試版大發表的其他文章的功能...
  • pebbles
  • 試驗成功 謝謝您
    但想請問 如果要去掉"本站大事紀"這幾個字的話 要怎麼改呢?
  • Wayne Fu
  • <3280651073380116583>(以上內容請勿刪除,從括號之後開始留言)程式碼P行換成自己的圖片就行了
  • alexchris
  • 請問要如何預設抓取內容為開啟(不需要點擊展開公告內容)
  • Wayne Fu
  • <4134310699822507231>(以上內容請勿刪除,從括號之後開始留言)將 AI、AL、AM、AN 這幾行程式碼刪除即可。
  • alexchris
  • 感謝您! 那一頁可以放兩個或以上的公佈欄嗎?<2721921573995453015>(以上內容請勿刪除,從括號之後開始留言)
  • alexchris
  • <5781752625679501849>(以上內容請勿刪除,從括號之後開始留言) 說得有些不清楚 應該說如何用在公佈欄中嵌入2個不同內容的頁面
  • Wayne Fu
  • <2134473761251465062>(以上內容請勿刪除,從括號之後開始留言)[quote]如何用在公佈欄中嵌入2個不同內容的頁面[/quote]新增一個區塊,使用不同的 id, 更改相關參數即可。例如複製 A 行的內容,更改 id,並在其他的程式碼新增、修改跟這個 id 相關的字串,原理大致是如此。

    由於這算是客製功能,如果這樣的說明不清楚如何執行的話,必須專案處理您的 case,請參考「<a href="http://www.wfublog.com/2013/06/service-suggest-cooperation.html" rel="nofollow">諮詢服務</a>」與我聯繫。
  • alexchris
  • <9072429678791792339>(以上內容請勿刪除,從括號之後開始留言)好像改了A行就完全失效!!XD
  • Wayne Fu
  • <3535066138400611909>(以上內容請勿刪除,從括號之後開始留言)不好意思,如果對程式不熟的話,您可考慮是否提出客製的需求了。
  • alexchris
  • <9214410767263883332>(以上內容請勿刪除,從括號之後開始留言)終於知道怎麼運作了 感謝您