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 範本為自適應版型，也可以參考「自適應網站安裝 AdSense 回應式廣告，三分鐘搞定」做更靈活的響應式廣告配置應用。

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

「336x280、300x250、360x300」

一般矩形廣告

「435x300」

新尺寸多媒體廣告

「640x300、640x190」文字廣告

( 依設置的寬度而定，寬版文字廣告 )

「640x300」列表橫式文字廣告

 ( 依設置的寬度而定，列表式文字廣告，樣式一)

「640x300」列表直式文字廣告

 ( 依設置的寬度而定，列表式文字廣告，樣式二)

「640x165」多媒體廣告 ( 2015/09/01 補充 )

新尺寸多媒體廣告

「640x300」多媒體廣告 ( 2015/09/05 補充 )

新尺寸多媒體廣告

設置流程

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 廣告