提醒2020/04/27


由於痞客邦 2020/4/27 開始執行外部 JavaScript 語法規範, 各位請記得到 "帳號中心" 重做一次手機號碼認證 (一個手機號碼只能綁定一個登入號號), 否則 JS 會被擋下來的. 2020/4/27 以後有重做手機號碼認證的可以忽略這條訊息.

寫在前面


我想先聲明一下: 我不反對廣告. 但是對於 '宿主網站' 我反對版面上到處都是廣告. 我更討厭 '廣告業主' 因為沒有提供足夠流量, 或者圖檔/影音檔太大, 導致 '用戶經驗' 不佳的廣告.

Pixnet 移除廣告總整理



由於這一篇一直在附加移除廣告的修正記錄, 第一次逛到這裡大家可能會完全看不懂要如何才能搞定, 所以作了一個總整理.

這一個段落會不定期的更新 (依 Pixnet 更動而定), 所以套用了之後, 也請偶而回來看看 (part1 和 part3) 有沒有版本異動. 我會只留最新的版本並註記更新日期. 想知道改了些什麼, Part 3 段落的後面有記異動流水帳.

另外, 有許多人忽略了痞客邦後台的幾個可以自訂顥示與否的設定 (在 'MIB 部落格收益' 的 '版位設定' 中), 請先將他們都先關閉了再進行以下的修改. 已經修正了, 可以不必啟用 MIB 部落格收益(2021/12/03).

最近 (2021/12) 發現痞客邦的影片輪播即使關閉了顯示窗依舊會一直播一直下載影片. 需要搭配一段 JS 模擬手動關閉下載流量才會真正關閉, 這一段 JS 貼在側欄管理頁尾描述項裡即可. 請參看 2021/12/03 更新記錄.

Part 1. 電腦版: 修改你的 CSS


由後台 (新舊版本都可以) 的 '自訂樣式' 進入, 修改你的 CSS (先決要件是你套用了一個可以修改的外觀主題), 把下面這一段貼在最後面.

注意: 請把側欄廣告 1留在左側欄不需要了.

2023/03/03 更新 (查看更新記錄)

/* CSS for Blocking Pixnet AD */
#links div.hslice.box:not([id]),         /* 側欄廣告1 */
.adsbygoogle,
#sticky-sidebar-ad,      /* 側欄廣告3, 無需再啟用 MIB */
#pix-mib-unfold-ad,      /* 右側浮動廣告 */
#pixblogad-banner2,
#idle-pop,               /* 閒置廣告 */
#ad-full-page,           /* 蓋版廣告 */
#comment-text > div:not(.page),        /* 留言中廣告 */
#aniBox,                 /* 廣告影片輪播 */
#dablewidget_G7Z36M2l,
div[class^="_popIn_recommend"],     /* 您也可能喜歡這些文章 */
.one-multiply-one-ad,    /* 右下新廣告影片輪播 */
.trv-player-container,   /* 文章列表 及 文章右下廣告影片輪播 */
.aries_stage.aries_horizontalAxis,         /* 內文影片廣告 */
.aries_stage.aries_verticalAxis.aries_fixed,
.article-inlist-ad,
.article-content-inner .article-inread-ad     /* 內文廣告 */
{
  display:none!important;
  height:0!important
}

/* 移除推薦文章中的廣告, 並調整顯示樣式 */
#content ul.demo { padding:0; display:flex; flex-flow:row; justify-content:start; overflow-x:auto }
#content ul.demo,
#content ul.demo li a { width:100%; border-left:none }
#content ul.demo li a { display:flex; flex-flow:column; justify-content:center; align-items:center; text-align:center }
#content ul.demo li { border-left:1px solid #ccc; list-style: none; width:32% !important }
#content ul.demo li img { max-width:100px; mex-height:100px }
#content ul.demo li:last-child { border-right:1px solid #ccc }
#content ul.demo li:not([data-article-url$="?pixfrom=related"]) { display:none !important }
#content .recommended-posts3 ul li a span.article-text { word-break:break-all }

/* 移除 Pixnet 領航員 Happix (狐狸頭) */
#pilot div.pixnet-happix-pilot__launcher-bubble { display:none }

/* 移除 全站熱搜 */
.tag-container-parent .tag-container.global-keyword  { display:none !important }

這樣子基本上電腦版本的 Happix 以及六組廣告就可以擋住 (大部份: 99%).

  • 側欄廣告
  • 右側浮動廣告
  • 蓋版廣告 (首次及閒置)
  • 推薦文章中的廣告
  • 留言段落裡的廣告
  • 內文中的廣告

至於內容本身就是廣告的文章, 不好意思, 我也沒轍 (輒).

Part 2. 電腦版: 站方廣告, 修改你的頁尾設定


另外電腦版還有一個 '站方廣告' (在 '推薦文章' 的下一行), 要移除的話, 請你進入後台的 '側邊欄位設定', 在 '頁尾描述' 的設定裡輸入以下 JS 程式:

<script type="text/javascript">
    var sObj = document.getElementsByClassName('article-body');
    if (sObj.length==1)
        sObj[0].lastElementChild.style.display = 'none';
</script>

貼好之後要記得把 '是否顯示' 切換為 '開啟', 然後按下 '送出'.

