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。

沒有留言:

張貼留言