輕鬆打造網站置頂公告，抓住訪客注意力！

大部分情況下網站公告通常放在首頁，或是有經營 FB 粉絲團、社群媒體的話，重大事情在社群發佈的效果會比較好。然而這樣的處理方式，只能將公告內容擴散給粉絲。至於非粉絲的話，例如從搜尋引擎而來、或從別的網站連結過來的訪客，基本上只會到達文章頁面，不會看到首頁或社群媒體。 所以網站最好的處理方式，是在每個頁面最上方都出現置頂公告，如此可以確保通知所有訪客無漏網之魚。 對於一般部落格而言，可能不會經常有大事件需要公告，不過倒是可以借用置頂公告當作廣告，拿來宣傳「特定的熱門文章」、「社群媒體」等等。如果是商業用途的網站，那麼置頂公告更好用了，可以作為長期宣傳「商品」、「經營業務」、「加入會員」等等之用。 置頂公告這樣的功能已經有現成的免費/付費工具，不過因為這功能很簡單，乾脆自己開發一個，網站也可減少不必要的外連 JS(可參考「為何部落格最好避免第三方外掛」)，避免拖慢網頁速度。 以下先介紹這個小工具的功能，想要直接安裝可跳至「二、安裝程式碼」 (圖片出處: pexels.com)

一、置頂公告功能介紹

• 如果是注重使用者體驗的站長，會希望置頂公告可以讓訪客看過後選擇關閉，將來不再出現同樣的重複訊息，所以此工具可以設定置頂公告是否永遠顯示
• 比較低調的站長或許希望公告不要浮動「置頂」，而是改為浮動置底，此工具也可選擇出現在網頁底部。
• 如果開啟「關閉公告」的功能，當訪客關閉公告後，系統會自動記憶上次的公告內容。當下次站長更新公告內容時，置頂公告會重新顯示，直到訪客按下關閉為止。
• 此工具預設了幾種顏色模版，可自行修改背景顏色、按鈕顏色等等
• 如果熟悉 CSS 的話，可以自行調整所有 CSS 細節

