善用版面空間做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搜尋來慢慢學習，我想總會融會貫通的，早晚可以打通你的任督二脈的，擁有一個你自己親手打造的部落格。