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


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


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

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

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

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