二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。 請到後台「主題」→ "自訂" 按鈕右方的下拉圖示 →「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </body>這個字串，找到後在此字串的前一行，插入以下程式碼： <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script><!--Blogger 置頂公告 --> <script> //<![CDATA[ (function($) { var newBulletin = "這裡是置頂公告內容，<a class='blt_btn blue' href='https://www.wfublog.com/' target='_blank'>按鈕</a> 也可使用！", // 填入要顯示的公告內容, 可使用 HTML 碼, 按鈕顏色可改 class 參數 blue、green、red、orange、black、white、gray、navy enableClose = true, // 是否允許關閉公告, 允許填 true, 不允許填 false position = "top", // 公告位置, 置頂填 "top", 置底填 "bottom" bgColor = "white", // 背景色, 可使用 "blue" "green" "red" "orange" "black" "white" "gray" "navy" delay = 3, // 幾秒後顯示 bulletinStatus = localStorage.bulletinStatus || "unRead"; var _0xb687=["\x75\x6E\x52\x65\x61\x64","\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x62\x75\x6C\x6C\x65\x74\x69\x6E\x53\x74\x61\x74\x75\x73","","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x68\x36\x30\x27\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x27\x20\x63\x6C\x61\x73\x73\x3D\x27","\x20","\x27\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x5F\x62\x6F\x64\x79\x27\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x5F\x74\x65\x78\x74\x27\x3E","\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x63\x6C\x6F\x73\x65\x42\x74\x6E\x5F\x6F\x75\x74\x65\x72\x27\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x63\x6C\x6F\x73\x65\x42\x74\x6E\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\u95DC\u9589\u516C\u544A\x27\x3E\xD7\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x27\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x31\x30\x70\x78\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x30\x3B\x20\x68\x65\x69\x67\x68\x74\x3A\x20\x31\x35\x70\x78\x3B\x20\x6C\x69\x6E\x65\x2D\x68\x65\x69\x67\x68\x74\x3A\x20\x31\x30\x70\x78\x3B\x20\x6C\x65\x74\x74\x65\x72\x2D\x73\x70\x61\x63\x69\x6E\x67\x3A\x20\x31\x2E\x34\x70\x78\x3B\x27\x3E\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x27\x74\x65\x78\x74\x2D\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x3A\x20\x6E\x6F\x6E\x65\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x20\x23\x63\x63\x63\x3B\x20\x66\x6F\x6E\x74\x2D\x66\x61\x6D\x69\x6C\x79\x3A\x20\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x2C\x20\x61\x72\x69\x61\x6C\x2C\x20\x73\x61\x6E\x73\x2D\x73\x65\x72\x69\x66\x3B\x20\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x20\x31\x31\x70\x78\x3B\x27\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x77\x66\x75\x62\x6C\x6F\x67\x2E\x63\x6F\x6D\x2F\x32\x30\x32\x33\x2F\x30\x32\x2F\x77\x65\x62\x73\x69\x74\x65\x2D\x74\x6F\x70\x2D\x62\x75\x6C\x6C\x65\x74\x69\x6E\x2E\x68\x74\x6D\x6C\x27\x20\x74\x61\x72\x67\x65\x74\x3D\x27\x5F\x62\x6C\x61\x6E\x6B\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\x42\x6C\x6F\x67\x67\x65\x72\x20\u7DB2\u7AD9\u7F6E\u9802\u516C\u544A\x0A\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x57\x46\x55\x20\x42\x4C\x4F\x47\x27\x3E\u24E6\x20\x42\x75\x6C\x6C\x65\x74\x69\x6E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x74\x6F\x70","\x70\x72\x65\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x62\x6F\x74\x74\x6F\x6D","\x61\x70\x70\x65\x6E\x64","\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E","\x23\x68\x36\x30\x2C\x20\x23\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x68\x65\x69\x67\x68\x74","\x23\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x23\x68\x36\x30","\x73\x6C\x69\x64\x65\x55\x70","\x68\x61\x73\x52\x65\x61\x64","\x63\x6C\x69\x63\x6B","\x2E\x63\x6C\x6F\x73\x65\x42\x74\x6E","\x74\x65\x78\x74","\x3C\x70\x3E","\x3C\x2F\x70\x3E"];ckNewBulletin();if(bulletinStatus== _0xb687[0]){addHtml();clickClose()};function ckNewBulletin(){var _0x9a2fx2=localStorage[_0xb687[1]];if(_0x9a2fx2&& entityConvert(newBulletin)!= _0x9a2fx2){localStorage[_0xb687[2]]= _0xb687[0];bulletinStatus= _0xb687[0]}}function addHtml(){var _0x9a2fx4=_0xb687[3];_0x9a2fx4+= _0xb687[4];_0x9a2fx4+= _0xb687[5]+ bgColor+ _0xb687[6]+ position+ _0xb687[7];_0x9a2fx4+= _0xb687[8];_0x9a2fx4+= _0xb687[9]+ newBulletin+ _0xb687[10];if(enableClose){_0x9a2fx4+= _0xb687[11]};_0x9a2fx4+= _0xb687[10];_0x9a2fx4+= _0xb687[12];_0x9a2fx4+= _0xb687[10];if(position== _0xb687[13]){$(_0xb687[15])[_0xb687[14]](_0x9a2fx4)};if(position== _0xb687[16]){$(_0xb687[15])[_0xb687[17]](_0x9a2fx4)};setTimeout(function(){adjustHeight();$(_0xb687[19])[_0xb687[18]]()},delay* 1000)}function adjustHeight(){var _0x9a2fx6=$(_0xb687[21])[_0xb687[20]]();_0x9a2fx6= _0x9a2fx6< 60?60:_0x9a2fx6;$(_0xb687[22])[_0xb687[20]](_0x9a2fx6)}function clickClose(){$(_0xb687[26])[_0xb687[25]](function(){$(_0xb687[19])[_0xb687[23]]();localStorage[_0xb687[1]]= entityConvert(newBulletin);localStorage[_0xb687[2]]= _0xb687[24]})}function entityConvert(_0x9a2fx9){return $(_0xb687[28]+ _0x9a2fx9+ _0xb687[29])[_0xb687[27]]()} })(jQuery); //]]> </script> <style> #h60, #bulletin {display: none; } #bulletin {position: fixed; left: 0; width: 100%; z-index: 10000; color: #fff; box-shadow: 0 1px 3px 2px rgb(0, 0, 0, .25);} #bulletin.top{top: 0;} #bulletin.bottom{bottom: 0;} .bulletin_body{display: flex; padding: 10px; align-items: center; justify-content: center; font-size: 1.2rem;} .bulletin_text{line-height: 40px; text-align: center;} .closeBtn_outer{padding: 0 15px;} .closeBtn {width: 24px; height: 24px; font-family: arial, sans-serif; font-size: 24px; font-weight: bold; text-align: center; border-radius: 50%; line-height: initial; background: #fff; color: #343a40; cursor: pointer; box-shadow: 0 0 5px rgb(0, 0, 0, 0.6);} .closeBtn:hover{background: #6c757d; color: #fff;} .blue{background: #5bc0de;} .green{background: #198754;} .red{background: #d9534f;} .orange{background: #f0ad4e;} .black{background: #343a40;} .white{background: #fff; color: #343a40!important;} .gray{background: #6c757d;} .navy{background: #337ab7;} .bulletin_text .blt_btn{padding: 3px 6px; text-align: center; white-space: nowrap; cursor: pointer; border-radius: 4px; color: #fff;} .bulletin_text .blt_btn:hover{text-decoration: none; opacity: .7;} </style> <!-- Designed by WFU BLOG -->

• 第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
• 所有重要參數的修改，請見藍色註解的說明。
• 如果對 CSS 熟悉可自行修改參數

三、展示效果

• 本頁面即為展示頁面，網頁最上方可看到公告效果
• 使用的參數為背景 navy，按鈕 white
• 為了達到展示效果，點擊關閉按鈕後，本頁面的公告仍然會持續出現，這是跟原本程式效果不同之處。