[教學] Blogger 文章中任意位置加入Google AdSense 廣告

Blogger 網誌模板範本應用教學:早前,介紹了在「Blogger 繼續閱讀隱藏廣告和物件」,是運用 blogspot 本身的「read more 繼續閱讀 ( <!--more--> )」在文章頁面自動擺放廣告。這篇則介紹於 Blogger 文章中隨意任意位置快速擺放 Google AdSense 廣告的方法。

同樣的,我們會利用到 HTML 範本中的「文章主體 ( <data:post.body/> )」,並在安裝幾行 Div 與 JavaScript 之後即可完成設定;以後,只要在撰寫文章時,從「撰寫」切換到「HTML」模式,並在任意位置放入「<!-- adsense -->」,廣告就會順利推送。

[教學] Blogger 文章中任意位置加入Google AdSense 廣告_001



當然,如果你希望廣告在推播到自己的網誌時,能夠有多一點的變化,也可以參考「Blogger 放置 Google AdSense 自訂廣告尺寸大小自適應網站安裝 Google AdSense 回應式廣告,三分鐘搞定!」這兩篇文章的廣告使用方式,做更靈活的配置運用。



設置流程

  1. 找查需要置入程式代碼的 HTML 區段
  2. 使用程式代碼包覆「文章主體 ( <data:post.body/> )」
  3. 文章撰寫時放入「<!-- adsense -->」廣告的方式

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設定教學

Step 1

找查需要置入程式代碼的 HTML 區段

前往 Blogger 後台,點選【範本 \ 編輯HTML】

[教學] Blogger 文章中任意位置加入Google AdSense 廣告_101



在程式碼頁框裡面用滑鼠左鍵點一下,並按下鍵盤組合件【Ctrl + f】 ( 按著 Ctrl 再按一下 f ) ,在出現的搜尋框中輸入 [ <data:post.body/> ] 並按下鍵盤【Enter】

[教學] Blogger 文章中任意位置加入Google AdSense 廣告_102



此時,在程式碼區間 ( 如果範本沒有改的太亂 . . ) ,可以找到三處有「<data:post.body/>」的程式碼片段。

第一個「<data:post.body/>」為 "行動模板" 的程式碼,如果模板改的很亂不確定是否為手機段的區間;可以在「<data:post.body/>」上方搜尋是否有「<b:includable id='mobile-post' var='post'>」字段,整個 Blogger 模板只會有一處。

[教學] Blogger 文章中任意位置加入Google AdSense 廣告_103



接著,滑鼠點一下程式碼頁框裡的「搜尋框」,再按下鍵盤上的【Enter】,可以找到另外兩處「<data:post.body/>」"電腦模板" 文章內文區塊的程式碼。

第二個為 "電腦模板" 文章以外的頁面包含「靜態頁 (/p/xxx.html)、首頁、存檔頁(/2015/03/xxx.html) . . .」、第三個為 "電腦模板" 文章頁面。

[教學] Blogger 文章中任意位置加入Google AdSense 廣告_104

接下來,在「Step2.」我們放入程式代碼的位置,就在第三個 "電腦模板" 文章頁面的「<data:post.body/>」之中。

如果你的 HTML 範本中只有兩個「<data:post.body/>」,那就將「Step2.」的代碼放在第二個「<data:post.body/>」之中。



Step 2

使用程式代碼更換「<data:post.body/>」

找到 "電腦模板" 文章頁面的「<data:post.body/>」之後,我們使用以下代碼更換掉原本的「<data:post.body/>」;並在代碼中「<!-- AdSense code 放在這裡 -->」的位置,放入自己的廣告代碼。(* 若有需求轉換廣告代碼可經由【這裡】轉碼。)


<!-- 文章中任意位置安裝廣告開始 -->
<!-- 原始的 <data:post.body/> -->
<div expr:id='&quot;adsmiddle1&quot; + data:post.id'/> 
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div class='ads' style='width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;'>
    <!-- AdSense code 放在這裡 -->
          </div>      
<div expr:id='&quot;adsmiddle2&quot; + data:post.id'>
<data:post.body/>
</div>
     </b:if>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;adsmiddle1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;adsmiddle2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
<!-- 文章中任意位置安裝廣告結束 -->


