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

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

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

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

設置流程

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

設置前準備

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

設定教學

Step 1

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

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

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

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

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

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

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

接下來，在「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 -->」；在文章發佈後，即可看到廣告推送了。

小結

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

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

相關連結

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

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

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

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

參考文獻

Tezzblog