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

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

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

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






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

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

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

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





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

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

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





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





廣告位置顯示效果









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

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

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





廣告位置顯示效果





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


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


返回目錄 → ( 部落格 Blog 修改 ) 之相關文章,連結總整理


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

視頻解說之第一部分 https://www.youtube.com/watch?v=NW5kH3g8O0g

謝謝大家,抽空觀看,files備份檔名 unclassified01015

Insert the ad code at the beginning and end of the blogspot article

發表留言

秘密留言

點入後,可購買的產品

 

 

 

 

 

 

搜尋欄
PTC 點賺