頁尾設定

切換為 '開啟', 然後按下 '送出'

註一: 之所以需要這一小段程式是因為: 附在 <div class="article-body"> 段落最後面的廣告, 直接使用 inline-css 並加上了 !important. 而這一類的 CSS 是權限最高的, 故只能使用 JS 來修改它.

2022/05/28: 以下 2021/12/03 的修正好像不需要了, 可以回復成最早的版本. 目前我自己的已經刪掉了, 實驗觀查中...

2021/12/03 以後需多貼一段 JS, 更改後的結果如下:

<script type="text/javascript">
    var sObj = document.getElementsByClassName('article-body');
    if (sObj.length==1)
        sObj[0].lastElementChild.style.display = 'none';

!(function() {
    var xtry = 5;
    var xclick = 0;
    var myLoop = function() {
        let x = document.getElementById('av-close-btn')
        if (x) {
            if (x.onclick.toString() != 'function click() { [native code] }') {
                x.dispatchEvent(new MouseEvent('click'));
                xclick += 1
                if (xclick == 2) return
            }
        }
        xtry -= 1
        if (xtry) window.setTimeout(myLoop, 1500)
    }
    myLoop()
})()
</script>

Part 3. 手機版: 修改你的每一篇文章


如果你只是想要移除手機廣告, 不修改手機版的 CSS, 那麼你有簡短一點的選擇. 不過這一篇已經有一點亂了, 所以我把這一段另外拷一份到這一篇新貼文. 2019/10/22

要擋手機版的廣告會很煩. 主要是因為

  • 你自訂的電腦版 CSS 不會被套用在手機版上.
  • 文章中的 <style> 或者 <link> 在用手機看時會被洗掉.(隨著 pixnet 的改版, 這二個 tag 在手機版有時會被清掉, 但有時又可以工作.)
  • 文章中的<script>如果不符合特定的撰寫格式, 在用手機看時也會被洗掉. 不用多說, JS 程式執行時發生錯誤, 也是直接被洗掉.
  • 手機版有字型縮放 (A-|A|A+) 的 CSS, 也會影響文章部份的 CSS.
  • pixnet 有時候會有些異動, 新增一些廣告段落, 或者改變一些寫法. 如果這些 JS 和 CSS 直接插入在貼文中, 就會又需要一篇又一篇的再修改一遍.

為了解決這些問題, 我寫了二段 JS 程式: 一段是要貼在文章中的 (比較短) 用來載入第二段 JS 程式. 第二段 JS 程式則會處理上述的幾個問題, pixnet 有異動時也可以輕鬆的只改一處所有的貼文就都套用新的修正.

第一次用的人要先找個地方 (網路空間) 放置你自己的第二段 JS 程式. 詳細的作法請你參看我的這一篇貼文.

第二段 JS 程式如下: (下載點) 2022/07/06 更新 (查看更新記錄).

