[unboxing][hrads]

熱門標籤

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

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

  Blogger HTTPS 相關文章列表:「HTTPS

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

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

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

大致在五月左右在 Blogger 做了測試,發現 Google AdSense廣告單元現在能夠自訂廣告的寬高尺寸大小了!以矩形廣告來觀察,一般傳統的廣告單元能夠使用的尺寸只有「300x250 或 336x280」,廣告在呈現時於靈活度上就有些許的限制。

經由本篇設置,若是自訂尺寸以「高 300」當作矩形廣告高度基底的話,廣告寬度則可以依自己網站模板的橫寬,做自由變化的設定;經由觀察後發現,設定以「640x300」當作廣告單元呈現的範圍,約末會有以下幾種廣告尺寸變化。

當基本的「336x280」大矩形廣告不出現時,AdSense 會推送「300x250」的中矩形廣告及新尺寸「435x300」和「360x300」多媒體廣告,若以上四種廣告大小都沒出現時,則會推送「寬 640x高 300 以內」的文字廣告。

補充 ( 2015/09/01 ):站內找資料時,發現新的多媒體廣告尺寸「640x165」。
補充 ( 2015/09/05 ):新的多媒體廣告尺寸「640x300」。

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

接下來,要開始動工了!若你的 Blogger 範本為自適應版型,也可以參考「自適應網站安裝 AdSense 回應式廣告,三分鐘搞定」做更靈活的響應式廣告配置應用。



多媒體與文字廣告目前有以下幾種樣式呈現

「336x280、300x250、360x300」
Blogger 放置 Google AdSense 自訂廣告尺寸大小_002
一般矩形廣告



「435x300」
Blogger 放置 Google AdSense 自訂廣告尺寸大小_003
新尺寸多媒體廣告



「640x300、640x190」文字廣告
Blogger 放置 Google AdSense 自訂廣告尺寸大小_004
( 依設置的寬度而定,寬版文字廣告 )



「640x300」列表橫式文字廣告
Blogger 放置 Google AdSense 自訂廣告尺寸大小_005
 ( 依設置的寬度而定,列表式文字廣告,樣式一)



「640x300」列表直式文字廣告
Blogger 放置 Google AdSense 自訂廣告尺寸大小_006
 ( 依設置的寬度而定,列表式文字廣告,樣式二)



「640x165」多媒體廣告 ( 2015/09/01 補充 )
Blogger 放置 Google AdSense 自訂廣告尺寸大小_007
新尺寸多媒體廣告



「640x300」多媒體廣告 ( 2015/09/05 補充 )
Blogger 放置 Google AdSense 自訂廣告尺寸大小_008
新尺寸多媒體廣告




設置流程

  1. 小工具安裝
  2. 安裝在文章中
  3. 加入 Adsense 異步腳本 js

設置前準備

如果需將廣告安裝於文章中,若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設置教學

Step 1

小工具安裝

將以下代碼中的「ad-client、ad-slot」做更換,並黏貼於小工具中廣告即可置中呈現;『width 為寬、height 為高』可依自己的版型做調整。


<div class="ads" style="width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;">
<ins class="adsbygoogle"
     style="display:inline-block;width:640px;height:300px;"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>



Step 2

安裝在文章中

若需安裝在文章中,可以試著搜尋範本中的『<data:post.body/>』,整個 Blogger 範本若沒更動過大致會有三處;第一個為行動模板、第二個為電腦版模板文章以外的頁面包含「靜態頁 (/p/xxx.html)、首頁、存檔頁(/2015/03/xxx.html) . . .」、第三個為電腦版模板文章頁。

將「STEP 1」代碼經由「這裡」轉換,黏貼在第三個『<data:post.body/>』的上方廣告則會出現在文章上方,黏貼在下方則廣告會出現在文章的下方。

如果你的 HTML 範本中只有兩個『<data:post.body/>』,那就將代碼黏貼在第二個『<data:post.body/>』上方或下方



Step 3

加入 Adsense 異步腳本 js

接著在『</body>』之前放入下列 Adsense 異步腳本 js,就完成設定了。

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



小結

廣告寬度定在「640px」是因為目前網站圖片寬度皆為「640px ( 除了手機文章之外 )」,這樣的配置讓整體畫面較為一致,若以後有推播「寬 640」的矩形多媒體廣告,那就不用再改了。



相關文章

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

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

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

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



分享

共有 2 則留言

留言迴響
Wayne Fu
管理員
9/18/2015 9:33 AM ×

感謝提供測試心得,原來 640x300 還能出現這麼多種形式,只不過我怎麼 reload,多半看到 336x280 圖片廣告跟 640 x300 的文字廣告~~可能我 reload 的次數還不夠多 XD

回覆
avatar
coke tech
管理員
9/18/2015 6:25 PM ×

360x300 也蠻多的,435x300 及 640x300 多媒體,這兩個沒記錯應該是在近假日的時候會推送,可能跟時間點有關係!

航海王的 640x165,可能是因為常在 Youtube 上聽航海王音樂,所以在測試時,才常推播到網站中。

對了,一開始,真的!大部份只推文字形態的廣告!放久後,在不一樣的時間點多試幾次,應該就能看到不同結果 :)

回覆
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 *