[教學]部落格浮動側邊欄(浮動廣告)__改良精簡版

浮動側邊欄是效果很不錯的一個網頁設計，這個浮動區塊不會隨著畫面捲動而消失。站長可將想特別強調的內容、傳達的訊息、甚至是廣告內容放入這個區塊，而達到強力曝光的效果。

一開始敘述的是原理及過程，想直接安裝程式碼請跳「二、準備動作」。

P.S. 為了避免誤會，右邊的浮動廣告圖案是故意使用的錯誤範例，請見「四、錯誤示範及提醒」的解釋。

<< 請注意！本篇文章含會員限定內容 >>

一、網路範例

根據「博客側邊欄跟隨滾動效果」，該網頁可看到浮動側邊欄 "熱門文章"、"廣告" 固定的效果。

因為覺得效果不錯，在 Blogger 試用了這個語法，以下為感想：

• 該網頁在 IE 下顯示正常，不過我安裝在自己的 Blogger 時，IE 下浮動區塊會跑到最左邊；如此一來，程式碼需要為 IE 小幅優化。
• 從原始碼看得出原作者是工程師出身，程式碼寫得很有架構與組織，對 WFU 而言，就是很不容易理解的那一種程式...相信這樣的寫法有其優點，但是將複雜的架構用於這個簡單的功能，WFU 實在不知道怎麼下手修改。所以與其痛苦地修改，最後決定重寫還比較快，這也是本文 "改良精簡版" 的內容。

二、準備動作

1. 以 Blogger 的操作為例，首先到後台 → 版面配置，把要當成浮動欄位的區塊，拉到側邊欄的最下面──



就像上圖紅框「浮動側邊欄」這個小工具這樣，然後就可以按「儲存排列方式」。


2. 接著到「範本」→「編輯 HTML」，搜尋小工具的名稱，例如搜尋 "浮動側邊欄"──



找到這個小工具的區塊後，最重要的是記下這個區塊的 id 名稱，如上圖方框的 "HTML2" 就是我們要找的字串。



三、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 一樣停留在「範本」→「編輯 HTML」的畫面，如果範本裡已經安裝過 jqeury 的話，就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串)；如果沒安裝過 jquery，請搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

2. 接著請搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

3. 先不要存檔，請依以上程式碼行號修改一些參數──

E：紅色字串請改為「二、準備動作」→ 步驟 2 的 id 字串；而綠色字串 "#" 請保留。

F：藍色數字代表浮動區塊距離頁面頂端的值，可自行修改。



四、錯誤示範及提醒

提醒一下，Google Adsense 廣告請不要使用浮動效果，「官方有明文告知」此事，請勿以身試法，萬一遭到停權可就不好了。

為了提供使用者安全且正面的廣告體驗，我們對於在桌機上放送廣告設有限制，避免廣告在使用者向下捲動網頁時持續浮現在畫面的顯著位置，干擾使用者閱讀網頁內容。雖然 Google 錨定廣告可顯示在行動網站上，但是請注意，我們並不允許發佈商採用自訂的行動廣告導入方式，原因是無法確定這類導入方式也提供 Google 產品內建的品質維護機制。

部落格廣告相關文章：