var adjStyleRule = function(sheetname, selector, rule) {
  // Is browser too old?
  if (!document.styleSheets) return [];
  var cRules = (function(sheetName, selector, rule) {
    if (sheetName.length == 0) {
      var cmpFunc = function(i, sheetname) {
        return !document.styleSheets[i].href;
      };
    } else {
      var cmpFunc = function(i, sheetname) {
        return ( document.styleSheets[i].href &&
             document.styleSheets[i].href.indexOf(sheetname)>=0 );
      }
    }
    var ret = [];
    var rexN = new RegExp("\\.new-layout ("+selector+")\\s*,\\s*\\.new-layout "+selector+"\\s\\*");
    var rexS = new RegExp(selector, "g");
    var rexR = new RegExp("("+rule.id+"\\s*:\\s*.*?)"+rule.text+";?", "g");
    for (var i = document.styleSheets.length-1; i>=0; i--)
      if (cmpFunc(i, sheetname)) {
        var rules = document.styleSheets[i].cssRules;
        for (var j = rules.length-1; j>=0; j--)
          if (rules[j].selectorText && rules[j].selectorText.match(rexS)) {
            var obj = {};
            obj.ridx = j;
            if (rules[j].selectorText.match(rexN))
              obj.selTxt = rules[j].selectorText.replace(rexN, "$1");
            else
              obj.selTxt = rules[j].selectorText;
            obj.cssTxt = rules[j].cssText.replace(/^.*\{\s*(.*)\s*\}/, "$1");
            obj.newTxt = obj.cssTxt.replace(rexR, "$1");
            obj.sheet = rules[j].parentStyleSheet;
            ret.push( obj );
          }
      }
    return ret;
  })(sheetname, selector, rule);

  var xRules = [
  { selTxt:
      '#idle-pop,' +
      '.pop-ad-cover,' +
      '.content a.close.hide.left,' +
      '.content div.iframe a, .content div.iframe a img,' +
      '.hot-articles,' +
      '#scupio_interstitialad,'+
//    'div[class^="article-footer article-ad"],' +
      'ins.pixnet-ad,' +
      'section.discover-stream,' +
      'div[class*="article-ad"],' +
      'div[id^="div-gpt-ad"],' +
      'div[id^="pixad"],' +
      '.tag-container-parent .tag-container.global-keyword,' +
//    '.pix-related-post,' +
      'ul.pix-related-post > div,' +
      '.rp-wrapper .related-products,' +
      'ul.relative-list > div,' +
//    'li.relative-item > div[id], li.relative-item.relative-item--ad,' +
//    'li.relative-item[data-source^="material_"], li.relative-item[data-source^="ad_"],' +
      'li.relative-item:not([data-article-url$="?pixfrom=related"]),' +
      '.header-ad,' +
      '.article-inlist-ad,' +
      '.pixnet-happix-pilot__sticky-box,' +
      '.pixnet-happix-pilot__sticky-box *,' +
      '#main .header-fixed-area,' +
//    '#pilot div.pixnet-happix-pilot__launcher-bar,' +
      '.in-read-ad-sticky-wrapper:not(.disable-sticky).active-sticky,'+
      'div[data-widget_id],'+
      'div.related, div.mgbox, div.GoogleActiveViewElement,' +
      '#onead-layout0,' +
      '.adsbygoogle', cssTxt:'display:none!important; height: 0px!important; min-height: 1px!important'}
  ];

  function myAppendCss(rules, sht) {
    if (sht.insertRule) {
      for (var i=0; i<rules.length; i++)
        sht.insertRule(rules[i].selTxt + ' { ' + rules[i].cssTxt + ' }', sht.cssRules.length);
    } else if (sht.addRule) {
      for (var i=0; i<rules.length; i++)
        sht.addRule(rules[i].selTxt, rules[i].cssTxt, sht.cssRules.length);
    }
  }

  function myReplaceCss(rules) {
    var i = 0;
    if (rules[0].sheet.insertRule) {
      for ( ; i<rules.length; i++)
        rules[i].sheet.deleteRule(rules[i].ridx);
      for (i--; i>=0; i--)
        rules[i].sheet.insertRule(rules[i].selTxt + ' { ' + rules[i].newTxt + ' }', rules[i].ridx);
    } else if (rules[0].sheet.addRule) {
      for ( ; i<rules.length; i++)
        rules[i].sheet.removeRule(rules[i].ridx);
      for (i--; i>=0; i--)
        rules[i].sheet.addRule(rules[i].selTxt, rules[i].newTxt, rules[i].ridx);
    }
  }

  if (cRules.length && cRules.length > 0) {
    myReplaceCss(cRules);
    myAppendCss(xRules, cRules[0].sheet);
    let elms = document.querySelectorAll("ins.adsbygoogle")
    elms.forEach( (elm) => {
      elm.style.display = 'none'
    })
  }
}("", "\\.article-content-inner\\.zoom(1|2|3|-lg|-md|-sm)", { id:"font-size", text:"!important" } );

第一段 JS 程式如下, 請附加在每一篇文章的最後面 (放前面會影響你在 google 的 SEO): (2020/04/04 更新)

