小屋創作

日誌2016-01-28 12:10

還你漂漂拳,巴哈姆特Anti Anti AD Block

作者:扉西里格

更新日誌
.2018/11/09:修正巴哈姆特動畫瘋首頁下方相關新聞圖片位移問題
・2018/07/08:原推薦使用的stylish傳出有資安風險,已更換為Stylus(感謝巴友極地寒天提醒)
・2017/12/06:因應Firefox57全面改版,調整Stylish樣式。同時因擴充套件介面持續改變,故簡化流程
・2016/11/26:全面更新教學,統一使用Anti ADblock Killer
・2016/10/05:新增通用Anti ADblock Killer與腳本失效說明、新增快速連結

・2016/08/03:視覺美觀優化


  巴哈2016年大幅更新了其廣告設定的規則,嘗試新增了「antiAD」的script。具體影響是如果玩家啟用了如Adblock等廣告阻擋外掛時,可能連帶導致全站圖片失連或不可預期的問題發生。這個巴哈官方X擋廣告軟體X玩家的三方會戰在日前各大廠ADB更新後,狹帶玩家的強烈反彈,巴哈攻勢也逐漸趨緩。目前兩大ADB外掛ADBlock與UBlock都能正常運作了。此篇算是預防萬一,進行了一些更新與調整。

  首先是,身為一名設計者與網頁設計師,巴哈姆特近年來的版型異動,可謂是能理解亦不能理解。可以理解的是,每一回的版型改變,都塑造出了更多可以投放廣告的空間;但無法理解的是,巴哈姆特可以在UI/UX的設計原則下,處處與使用者開戰,簡直達到令人髮指的程度。而近日的更新,更是荒謬而可笑,彷彿讓我造訪到那個處處強暴眼睛的中國製二流網站。

特別聲明:
1. 以下僅就Google Chrome及Mozilla Firefox瀏覽器作為Anti Anti AD Block分享目標。
2. 皆採用官方瀏覽器認證無慮之外掛工具。
3. 其修改與自訂皆僅止於使用者自身電腦,無任何入侵、攻擊、公開巴哈姆特網站原始碼,或以任何形式傷害巴哈姆特之行為。
4. 使用本教學的巴友請自行評估風險與障礙排除之能力。
5. 本人並非全然否決廣告,早期巴哈的版型配置那張刊頭Banner廣告從未讓我萌生加裝ADB的念頭,是近年巴哈的版面異動與廣告篇幅,已經嚴重影響到使用者正常瀏覽的體驗了。



一、核心作業流程

1. 安裝Adblock軟體,依瀏覽器不同以下擴充套件任選
・Google Chrome:AdblockUblock
・Mozilla Firefox:AdblockUblock

2. 安裝使用者瀏覽器自訂功能,避免遭到反ADB程式的干擾,阻擋廣告失效
・Google Chrome:Tampermonkey
・Mozilla Firefox:Greasemonkey

3. 安裝反擋廣告腳本
・通用:Anti AD Killer,點選「安裝腳本」即可

4. 基本阻擋完成
基本到此大功告成,如果只是單純要阻擋常態廣告無意進行其他修改
那麼執行到這個階段就可以了
如果你想針對因廣告阻擋後跑版的畫面進行調整
你可以選擇繼續看下去


二、介面美化
1. 安裝Stylish樣式管理工具
・Google Chrome:Stylus
・Mozilla Firefox:Stylus
ps. 改版後Chrome與Firefox的操作介面已統一,以下說明兩版通用

2. 添增css樣式
2-1 點選Stylus的圖示 > 選擇 「管理已安裝樣式」>「編寫新樣式」
2-2 適用於 > 下拉選擇「該域名上的網址」> 輸入「gamer.com.tw」
2-3 貼上以下樣式表
#BH-bigbanner, #flySalve, .BA-billboard, #flyRightBox,
.BA-left > div:first-child {
    display: none;
}
.BA-wrapper.BA-main {
    width: 950px;
}
.GN-lbox3 {
    width: 978px;
}
.GN-lbox8, .GN-lbox9 {
    width: 980px;
}
#BH-master h4, .GN-lbox5, .GN-lbox6 {
    width: 1000px;
}
#videoDiv iframe, a:not(.animelook) .lazyloaded {
    display: block;
    margin: 0 auto;
}
.msgreport {
    width: auto;
}
div[style="position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 99; padding: 15px 30px 15px 15px; border: 1px solid rgb(225, 211, 184); border-radius: 3px; line-height: 1.5; background: rgb(255, 255, 219) none repeat scroll 0% 0%; color: rgb(112, 89, 48);"] {
    display: none;
}
div[style="position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 99; padding: 15px 30px 15px 15px; border: 1px solid rgb(225, 211, 184); border-radius: 3px; line-height: 1.5; background: rgb(255, 255, 219) none repeat scroll 0% 0%; color: rgb(112, 89, 48); display: block;"] {
    display: none !important;
}

2-4 設定名稱後保存,重整頁面即可

3. 其他樣式調整
因有部分樣式共用,導致某些頁面不太對勁,補充一些樣式,可能不時增減
・該域名上的網址:home.gamer.com.tw
・樣式表:
#BH-master h4 {width: auto;}



  樣式優化主要是針對首頁、新聞、哈拉版、信箱與商城幾大頁面進行排版校正,如有其他排版錯誤之處歡迎提出,我會抽空更新此文的css樣式。當然,如果目標單純是阻擋廣告而已,我相信現階段執行到第二大點,應該就能滿足你的需求了。

  最後我想說,身處廣告業,我很清楚平台營運中,提供廣告投放並藉由不同的標準如點擊率、刊頭租賃來收費是非常重要的收益來源。然而如果吃相過度暴走,使得使用者自發性地去迴避、技巧性阻擋這些廣告時,那是不是就本末倒置了呢?

  我誠心認為巴哈姆特應該慎思過大篇幅的廣告所帶來的雙面刃效應。

613

231

LINE 分享

相關創作

2024/03/02-巴哈春酒+動森樂高發售~

巴哈龍娘R-18同人本-預覽(未出刊)

[達人專欄] 【坐檯接客經驗談】喜歡的類型

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】