Google AdSense Inside The PostⅡ

稍早之前我在Google AdSense Inside The Post中已提過如何將Google AdSense放入文章之中，但是AdSense和文章之間總是會有一片空白的地方，如果想要讓Google AdSense和文章緊密的結合在一起，能夠辦得到嗎？答案是肯定的。

之前我是將Google AdSense的程式碼放在“post-header-line-1”這個DIV區塊中，這個Div區塊的下方，你會發現另一個Div區塊–<div class='post-body'>，再往下可以看到“<p><data:post.body/></p>”這一行，根據Blogger Help–版面配置資料標記的說明，可以知道post.body所顯示的是文章的內容，於是我便開始試驗將Google AdSense移到<div class='post-body'>這個區塊裡面的結果。

首先我把Google AdSense的程式碼放在“<p><data:post.body/></p>”這一行的前方，但是所得到的結果和之前的方法一樣，如下圖：


接下來我將Google AdSense的程式碼移到“<p>”和“<data:post.body/></p>”之間，但是AdSense和文章雖有結合，但卻不是我想要的結果，如下圖：


於是我在範本新增一個CSS的class，內容如下：
.ad {
float:left;
}
這個樣式主要是要讓「標籤元素向左靠，文字圍繞在右邊」，再將Google AdSense以一個Div包起來，並將這個Div的class指定為新增的這個樣式，如下：
<div class='ad'>
（Google AdSense 程式碼）
</div>
這樣所呈現出來的就是我想要的結果，如下圖：


如你所見，Google AdSense和文章完美的結合在一起了。

• 這裡只有簡單寫出Google AdSense程式碼所放置的位置，一些需要修改的地方不再重述，請參考Google AdSense Inside The Post。
  
• 這個方法比較適用於正方形的的Content，儘量不要用橫幅的Content。

Google AdSense Inside The Post

據我所知，Blogger在文章內是不能加入JaveScript的，正因如此，也就不能直接將Googld AdSense的程式碼放在文章內，因此只能透過修改範本方法來達成，所以首先就找出想放置AdSense的Div區塊代碼，我利用FireFox附加元件–Web Developer找到文章內容上方有一個“post-header-line-1”的Div區塊可以利用，這個Div正好位於文章內容的正上方，如下圖：



但是Google AdSense的計劃政策有規定，同一個網頁最多只能顯示三個廣告組和一個連結組，要避免違反這個規定，就必須設為首頁不顯示，而根據Blogger Help–版面配置的小裝置標記的說明，用<b:if cond='condition'> 可以做到，至於詳細做法如下：

1. 先在範本中找到<div class='post-header-line-1'/>


2. 到Google AdSense產生你所想加入的AdSnese程式碼，通常產生的程式碼如下：
   <script type='text/javascript'><!--
Google AdSense Code
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
   紅字部份依設定而有所不同，另外還需將藍色部份稍做修改，將<以＆ｌｔ；（因半形會被另外解讀，故以全形取代）取代，將>以＆ｇｔ；（因半形會被另外解讀，故以全形取代）取代，代碼轉換可以到這裡所介紹的網站進行


3. 因為不想在顯示放在文章內的AdSense，所以必須將AdSense的程式碼以<b:if cond='data:blog.pageType == "item"'>和</b:if>包起


4. 完整的Code大至如下所示：
   <div class='post-header-line-1'/>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'><!--
Google AdSense Code
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
</b:if>
   藍色部份記得要依照步驟2進行修改
   
5. 完成後所呈現的結果如下圖：