<script><!--
(function (tag, url, callback) {
	var script = document.createElement(tag);
	script.setAttribute('type', 'text/javascript');
	script.setAttribute('src', url);
	if (callback)
		script.onload = callback;
	document.getElementsByTagName('head')[0].appendChild(script);
})("script", "你要加載的 JS URL, 也就是上面產出的下載 JS URL");
-->
</script>
  • 請記得把這一段 "你要加載的 JS URL, 也就是上面產出的下載 JS URL" 改掉.
  • 修改文章時要用 "舊版" 管理介面, 並請用 "純文字模式", 同時修改中不要切換 "編輯器", 貼上上述 JS, 並且記得把 "系統換行" 設定為 "不要系統換行", 然後直接存檔. 詳細請參考下面 圖1. 圖2. 或者參考這一篇貼文的第一段的第二個方法的說明.
  • Pixnet 已經把舊版的編輯器整合到新版管理介面中了, 你可以在新版管理介面上的 擴充管理功能 裡安裝 部落格舊編輯模擬器 這個 plugin 就可以繼續使用舊的編輯器. 設定和操作則完全和原本舊版的一樣. 2019/10/18
  • 後續如要修改文章也請用 "純文字模式". 如果因為不熟 HTML tag, 切換模式, 修改文章並存檔之後, 記得切回 "純文字模式", 將被更動過的 JS 刪除, 並重新貼上上述的 JS. (或者先刪掉 JS, 修改完文章後再重新加上)
  • 第二段 JS 程式中有預留加載自訂的手機版 CSS 檔的功能, 如果有需要可以找到下面這一行, 自行修改: 將註解 (//) 拿掉, 並修改手機版 CSS 檔的下載 URL.這一段已經失效, 已經從原始程式中刪除(2022/01/01).
//  loadCSS("你要加載的自訂手機版 CSS URL");
pixnet_switch-mode

切換為純文字模式

pixnet_CRLF

把 "系統換行" 設定為 "不要系統換行"

其他


新開的帳號, 在不啟用 MIB 的狀況下, 這樣修改完之後手機版應該只會有 '邦邦' 的廣告 (我會再找時間測試如何把它關掉).

'發現更多有趣邦邦' 已經可以拿掉了, 之前一直忘了更新給大家. 2019/10/22

      'section.discover-stream,'+

如果你在使用上有發現任何問題, 歡迎留言或者 email 給我.

異動 2018/12/06


Pixnet 移除廣告總整理 第一版完成.

異動 2018/12/12


移除側欄廣告部份回復使用舊版本, 原因: 新的移除側欄廣告 CSS 語法範圍太大, 導致 Pixnet 人氣統計大幅下降.

異動 2018/12/14


新增移除 Pixnet 的領航員 Happix (就是那個 '狐狸頭' 啦). 電腦版和手機版都有異動, 二者的 CSS 選擇標的有點小差異.

電腦版新增下列二行:

/* 移除 Pixnet 領航員 Happix (狐狸頭) */
#pilot div.pixnet-happix-pilot__launcher-bubble { display:none }

手機版新增的是下列這一行:

      '#pilot div.pixnet-happix-pilot__launcher-bar,' +

異動 2018/12/17


阻攔站方廣告的部份弄錯了, 應該改用 JS 程式才對. 所以原本的 CSS 中這二行要移除.

/* 推薦文章的下一行 */
#content .article-body div:last-child > div:first-child,

異動 2019/01/10


修正手機版無法載入自訂 CSS的問題, 下載點的內容已更新.

還是怪怪的, 改完當天可以擋掉 AD, 同時可載入手機用的 CSS, 但是隔天就破功. 看來只能用以前的方法: 把手機用的 CSS 轉成資料給擋 AD 的 JS 處理了. (好像是 safari 的 bug, 手機重開就好了).

異動 2019/04/19


移除手機版最近加入的機票廣告. 手機版用的 JS, 新增下列一行:

      'div.related,' +

異動 2019/10/18


移除手機版最近加入的 mgid 減肥廣告, 還有一些以前的漏網之魚. 手機版用的 JS, 新增二行:

      'div[id^="div-gpt-ad"],' +

      'div.mgbox, div.GoogleActiveViewElement,' +

異動 2019/10/22


更新下載點的檔案內容 (抱歉, 之前貼文更新了, 下載檔的內容卻忘了更新.)

同時, 我也把移除 '您可能會有興趣的文章' 的部份也加進去了, 但是用 // 把它變成註解.

//    '.pix-related-post,' +

需要移除 '您可能會有興趣的文章' 的朋友請自行修改檔案把 // 除除掉即可.

      '.pix-related-post,' +

異動 2019/11/04


由於手機版面把 '留言版' 功能移至 'Pixnet 的領航員 Happix' 上, 故需要復原已移除 Pixnet 的領航員 Happix.

//    '#pilot div.pixnet-happix-pilot__launcher-bar,' +

異動 2020/02/10


應讀者要求增加移除 '全站熱搜' 的 CSS. 需要的人可以自行修改自己的 CSS. 電腦版新增部份如下:

/* 移除 全站熱搜 */
.tag-container-parent .tag-container.global-keyword  { display:none }

手機版新增部份如下:

      '.tag-container-parent .tag-container.global-keyword,' +

不需要的人可以不用改, 或者行首加上//加它變成註解.

//    '.tag-container-parent .tag-container.global-keyword,' +

異動 2020/04/04


修正載入外部 JS 的小程式. 原本的 JS:

<script><!--
(function (url, callback) {
	var script = document.createElement('script');
	script.setAttribute('type', 'text/javascript');
	script.setAttribute('src', url);
	if (callback)
		script.onload = callback;
	document.getElementsByTagName('head')[0].appendChild(script);
})("你要加載的 JS URL, 也就是上面產出的下載 JS URL");
-->
</script>

修正後的 JS:

<script><!--
(function (tag, url, callback) {
	var script = document.createElement(tag);
	script.setAttribute('type', 'text/javascript');
	script.setAttribute('src', url);
	if (callback)
		script.onload = callback;
	document.getElementsByTagName('head')[0].appendChild(script);
})("script", "你要加載的 JS URL, 也就是上面產出的下載 JS URL");
-->
</script>

異動 2020/04/28


痞客邦修改了推薦文章中的廣告語法, 原阻擋廣告 CSS 必需跟著修正. 本次修正主要是改用 flexbox 樣式來因應:

  • 廣告過濾語法修正.
  • 推薦文章過濾後廣告之後的資料欄數目可能是 3~4 欄不確定, 故改用 flexbox 樣式自動調整.
  • 限制圖片大小為 100px × 100px. 防止某些推薦文章的縮圖太大.

原始 CSS 片段:

/* 移除推薦文章中的廣告, 並調整顯示樣式 */
#content ul.demo,
#content ul.demo li a { width:100%; border-left:none }
#content ul.demo li { border-right:1px solid #ccc; width:32% !important }
#content ul.demo li:nth-child(1) { border-left:1px solid #ccc; margin-left:2% }
#content ul.demo li div[id^="pixad"] { display:none !important }

修改為:

/* 移除推薦文章中的廣告, 並調整顯示樣式 */
#content ul.demo { padding:0; display:flex; flex-flow:row; justify-content:center; overflow-x:auto }
#content ul.demo,
#content ul.demo li a { width:100%; border-left:none }
#content ul.demo li a { display:flex; flex-flow:column; justify-content:center; align-items:center; text-align:center }
#content ul.demo li { border-right:1px solid #ccc; width:32% !important }
#content ul.demo li img { max-width:100px; mex-height:100px }
#content ul.demo li:nth-child(1) { border-left:1px solid #ccc }
#content ul.demo li[data-source^="ad_pc_"] { display:none !important }

異動 2020/06/06


痞客邦小改了全站熱搜的語法. 原先用來阻擋電腦版全站熱搜的 CSS 需要修正 (手機版不用修正). 原先的 CSS 如下:

/* 移除 全站熱搜 */
.tag-container-parent .tag-container.global-keyword  { display:none }

修正後的 CSS 為:

/* 移除 全站熱搜 */
.tag-container-parent .tag-container.global-keyword  { display:none !important }

異動 2021/04/14


痞客邦新加入電腦版廣告影片輪播區塊. 原先的 CSS 需要修正 (手機版不用修正). 原先修正前的 CSS 如下:

#comment-text > div,     /* 留言中廣告 */
.article-content-inner .article-inread-ad    /* 內文廣告 */

修正後的 CSS 為:

#comment-text > div,     /* 留言中廣告 */
.article-body .trv-player-container,    /* 右下廣告影片輪播 */
.article-content-inner .article-inread-ad    /* 內文廣告 */

異動 2021/08/12


痞客邦更新電腦版廣告影片輪播區塊. 原先的 CSS 需要修正 (手機版同樣不需修正). 原先修正前的 CSS 如下:

#comment-text > div,     /* 留言中廣告 */
.article-body .trv-player-container,    /* 右下廣告影片輪播 */
.article-content-inner .article-inread-ad    /* 內文廣告 */

修正後的 CSS 為:

#comment-text > div,     /* 留言中廣告 */
.one-multiply-one-ad,    /* 右下新廣告影片輪播 */
.article-body .trv-player-container,    /* 右下廣告影片輪播 */
.article-content-inner .article-inread-ad    /* 內文廣告 */

異動 2021/11/13


補充 2021/09/30 #83 問題解答. 原以為是個別事件, 所沒有更新 CSS. 原先修正前的 CSS 如下:

#comment-text > div,     /* 留言中廣告 */
.one-multiply-one-ad,    /* 右下新廣告影片輪播 */
.article-body .trv-player-container,    /* 右下廣告影片輪播 */
.article-content-inner .article-inread-ad    /* 內文廣告 */

修正後的 CSS 為:

#comment-text > div,     /* 留言中廣告 */
.one-multiply-one-ad,    /* 右下新廣告影片輪播 */
.article-body .trv-player-container,    /* 右下廣告影片輪播 */
.article-inlist-ad,
.article-content-inner .article-inread-ad    /* 內文廣告 */

異動 2021/12/03


直接開關 MIB 側欄廣告 3, 無需再啟用 MIB. 原先修正前的 CSS 如下:

#links #links-row-1 div.hslice.box[id*="-ad-"],
#pix-mib-unfold-ad,      /* 右側浮動廣告 */

修正後的 CSS 為:

#links #links-row-1 div.hslice.box[id*="-ad-"],
#sticky-sidebar-ad,      /* 側欄廣告3, 無需再啟用 MIB */
#pix-mib-unfold-ad,      /* 右側浮動廣告 */

另外阻擋下載流量部份需要一小段 JS, 如下. 請貼在頁尾描述, 原本貼在頁尾描述的 JS 如下:

<script type="text/javascript">
    var sObj = document.getElementsByClassName('article-body');
    if (sObj.length==1)
        sObj[0].lastElementChild.style.display = 'none';
</script>

更改後的結果如下:

<script type="text/javascript">
    var sObj = document.getElementsByClassName('article-body');
    if (sObj.length==1)
        sObj[0].lastElementChild.style.display = 'none';

!(function() {
    var xtry = 5;
    var xclick = 0;
    var myLoop = function() {
        let x = document.getElementById('av-close-btn')
        if (x) {
            if (x.onclick.toString() != 'function click() { [native code] }') {
                x.dispatchEvent(new MouseEvent('click'));
                xclick += 1
                if (xclick == 2) return
            }
        }
        xtry -= 1
        if (xtry) window.setTimeout(myLoop, 1500)
    }
    myLoop()
})()
</script>

異動 2021/12/15


清除安插在推薦文章列表中的廣告. 並調整一下 CSS. 原先修正前的 CSS 如下:

#content ul.demo li:nth-child(1) { border-left:1px solid #ccc }
#content ul.demo li[data-source^="ad_pc_"] { display:none !important }

更改後的結果如下:

#content ul.demo li:nth-child(1) { border-left:1px solid #ccc }
#content ul.demo li:not([data-article-url$="?pixfrom=related"]) { display:none !important }
#content .recommended-posts3 ul li a span.article-text { word-break:break-all }

手機版的也調整了. 原先修正前的 JS 如下:

      'ul.relative-list > div, li.relative-item > div[id], li.relative-item.relative-item--ad,' +
      'li.relative-item[data-source^="material_"], li.relative-item[data-source^="ad_"],' +

更改後的結果如下:

//    'ul.relative-list > div, li.relative-item > div[id], li.relative-item.relative-item--ad,' +
//    'li.relative-item[data-source^="material_"], li.relative-item[data-source^="ad_"],' +
      'li.relative-item:not([data-article-url$="?pixfrom=related"]),' +

重新整理清除側欄廣告 1的 CSS. 原先修正前的 CSS 如下:

/* CSS for Blocking Pixnet AD */
#links #links-row-1 div[class*="-mib-"],     /* 側欄廣告 */
#links #links-row-1 div[class*="-border-"],
#links #links-row-1 div.hslice.box[class*="-ad-sidebar-"],
#links #links-row-1 div.hslice.box[id*="-mib-"],
#links #links-row-1 div.hslice.box[id*="-ad-"],

更改後的結果如下:

#links div.hslice.box:not([id]),
.adsbygoogle,

異動 2022/03/15


加入去除廣告影片輪播 (舊設定 #aniBox).

更改後的結果如下:

#comment-text > div,     /* 留言中廣告 */
#aniBox,                 /* 廣告影片輪播 */
.one-multiply-one-ad,    /* 右下新廣告影片輪播 */

異動 2022/04/07


電腦版移除留言中廣告的部份有錯, 會將留言翻頁的功能關閉, 需要再精確定位. 原先修正前的 CSS 如下:

#comment-text > div,     /* 留言中廣告 */

更改後的結果如下:

#comment-text > div:not(.page),        /* 留言中廣告 */

異動 2022/04/25


加入去除 PC 版大量不相干廣告 "您也可能喜歡這些文章" CSS 語法.

更改後的結果如下:

#aniBox,                 /* 廣告影片輪播 */
div[class^="_popIn_recommend"],    /* 您也可能喜歡這些文章 */
.one-multiply-one-ad,    /* 右下新廣告影片輪播 */

異動 2022/05/28


修正去除 PC 版文章右下的影片輪播 CSS, 使其可去除文章列表右下或最下方的影片輪播. 原先修正前的 CSS 如下:

.one-multiply-one-ad,    /* 右下新廣告影片輪播 */
.article-body .trv-player-container,   /* 右下廣告影片輪播 */
.article-inlist-ad,

更改後的結果如下:

.one-multiply-one-ad,    /* 右下新廣告影片輪播 */
.trv-player-container,   /* 文章列表 及 文章右下廣告影片輪播 */
.article-inlist-ad,

異動 2022/07/06


修正手機版 JS (二個部份). 原先修正前第一部份的 JS (此部份和 CSS 相關) 如下:

//    '#pilot div.pixnet-happix-pilot__launcher-bar,' +
      'div.related, div.mgbox, div.GoogleActiveViewElement,' +

原先修正後第一部份的 JS 如下 (增加二行):

//    '#pilot div.pixnet-happix-pilot__launcher-bar,' +
      '.in-read-ad-sticky-wrapper:not(.disable-sticky).active-sticky,'+
      'div[data-widget_id],'+
      'div.related, div.mgbox, div.GoogleActiveViewElement,' +

原先修正前第二部份的 JS 如下:

  if (cRules.length && cRules.length > 0) {
    myReplaceCss(cRules);
    myAppendCss(xRules, cRules[0].sheet);
  }

修正後第二部份的 JS 如下:

  if (cRules.length && cRules.length > 0) {
    myReplaceCss(cRules);
    myAppendCss(xRules, cRules[0].sheet);
    let elms = document.querySelectorAll("ins.adsbygoogle")
    elms.forEach( (elm) => {
      elm.style.display = 'none'
    })
  }

異動 2022/07/07


更動了您可能有興趣的文章所使用的 CSS, 原先更動前的 CSS 如下:

#content ul.demo li { border-right:1px solid #ccc; list-style: none; width:32% !important }
#content ul.demo li img { max-width:100px; mex-height:100px }
#content ul.demo li:nth-child(1) { border-left:1px solid #ccc }

更動後的 CSS 如下:

#content ul.demo li { border-left:1px solid #ccc; list-style: none; width:32% !important }
#content ul.demo li img { max-width:100px; mex-height:100px }
#content ul.demo li:last-child { border-rigth:1px solid #ccc }

這次更動本來想解決隱藏您可能有興趣的文章內的廣告後所造成的排版問題. 不過似乎沒解決問題, 故尚在構思與驗證中...

異動 2023/02/22


增加一組移除您也可能喜歡這些文章的 CSS selector. 原先更動前的 CSS 如下:

#aniBox,                 /* 廣告影片輪播 */
div[class^="_popIn_recommend"],    /* 您也可能喜歡這些文章 */

更動後的 CSS 如下:

#aniBox,                 /* 廣告影片輪播 */
#dablewidget_G7Z36M2l,
div[class^="_popIn_recommend"],    /* 您也可能喜歡這些文章 */

左右二側側浮動廣告, 可以移除了, 但還需要再多測試一下.

異動 2023/03/03


移除內文影片廣告, 原先更動前的 CSS 如下:

.trv-player-container,   /* 文章列表 及 文章右下廣告影片輪播 */
.article-inlist-ad,
.article-content-inner .article-inread-ad     /* 內文廣告 */

更動後的 CSS 如下:

.trv-player-container,   /* 文章列表 及 文章右下廣告影片輪播 */
.aries_stage.aries_horizontalAxis,         /* 內文影片廣告 */
.aries_stage.aries_verticalAxis.aries_fixed,
.article-inlist-ad,
.article-content-inner .article-inread-ad     /* 內文廣告 */

以前的本文從這裡開始



如果你覺得廣告很煩...

你有注意到了嗎? 我的部落格沒廣告.

如何移除本文下方的廣告



請選擇 '側邊欄位設定', 進入 '頁尾描述' 的 '設定', 並貼上以下的 javascript, 並選擇 '開啟'.

<script type='text/javascript'>
	var sObj = document.getElementsByClassName('article-body');
	if (sObj.length==1)
		sObj[0].lastElementChild.style.display = 'none';
</script>

這一段只限電腦模式有效. (2017/05/04)

如何移除側欄的廣告



不用花錢在 "痞客邦" 買 APP, 方法很簡單:

管理後台->自訂樣式->CSS 原始碼編輯

找到 "#links-row-1{}", 修改並加上二行

#links-row-1{ display:none; }
#pixblogad-banner2,
#idle-pop { display: none; }

註:必需把側欄項目都搬到 '側欄2' 去, 因為 '側欄1' 廣告的 div id 是動態的,我試用過下面的 css selector 結果無效

#links-row-1 div.hslice:first-child,
#links-row-1 div.hslice:nth-child(2),
#links-row-1 div.hslice[id*="-mib-"],
#links-row-1 div.hslice[id*="-ad-"] {
 display:none; }

側欄項目都搬到 '側欄2' 去之後用 first-child 那一項可以把側欄的廣告關掉, 但是一把側欄搬進去後就不行. 因為他退去第二項去了, 但是用 nth-child(2) 卻無法把它關掉.

似乎是有搭配 css 設定強制打開顯示 { display:block !important; }, 所以只好...

不想移開也可以設定為 (-320px 可能需要微調 )

#links-row-1 { margin-top: -320px; }

Update 2015/08/07


有讀書果然可以解決問題, 現在 側欄項目 可以隨便放在 '側欄1' 或 '側欄2' 了, 所以如果你選的是 3欄的樣式也 OK!

設定改成如下:

#links-row-1{ } /* 保留原樣 */
#links-row-2{ } /* 保留原樣 */

/* 加入下面7行 */
#pixblogad-banner2,
#idle-pop,
#links #links-row-1 div.hslice.box[id*="-mib-"],
#links #links-row-1 div.hslice.box[id*="-ad-"]
{
  display: none !important;
  height:0!important
}

Update 2015/08/18


來玩躲貓貓, pixnet AD 的程式又改了

方法: 由 "管理後台"-->"自訂樣式"-->"CSS 原始碼編輯" 進入編輯 CSS. 找到#link-row-1, 設定要改成如下:

#links-row-1{ } /* 保留原樣 */
#links-row-2{ } /* 保留原樣 */

/* 加入下面7行 */
#pixblogad-banner2,
#idle-pop,
#links #links-row-1 div[class*="-mib-"],
#links #links-row-1 div[class*="-border-"]
{
  display: none !important;
}

Update 2016/07/26


好久沒來更新這一篇, 現在設定要改成:

#pixblogad-banner2,
#idle-pop,
#links #links-row-1 div[class*="-mib-"],
#links #links-row-1 div[class*="-border-"],
#links #links-row-1 div.hslice.box[class*="-ad-sidebar-"],
#links #links-row-1 div.hslice.box[id*="-mib-"],
#links #links-row-1 div.hslice.box[id*="-ad-"]
{
  display:none!important;
}

這一段只限電腦模式有效. (2017/05/04)

如何移除推薦文章中的廣告 (2018/12/05)



Pixnet 在推薦文章段落 (你可能有興趣的文章) 中多插入了二個廣告. 要移除這二個需要在自訂樣式中多加入一小段 CSS, 如下:

/* 移除推薦文章中的廣告 */
#content ul.demo,
#content ul.demo li a { width:100%; border-left:none }
#content ul.demo li { border-right:1px solid #ccc; width:32% !important }
#content ul.demo li:nth-child(1) { border-left:1px solid #ccc; }
#content ul.demo li div[id^="pixad"] { display:none !important }

這一段只限電腦模式有效. 手機模式的部份稍後修正及測試後再告訴大家.

手機模式



移除文章中的廣告: 在文章中 (最前面就可以了) 加入以下的 CSS 設定

<style type='text/css'>
div[id^=pixad] { display:none; }
</style>

移除文章列表的廣告: 還沒找到插入點

Update 2015/10/12


手機模式又有異動了, 這次要換成:

<style type='text/css'>
#idle-pop,                     /* 閒置 PopUp 廣告 */
.pop-ad-cover,
.content a.close.hide.left,    /* PopUp 廣告, 關閉按鈕 */
.content div.iframe a,         /* PopUp 廣告 */
.content div.iframe a img,     /* PopUp 廣告 */
.rp-wrapper .related-products, /* 站內廣告 */
.header-ad,                    /* Title 廣告 */
.adsbygoogle {  display:none !important; height: 0px!important } /* Google 廣告 */
</style>

因為還是沒有共用的進入點, 所以一樣是要每一遍文章都修改過, 真的有點煩 :(

註: 這一段設定對 '電腦版模式' 一樣有效, 可以阻檔閒置時跳出來的 PopUp 廣告.

Update 2017/04/13


手機模式又有異動了, 這次 CSS 要加上下列設定:

<style type='text/css'>
#idle-pop,                     /* 閒置 PopUp 廣告 */
.pop-ad-cover,
.content a.close.hide.left,    /* PopUp 廣告, 關閉按鈕 */
.content div.iframe a,         /* PopUp 廣告 */
.content div.iframe a img,     /* PopUp 廣告 */
.hot-articles,        /* 頁尾廣告 */
div[id^="pixad"],     /* 頁尾廣告 */
.rp-wrapper .related-products, /* 站內廣告 */
.header-ad,                    /* Title 廣告 */
.adsbygoogle {  display:none !important; height: 0px!important } /* Google 廣告 */
</style>

不過由於手機模式會濾除 <style> 和 <link> 所以必需用 javascript 來把上列設定附加上去.

需要程式的讀者請留言. (2017/05/04)

Update 2017/05/04


手機的 PopUp 廣告好像破功了, 改天再來測試修改吧!

Update 2017/05/10


手機模式阻擋廣告用的 CSS 設定如下:

<style type='text/css'>
#idle-pop,                     /* 閒置 PopUp 廣告 */
.pop-ad-cover,
.content a.close.hide.left,    /* PopUp 廣告, 關閉按鈕 */
.content div.iframe a,         /* PopUp 廣告 */
.content div.iframe a img,     /* PopUp 廣告 */
.hot-articles,                 /* 頁尾廣告 */
div[id^="pixad"],              /* 頁尾廣告 */
#scupio_interstitialad,    /* 新的 PopUp 廣告 */
.article-ad,               /* 文章末尾廣告 */
.rp-wrapper .related-products, /* 站內廣告 */
.header-ad,                    /* Title 廣告 */
.adsbygoogle {  display:none !important; height: 0px!important } /* Google 廣告 */
</style>

一樣是必需用 javascript 才能把上列設定附加上去. 需要程式的讀者請留言.

Update 2017/09/14


更新手機模式阻擋廣告用的 CSS 設定如下:

<style type='text/css'>
#idle-pop,                     /* 閒置 PopUp 廣告 */
.pop-ad-cover,
.content a.close.hide.left,    /* PopUp 廣告, 關閉按鈕 */
.content div.iframe a,         /* PopUp 廣告 */
.content div.iframe a img,     /* PopUp 廣告 */
.hot-articles,                 /* 頁尾廣告 */
div[id^="pixad"],              /* 頁尾廣告 */
#scupio_interstitialad,        /* 新的 PopUp 廣告 */
.article-ad,                   /* 文章末尾的廣告 */
div[class*="article-ad"],
.rp-wrapper .related-products, /* 站內廣告 */
ul.relative-list > div,        /* 插入在相關文章欄的廣告 */
li.relative-item > div[id],
li.relative-item.relative-item--ad,
.header-ad,                    /* Title 廣告 */
.adsbygoogle {  display:none !important; height: 0px!important } /* Google 廣告 */
</style>

需要用 javascript 把上列設定附在文章中. 需要程式的讀者請留言.

Update 2018/10/23


這次的異動取消了 (2018/10/29).今天又發現 PIXNET 的廣告又有一些變動. 這一次沒有攔截下來的變動 PC 模式及手機模式各有一個:

  • PC 模式多了文章中的廣告: 這一個只要你把下面這一行貼到自己的 CSS 式樣即可.
  • .article-content-inner .article-inread-ad { display:none !important }
    
  • 手機模式則更動了標題部份的廣告結構, 並新設了一個 CSS 屬性min-height. 所以我們原本設定 CSS 屬性height: 0px!important, 也需要擴充修改為: height: 0px!important; min-height: 0px!important.

手機模式部份要把 JS 檔案中的這二行

    '.header-ad,' +
    '.adsbygoogle', csstext:'display:none!important; height: 0px!important'}

修改成如下三行 (是新增加了一行, 修改一行)

    '.header-ad,' +
    '#main .header-fixed-area,' +
    '.adsbygoogle', csstext:'display:none!important; height: 0px!important; min-height: 0px!important'}

