[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

[教學] 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



分享

共有 7 則留言

留言迴響
Anonymous
管理員
12/20/2016 8:33 PM ×

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

回覆
avatar
coke tech
管理員
12/20/2016 8:53 PM ×

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

回覆
avatar
KM Zeng
管理員
6/04/2017 8:53 PM ×

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

回覆
avatar
coke tech
管理員
6/05/2017 5:17 PM ×

是指,「文章頁面」正常顯示廣告,「靜態網址頁面」沒顯示廣告嗎?

回覆
avatar
coke tech
管理員
6/05/2017 6:02 PM ×

呀!我懂了,「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/>』的整體代碼,讓代碼適用於整個網站。

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

回覆
avatar
KM Zeng
管理員
6/05/2017 8:28 PM ×

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

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

回覆
avatar

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *