v 善用版面空間做AdSense廣告配置 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...