所以目前對應的在 PIXNET 阻擋廣告用的整個 CSS 設定如下:

<style type='text/css'>
#idle-pop,                     /* 閒置 PopUp 廣告 */
.pop-ad-cover,
.content a.close.hide.left,    /* PopUp 廣告, 關閉按鈕 */
.content div.iframe a,         /* PopUp 廣告 */
.content div.iframe a img,     /* PopUp 廣告 */
.hot-articles,                 /* 頁尾廣告 */
div[id^="pixad"],              /* 頁尾廣告 */
#scupio_interstitialad,        /* 新的 PopUp 廣告 */
.article-ad,                   /* 文章末尾的廣告 */
div[class*="article-ad"],
.rp-wrapper .related-products, /* 站內廣告 */
ul.relative-list > div,        /* 插入在相關文章欄的廣告 */
li.relative-item > div[id],
li.relative-item.relative-item--ad,
.header-ad,                    /* Title 廣告 */
#main .header-fixed-area,
.adsbygoogle {  display:none !important; height: 0px!important; min-height: 0px!important } /* Google 廣告 */
</style>

以前有用我的 JS 的朋友: 如果你不會自行修改, 可以再來信或留言, 我會把新的檔案寄給你, 謝謝.

arrow
arrow

    MagicJackTing 發表在 痞客邦 留言(118) 人氣()