2015年2月17日 星期二

blogspot 如何在文章的頭尾,插入廣告代碼 Part 1

原則上,版面配置的上下組件位置,用自訂義的html/javascript,就可以辦到,但如果要稍微準確一點的,將廣告顯示在文章的頭部,或文章的尾部,也就是留言的上方,那麼就要在範本的HTML代碼,找對應位置插入,此篇算是解說文章上下插入點,有需要的人,可參考看看。

BloggerAds申請,並不算難,參考右邊那篇 → BloggerAds 廣告聯播 使用解說

打個比方 BloggerAds 直式的三格廣告,一般是放在右側或左側的組件欄,它還有一種橫幅式的廣告,就可以插入到文章頭或文章尾,請留意一下,一個頁面,只限同時存在,一個直式廣告及一個橫式廣告。

避免文章,拖泥帶水落落長,範本之html代碼框,copy至notepad++,於修改後,在反向在貼回範本之html代碼框內,這些步驟,請參考blogger之blogspot 首頁及標籤不顯示文章下方物件欄blogger之blogspot 去掉頭尾空白 提升範本執行速度,此2篇之圖文加視頻解說。

Ⅰ、將廣告顯示在文章頭部之修改:

將範本之html代碼框,copy至notepad++文字編輯軟體後,查找下述字串:

<!-- posts -->注意一下,可查找到2個,

<b:if cond='!data:mobile'>這串下方的才是



然後在<!-- posts -->上方,貼上你的廣告代碼

由於會和下方黏太近,所以代碼前後,加上p標籤,及style的置中代碼text-align:center;,當然也可加上br標籤,或用div標籤配style來,設置上下間距

另外,範本之html代碼框,用來框值的部份,都是單引號,如果是雙引號,可試這改成單引號



反向在貼回範本之html代碼框內,儲存範本



廣告位置顯示效果



Ⅱ、當然你不想,將廣告顯示在文章頭部,或是你又有google ads,想將一部份的廣告,顯示在文章尾部,也可參考下述,如何將廣告顯示在文章尾部,留言上處之修改:

其實這部份,比較麻煩,有許多位置可以插入,而且又有loop迴圈的問題,頗為煩人,只能舉些例子,給大家參考及運用。

同上,於<!-- posts -->下方那串代碼<div class='blog-posts hfeed'>的</div>結尾標籤,上方插入廣告代碼,notepad++有紅線,容易找到結尾標籤



廣告位置顯示效果



上圖的位置也行,但理想是能在文章結尾處,留言的上方顯示廣告

後續文章,請參考 → blogspot 如何在文章的頭尾,插入廣告代碼 Part 2



對上述圖文教學,還不太明白的話,請至下方連結,查看youtube視頻解說。

此篇教學之youtube視頻解說:https://www.youtu.be/vzI65pD562E


謝謝大家,抽空觀看,files備份檔名:blogspotguides 008a

沒有留言:

張貼留言