2008年8月31日 星期日

Blogger template模板教學課程---如何修改有廣告的模板


綸太郎以實例來教各位如何修改模板,其實這是針對想要放廣告欄位(Ads)或是多重欄位的較複雜性的模板來說明,因為很多時候簡單的模板只要套用,最多改個標題圖片或是寬度就可完成了,但是想要一個功能性模版,有礙於裡面有廣告自己不會刪,怎麼辦呢?

我以目前很流行的PassionDuo模版來說明,有三個地方有廣告:
PassionDuo Blue, Red & Green Templates
1、標頭右邊有個468*60的廣告
2、文章最上方也有468*60的廣告
3、邊欄右手邊有6個125*125的方形廣告
下方還有個搜尋框

通常設計者在設計時都會以 <!--說明文字 --> 來註解,這部份並不會顯示在網頁上,只是做參考用的,以這個模版他就有寫出來,
<!-- Replace with your ads --> 告訴你可以置換這個廣告,如果我們對英文說明不是很了解,你可以下載模版後,滑鼠放在某個廣告上,然後按右鍵在圖片廣告上,選擇屬性(FF)或是內容(IE),知道這張圖片的網址或是連結的url位置,然後複製下來,


比如有一個廣告的位置是指向http://www.linkworth.com/?a=10230
然後我們進入後台,版面配置→修改html→展開小裝置範本,找尋這串文字,就可以找到他的位置,再將你想指向的圖片及網址置換上去,或是直接將此段語法刪除,但要記得,上次我們有提到每個區塊都會以div框住,所以如果你要直接刪除的話,就要把<div>到</div>這段語法都刪除。


以這個模版來說右邊廣告125*125圖片區,這段的語法就是在<div class="ads-sidebar">到</div>這部份,你可以加入你自己的圖案廣告(例如Bloggerads125*125的廣告)或是連結,語法如下
<a href="要指向的網址"><img src="圖片網址" /></a>
當然這段語法在上方CSS,也是有定義的,在這行及下方
.ads-sidebar{float:left; margin:0pt; padding:0pt}
通常如果你要整個區塊刪除,建議連CSS定義也可以刪除,因為用不到,也可簡化檔案,但初學者不太熟悉語法者,保留也無所謂,免得刪錯了。

但如果是放Google AdSense呢?沒有圖片網址,沒關係,AdSense的程式碼變數都一樣,你就找到google_ad這段文字即可,一樣把它換成你的廣告程式碼或是整個刪除,若是要換程式碼,記得 <>都要改成&lt;及&gt;,但綸太郎建議還是用新增小工具html程式碼,放AdSense廣告較好,修改置換廣告也比較方便,不用修改原始程式碼,當然這區塊你也可以加上你想加的圖片連結或是其他元素。
所以這樣是不是很簡單,刪除廣告,也能自行加入自己想要的連結圖片,其實沒有很困難的,有時你也可以看看是不是有隱藏的廣告放在你的模版裡,通常用ads三個英文字做搜尋或是查看html有沒有可疑的網址連結,就可以察覺了。

最下方有個Search搜尋框,通常有裝Google AdSense的格主會刪除,使用自己的AdSense Search搜尋框,如果不想使用模版設計的,用”search”為關鍵字尋找,記得前後不能有空格,找到html語法裡有相關的,例如這裡的就是<div class="search">也是把這段區塊語法刪除即可,不過綸太郎還是建議以新增小工具的方式來新增Search Box,而不是直接加在語法裡。

這個模版還蠻實用的,有導覽條,通常CSS裡會定義為Menu或是Tabs,在這裡是定義為TopMenu,如果你想像綸太郎的部落格有分頁導覽,你可以使用這個模版,直接在網頁元素裡的Top Tabs加入你的網址即可。

如果覺得這個模版適合你的需求,可以到
PassionDuo Blue, Red & Green Templates下載,有藍色、紅色及綠色三款。

4 則留言:

  1. 以這個模板來說,Search Bar也是廣告嗎?

    回覆刪除
  2. 一般模版的search bar應該沒有廣告,這部分我沒有深入研究,只是以我的習慣會換上我自己有廣告的搜尋列。

    回覆刪除
  3. 最上面的banner在哪里修改呢

    回覆刪除
  4. 找到這個 #header-inner或是#header-wrapper{
    這兩個應該都可以改

    回覆刪除

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