<!-- AdSense code 放在這裡 -->」更換為自己的廣告代碼後,接著搜尋 HTML 範本中的「</body>」;在「</body>」的上方,添加下列 AdSense 的 異步腳本 js,就完成設定了。(* 如果你的範本中,已經存在 adsbygoogle.js,則無需再次添加。)


<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>



以上動作完成,並【儲存範本】後,再接著執行「Step3.」即可看到效果。

另外,原始的「<data:post.body/>」,已經將它注釋為「<!-- 原始的 <data:post.body/> -->」。日後要復原,搜尋「原始的 <data:post.body/>」即可方便的還原代碼。



Step 3

文章撰寫時放入「<!-- adsense -->」廣告的方式

寫文章,於某一個段落想安插廣告時,只要從「撰寫」切換到「HTML」模式,並在該位置放入「<!-- adsense -->」;在文章發佈後,即可看到廣告推送了。

[教學] Blogger 文章中任意位置加入Google AdSense 廣告_301



小結

<!-- adsense -->」在使用時,於文章中只能擺放一個;另外,若在不使用「<!-- adsense -->」時,廣告則會在文章標題下方顯示。

AdSense 廣告的投放,需注意單一網站頁面廣告是否超過三個,一個頁面規定的多媒體、圖片廣告數量最多為三個!



相關連結

Blogger 放置 Google AdSense 自訂廣告尺寸大小

自適應網站安裝 Google AdSense 回應式廣告,三分鐘搞定!

Blogger 繼續閱讀隱藏廣告和物件

Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告



參考文獻
Tezzblog


留言

  1. 請問我已有其他帳戶也能這樣做嗎?

    回覆刪除
    回覆
    1. AdSense 帳戶,可以。其他平台的廣告,可以試試;因為目前沒有在其他平台註冊廣告聯播,所以無法幫忙做測試。

      刪除
  2. 新版的 Contempo 主題靜態頁也共用
    改了文章正常顯示
    但靜態頁 /p/xxx.html 不正常顯示
    該怎麼改呢?
    謝謝

    回覆刪除
    回覆
    1. 是指,「文章頁面」正常顯示廣告,「靜態網址頁面」沒顯示廣告嗎?

      刪除
    2. 呀!我懂了,「Contempo 主題」的『<data:post.body/>』直接包含了「文章頁面」與「靜態網址頁面」,所以直接使用 STEP2 來設置,會出現「靜態網址頁面」變成空白一片的狀態。

      使用本文設置在「Contempo 主題」時,可以將本文 STEP2 更換『<data:post.body/>』的整體代碼改成下面這樣:
      <!-- 文章中任意位置安裝廣告開始 -->
      <!-- 原始的 <data:post.body/> -->
      <div expr:id='&quot;adsmiddle1&quot; + data:post.id'/>
      <div class='ads' style='width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;'>
      <!-- AdSense code 放在這裡 -->
      </div>
      <div expr:id='&quot;adsmiddle2&quot; + data:post.id'>
      <data:post.body/>
      </div>
      <script type='text/javascript'>
      var obj0=document.getElementById(&quot;adsmiddle1<data:post.id/>&quot;);
      var obj1=document.getElementById(&quot;adsmiddle2<data:post.id/>&quot;);
      var s=obj1.innerHTML;
      var r=s.search(/\x3C!-- adsense --\x3E/igm);
      if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
      </script>
      <!-- 文章中任意位置安裝廣告結束 -->


      也就是去除掉了『<b:if cond='data:blog.pageType == &quot;item&quot;'>』與『</b:if>』,讓替換『<data:post.body/>』的整體代碼,讓代碼適用於整個網站。

      試試看,這樣應該就沒問題了。

      刪除
    3. 有!成功了~挖我剛剛才發現原來我少描述了 新版的 Contempo 主題靜態頁也共用 <data:post.body/>

      可樂大好強的理解力
      啪啪啪
      讚~~

      刪除
  3. 感謝您的教學!真的非常好懂~我想要請問如果想在行動版文章中也顯示廣告,是不是只要在mobile版的做相同步驟就可以了呢?

    回覆刪除
    回覆
    1. 您的網站是自適應版型的話,就不需要。(*視 HTML 模板情況而定)

      如果您的網站為傳統版型,可以在 HTML 裡的「行動版」代碼區塊加入此功能,即可顯示。

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