2007年4月2日

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>

    紅字部份依設定而有所不同,另外還需將藍色部份稍做修改,將<以&lt;(因半形會被另外解讀,故以全形取代)取代,將>以&gt;(因半形會被另外解讀,故以全形取代)取代,代碼轉換可以到這裡所介紹的網站進行

  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. 完成後所呈現的結果如下圖: