更新日誌
.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:
Adblock、
Ublock・Mozilla Firefox:
Adblock、
Ublock2. 安裝使用者瀏覽器自訂功能,避免遭到反ADB程式的干擾,阻擋廣告失效
・Google Chrome:
Tampermonkey・Mozilla Firefox:
Greasemonkey3. 安裝反擋廣告腳本
・通用:
Anti AD Killer,點選「安裝腳本」即可
4. 基本阻擋完成
基本到此大功告成,如果只是單純要阻擋常態廣告無意進行其他修改
那麼執行到這個階段就可以了
如果你想針對因廣告阻擋後跑版的畫面進行調整
你可以選擇繼續看下去
二、介面美化1. 安裝Stylish樣式管理工具
・Google Chrome:
Stylus・Mozilla Firefox:
Stylusps. 改版後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樣式。當然,如果目標單純是阻擋廣告而已,我相信現階段執行到第二大點,應該就能滿足你的需求了。
最後我想說,身處廣告業,我很清楚平台營運中,提供廣告投放並藉由不同的標準如點擊率、刊頭租賃來收費是非常重要的收益來源。然而如果吃相過度暴走,使得使用者自發性地去迴避、技巧性阻擋這些廣告時,那是不是就本末倒置了呢?
我誠心認為巴哈姆特應該慎思過大篇幅的廣告所帶來的雙面刃效應。