2009年12月18日 星期五

善用版面空間做AdSense廣告配置


網站的編排通常會以有限的空間作最有效的利用為原則,當然適當的留白也是很重要,但如果你的部落格不是以設計為主,而是一般的部落格而且有放Google AdSense時,這時留白的空間就可以利用網站CSS編排設計,來適當運用這些空間了。

通常我們會在本文的下方或是上方放入Google AdSense的廣告,這時你會發現右手邊空了一大塊,這時我們就可以妥善的運用這塊地方,放入你想配置的單元。

通常找到#main-wrapper { 就可以知道你的本文寬度為多少,以本站來說width: 600px;
而一般的AdSense通常我們會放大矩形336*280或中矩形300*250,當然還有小矩形250*250,在AdSense 支援中心裡有說明,我應該使用哪種廣告格式?
我們發現最有效的廣告格式為:336x280 大矩形、300x250 中矩形以及 160x600 寬幅摩天大廣告。

所以以綸太郎的部落格而言,最多可以擠到兩個300*250的廣告,不過並非放滿三個廣告收益就會越大,所以我選擇了放一個大矩形廣告搭配上隨機文章,作為單篇文章下方的廣告單元,不過一直以來都覺得樣式很醜,


今天研究了一下,也跟大家分享怎樣利用CSS編排,來設計一個適合你自己版面的廣告單元,當然不放廣告也可以,你可以放相關文章或是和社會書籤搭配都可以,就看你自己的運用。

先來說明概念,這個廣告單元就如以下面的圖片所示


將一個大單元裡面,劃分成兩個小單元,一個是廣告,一個是隨機文章
整個大單元我們以 .post-extra定義
廣告我們以.post-ads
隨機文章我們以 .post-random
這些定義名稱,你可以自行定義,看得懂即可。
以下是綸太郎定義的相關CSS語法,我的語法配置都是以我自己的模板做範本,如果你要設定,請修改成你自己要用的語法,因為每個人的模板大小、位置都不同。

/* Post-Extra廣告配置及隨機文章單元*/
.post-extra {
width:580px;
height:300px;
background: url(圖片網址) no-repeat 5px;
margin-top: 5px;
}
.post-ads {
float:left;
width:340px;
height:290px;
overflow:hidden;
padding-top: 5px;
}
.post-random {
float:right;
width:230px;
height:270px;
overflow:hidden;
}
.post-random a {
color: #B6EBEB;
}
.post-random ul{
padding:0 5px 0 0;
margin: 30px 0 0 0;
list-style:inside;
}

大單元(.post-extra)的背景圖我以580*300的背景圖為主,


因為我的背景顏色為白色,而且我不想要讓Google AdSense的背景有顏色,然後在隨機文章的背景區位有個藍色的背景圖,到時候我只要調整隨機文章出現的文字區域就能和背景圖相配合。

記得如果你有使用背景圖,相關的高度及寬度一定要標示出來,例如
.post-extra {
width:580px;
height:300px;
如果高度(height:300px;)沒有標示,圖片會顯示部份而已。

廣告(.post-ads) 和隨機文章(.post-random),
這兩者很重要,一定要設定一邊在左 float:left; 一邊在右 float:left;
還有兩者加起來的寬度width:340px;+width:230px;要小於總寬度(.post-extra)width:580px;,記得有padding及margin都要算進去,然後超出的部分我們不顯示overflow:hidden;。

至於語法裡的
.post-random a {
這是設定隨機文章連結的顏色,因為原先是藍色,那搭配背景又是藍色,一定沒法明顯顯示,所以就多加了上面這個定義,將超連結的顏色設定為淺藍色,加強顯示。

另外.post-random ul{
這是項目單元(ul)的設定,因為如果沒有設定的話,在IE7和Firefox的顯示是不同的,在IE7看不到項目符號●
所以多加了這一個定義,每個人的模板不同,不一定你的不用加就可以顯示了,再則因為我設計的圖片已經有"隨機文章"的字樣,所以margin: 30px 0 0 0;要設定與上方相距30px。

當然Css設定完成就是要更改Html的配置了,先前我們都有提到要使某單元出現你要的css效果,就是以div將他圈住套用,當然這裡也是一樣的,我們找廣告單元,通常搜尋"pub-"這四個字即可,就能找到你的AdSense語法出現的地方,不過我想應該大家都會找,因為也是自己放進去的,但如果你是利用後台的網頁元素小工具新增廣告,這篇就不適用了。

原始模板記得備份,進入後台,版面配置→修改Html→勾選"展開小裝置範本" ,找到AdSense 單元
然後用div將相關語法給套住即可,
<b:if cond='data:blog.pageType == &quot;item&quot;'><br/>
<div class='post-extra'>
<div class='post-ads'>
336x280 Google AdSense廣告語法
</div>
<div class='post-random'>
隨機文章語法
</div>
</div>
</b:if>
<div style='clear:both;'/>

你可以看到紅色的div套住了綠色及深藍色的div區塊,這就是我們要達到的效果,前後再用
這個<b:if cond='data:blog.pageType == &quot;item&quot;'> 和</b:if>套住,之前我們已經在幫自己設計個版權所有的小方塊單元說明過,是讓這個單元在首頁不出現,單篇文章才出現的語法,所以記得你的div class是要放在這個語法下面,至於<div style='clear:both;'/>這是要清除格式的語法,這樣你就可以有個像綸太郎一樣的廣告單元配置了。


其實這個效果也是可以用表格(Table)做出來的,但較常利用在邊欄的小工具上,就是設計一個表格裡面放入兩個元件,如果想做的朋友也可以利用"Google文件",自己設計也是可以的,簡單的也是可以利用,但還是建議用css作這樣類似表格配置的處理,一來變更較容易,再來程式碼也較少,網頁載入負擔較輕。

初學者建議還是了解相關的配置再來玩這一部份,有空可以看看"新手推薦閱讀"單元,不然你會有一堆問題等著解決,常有朋友說看了文章還是不了解,因為我想大家都看了自己想看的那一篇,但是前後的相關知識或是資訊還未學習完成,其實大部分我的文章都有提到,Google Blogger官方的說明---Blogger 說明,也很多參考資料,只要你有耐心慢慢看,善用Google搜尋來慢慢學習,我想總會融會貫通的,早晚可以打通你的任督二脈的,擁有一個你自己親手打造的部落格。

4 則留言:

  1. 謝謝你的用心解說與不吝分享,
    受益良多^^

    回覆刪除
  2. 在這裡找到「將廣告置於標頭右側」的文章,
    不過那好像只適用於舊版的blogger。

    最近因為自己的blog放了廣告,想要那麼做,可是一直搜尋不到可用的文章,
    能否請您提供搜尋關鍵字或者給些提點呢?謝謝!

    回覆刪除
  3. 新版的廣告配置目前沒有研究。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能