2013年8月1日 星期四

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

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

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

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

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:藍色數字代表浮動區塊距離頁面頂端的值,可自行修改。



四、錯誤示範及提醒

有沒有覺得本文右邊有個奇怪的的 "bloggerAds" 公益廣告圖案一直停留在螢幕上?這是刻意製造的錯誤示範,你一定有這樣的經驗,某些網站的畫面充滿了浮動的廣告,遮蓋了其他部分的內容,造成閱讀上的困難,就像右邊這個浮動廣告一樣。

因此再次提醒要當作浮動側邊欄的區塊,得依照「二、準備動作」放在側邊欄的最下方,才不會遮住其他側邊欄或被其他側邊欄覆蓋

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

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


部落格廣告相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP