Creative Commons License
發卡布洛 所有內容 採用
創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣 授權條款授權.

經營部落格或許可以為自己增加一些額外的收入,但要是廣告放多了也是蠻惹人嫌的。好啦,這並不是本篇的重點,經營部落格的這兩年來,我發現會點廣告的人就是會去點,不會點的人就算你放再多廣告他也不會點,既然如此,那我們何不讓使用者自行決定要不要在網頁中顯示廣告呢?

  可能會有很多站長認為我瘋了,不過就站在一個網頁瀏覽者的立場來說,比較進階的玩家們不也常常使用adblock、stylish、RIP這類火狐的套件來擋掉某些網站的廣告嗎?我的觀點是,與其讓使用者花心思去擋廣告,我們不如直接做一個廣告開關方便使用者們做切換,要是使用者認為你的網頁內容寫的真的很不錯,我想他們一定也會很高興地點選廣告給你一點鼓勵的。但在這之前,我們還是先還給使用者一個乾淨的瀏覽介面吧!

  本功能使用 jQuery 的 cookie plugins 來紀錄廣告是否顯示的狀態,在公告區塊內加入即可使用:

<script type="text/javascript">
var _ad_div_name="廣告區塊的名稱"; //改這行
jQuery.getScript("https://sites.google.com/site/jsdatabase1/js/self_ad.js");
</script>

※廣告區塊的名稱請自行尋找

1.如果廣告區塊是被<div id="name">廣告內容</div>所包覆,這個區塊的名稱請請寫:#name
2.如果廣告區塊是被<div class="name">廣告內容</div>所包覆,這個區塊的名稱請請寫:.name

如果你是將廣告放置於側邊欄,那通常都是第一種情形。如果你有很多廣告區塊,可以使用逗號將名稱分開,如:.ad1, #ad2, #ad3...

接下來,請在你的CSS中加入以下這段把你的廣告隱藏:

廣告區塊id名稱{display:none}

別擔心,要是網友沒有點選隱藏按鈕,在進入網頁時廣告仍會顯示。

最後,你可以在網頁任何一個位子置入這個隱藏鈕(例如部落格描述)

<input type="button" value="loading ad state..." id="adv_select">

 

bshadow 發表在 痞客邦 PIXNET 留言(23) 人氣()


留言列表 (23)

發表留言
  • ddch13
  • 哇~~

    一點進來這部落格時,看到「我不要看廣告」的按鍵時還覺得很神奇,想來實在是很貼心且用心的一個設置呢。
  • 呵呵謝謝你感受到我的用心 :]

    bshadow 於 2009/02/21 19:14 回覆

  • 菲菲
  • 下午有帶語法回去使用
    不過不知道是不是因為我有用側欄收合效果的語法
    導致這個按鈕語法失效了......
  • 應該不是喔,這兩個語法是沒有衝突的 :)

    bshadow 於 2009/07/06 08:30 回覆

  • 菲菲
  • 是喔~那我就真的不知道為什麼會失效了 ||| OTZ
    話說....我花了一天的時間套用你現在這個樣式面版作修改,想不到那麼巧來看版主回覆也看到你也用一樣的樣式 (握手) XDD
  • 哈哈,對啊~
    OECSPACE真是個好地方

    bshadow 於 2009/07/10 05:47 回覆

  • 菲菲
  • 對啊~我從她那兒學了好多CSS真開心 XDD

    然後我想請教大大您一個問題
    就是文章內那個CODEBOX
    我也想要用那個來作為分享語法的複製框
    (因為我網頁有鎖右鍵,而我看它有複製到剪貼簿的功能剛好是我想要的 XD")

    不知道您的CODEBOX是從哪兒取得的呢?
    是用HTML程式語法寫出來的嗎?
    不好意思唷~因為沒用過跟它很不熟
    所以問題多了點 ||| OTZ ...
  • 那個程式叫做syntaxhighlighter
    設定方法你可以參考這裡:
    http://stonys.pixnet.net/blog/post/24240204

    然後那個複製到剪貼簿的功能
    在firfox下是用flash的漏洞做的
    不過flash在10版以後就修正這個漏洞了
    所以已經不能正常複製了喔
    不過在ie底下應該是ok的

    bshadow 於 2009/07/10 18:52 回覆

  • 菲菲
  • 話說我剛剛又試了這個廣告隱藏顯示的按鈕語法
    還是無法使用...

    另外有個疑問就是文內提到要在CSS表內加入
    廣告區塊id名稱{display:none}

    可我發現加入上述CSS語法後整個欄位包括標題都不見了,重點是不管有沒有加CSS那個按鈕按了都沒有效果....

    我好想用這個按鈕語法哦~~真是殘念...
  • 也許你的廣告區塊id名稱寫錯了喔
    你是要隱藏側邊欄位的廣告嗎?

    bshadow 於 2009/07/10 18:48 回覆

  • 菲菲
  • 我依照文章內說的id輸入<div class="name">
    原始檔裡面的id
    還是說id的name是要輸入box123456這種呢?

    我想跟你一樣隱藏側邊欄位的廣告
    (不過因為失敗所以把自訂欄位移除了)

    然後我還有疑問就是
    廣告區塊id名稱{display:none}
    id名稱是要設定box123456這種還是name呢?
  • 如果你是將廣告放在側邊欄位中的話,
    那通常都是類似#box123456這種的id~
    像我的blog的廣告區塊是放在側邊欄裡的
    blogAD:#box214124
    bloggerAds:#box389197

    所以我就要在CSS中寫:
    #box214124,#box389197 {display:none}
    將這兩個區塊隱藏起來不做顯示

    然後在程式第一行定義這兩個區塊的id為廣告區塊:
    var _ad_div_name="#box214124,#box389197";

    bshadow 於 2009/07/10 23:18 回覆

  • 菲菲
  • 謝謝喔
    我剛剛使用了SyntaxHighlighter
    那篇教學淺顯易懂真是太好了
    比起我昨晚看的WP-CODEBOX容易多的感覺 XD

    不過小蝶(她應該是這樣稱呼吧?@@)分享的語法
    使用後是英文版的,不知道你的中文語系是從哪邊設定或修改的呢?
  • 你可以把他的shCore.js打開修改,
    或是下載使用這支中文化後的程式!
    http://jimsuan.googlepages.com/shCore.js
    把它放在你的網頁空間再作引入就可以了

    bshadow 於 2009/07/10 23:06 回覆

  • 菲菲
  • 謝謝版大耐心指導!!
    我成功了!!! (放炮~) Yeah~
  • 不客氣,恭喜歐 :]

    bshadow 於 2009/07/11 17:54 回覆

  • 菲菲
  • 囧...我又來打擾了

    我下載了中文化引入使用後
    結果出現亂碼,不是繁體中文
    打開CSS檔案去修改裡面的字型(加入"細明體")
    結果還是一樣亂碼....
    請問該從哪個檔案裡面去修改才能變成中文而不是亂碼呢?
  • 可能是編碼的問題,我已經更新過檔案了,你再試試看。
    還有就是修改時,存檔編碼請選擇UTF-8。

    bshadow 於 2009/07/12 14:53 回覆

  • 菲菲
  • 原來如此,謝謝大大 ^^

    另外想再請問一下 (我問題很多對不起...)
    我看您的框內文字都會自動段行不會有文字溢出的問題(也不會出現下捲軸),不知道您是從哪邊修改又是如何修改原始碼才能達到那樣的效果呢?

    我嘗試從SyntaxHighlighter.css這裡面去修改
    試過用OCEPLACE教的word-break: normal;(依照區塊大小強制段行,但不會截斷英文單字)加入SyntaxHighlighter.css檔案裡面,但不知道是我加入的位置不對還是哪裡有問題,一樣沒有效果...
  • 不,其實我也有這個問題 ^^"
    請看這篇:http://bshadow.pixnet.net/blog/post/23126621
    也是一樣會出現下捲軸

    bshadow 於 2009/07/12 16:15 回覆

  • 菲菲
  • 真的耶...

    那我再繼續摸索好了 XD
    自學CSS一直遇到瓶頸...唉~(抱怨一下ˊ~ˋ")
  • 菲菲
  • googlepages掛了
    請問大大有類似googlepages的免費空間可推薦嗎?
  • 我的googlepages還沒掛耶
    不過應該也快了~
    目前我的js都是備份放在這裡:
    http://www.hostrator.com/
    不過他的穩定度絕對不比googlepages啦
    所以要有常常搬家、備份的心理準備喔

    bshadow 於 2009/07/12 21:24 回覆

  • 菲菲
  • 謝謝推薦

    不過我還是用了Hinet Myweb(中華電信提供的用戶免費ftp空間)

    目前正在努力將存在googlepages的檔案資料備份當中
    不過檔案實在太多了...好累人喔 囧
  • 菲菲
  • 救命喔!!!

    大大~~為什麼我的CODEBOX無法觀看原始碼呢?
    點了 觀看原始碼 後 卻只出現以下網址
    http://lafite2230.pixnet.net/blog/post/25298592#
    文章網址後面多了個 # 符號 卻無法像大大的一樣另開啟視窗可觀看原始碼...
  • 我第一次點進去的時候也不行
    但現在又可以了
    我想應該是hinet的空間讀取js檔不穩定的關係
    或是你在網頁還沒完全讀取完之下就點了觀看原始碼
    基本上你的設置是沒有問題的

    0716 更新
    syntaxhighlighter有新版本
    我已在你的留言板中留言了

    bshadow 於 2009/07/16 17:04 回覆

  • 豬小妞
  • 我想把js檔下載到自己空間
    還是只能用版大的勒??
  • 當然可以放在自己的空間啊
    不過你好像放錯了
    那兩個檔案都連結不到~

    ps
    現在是對了
    不過你顯示ip的超連結結束位置放錯了
    這樣才對:
    http://myip.easylife.tw">MyIP Service, Get Your IP Address" rel="nofollow">http://myip.easylife.tw/myip.php?c=C0C0C0F0F0F00000009F9F9F"/>

    bshadow 於 2009/07/16 17:26 回覆

  • 豬小妞
  • 嗯...沒關係!!我還是先用版大提供的網址
    這樣應該就ok囉Q口Q" 請版大幫我看看囉~謝謝
  • 嗯嗯,上面的回覆我可能說得太複雜了…
    簡單的說

    這個語法
    要放在的後面
    不然當你點這個按鈕時會跑出顯示ip的那個網址XD

    bshadow 於 2009/07/16 17:32 回覆

  • 豬小妞
  • 了解~
    整天看語法,真的會被搞到頭大大☉▽☉"
    我已經修改好了!!有問題再來打擾打擾你囉>///<
  • 哈,習慣就好!

    bshadow 於 2009/07/16 18:41 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • skyboy1981
  • 版大你好^^打擾一下

    因為最近在PIXNET開了部落格!!有很多功能都不了解!!無意間就逛到你的網站~!感覺你應該可以解答我的疑惑~~所以有些問題想請教您一下@@可以嗎??

  • okay

    bshadow 於 2010/07/28 20:11 回覆

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼

【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消