教學 | JavaScript 文章底部置入自訂區塊 / 廣告

01

有些部落格會在文章結尾處置入廣告或是FB連結以增加點閱率,最直覺的方法是撰寫完章時在最底部加入語法或連結,這樣的方法雖然容易,但之後的維護和管理卻很麻煩,一旦要變更文字或圖樣時,所有文章都要修改,想到就頭大。這篇教學是利用JavaScript在文章底部插入自訂區塊,隨時可以變更自訂區塊內容,非常簡單實用,快來學學吧!


02

有注意到本部落格裡每篇文章的底部﹝留言區上方﹞都有部落格的介紹嗎?如上圖,注意上方是圖不可點擊,要看範例可以先拉到本篇文章底部。教學共分成兩個範例,一個是文章底部置入自訂區塊,另一個是延伸範例。

* 文章底部置入自訂區塊 / 廣告

該效果由HTML與JavaScript兩種語言組成,複製全部放在同一個地方,支援置放語法的地方有後台的”側欄版位”、”公告區塊”、”頁尾描述”,建議新增一個側欄版位放入,才不會忘記這段語法是甚麼功能。

<! – – HTML – ->

<div id=”my_article_footer” style=”display:none;”>

    <div id=”my_article_footer_inner”>

        I ♥ Dribs & Drabs

    </div>

</div>

<! – – JavaScript – ->

<script type=”text/javascript”>

    var ARTICLE_MAIN = document.getElementById(“article-main”);

    if(ARTICLE_MAIN){  // 只有在文章模式才會顯示,若希望首頁模式與分類模式顯示,請把這個 if 判斷式拿掉

        var ARTICLE = document.getElementById(“article-box”);  // 找到文章區塊

        // 把上方的自訂區塊加至文章區塊後方

        ARTICLE.innerHTML = ARTICLE.innerHTML + document.getElementById(“my_article_footer”).innerHTML;

    }

</script>

套用後可以到文章底部看看是否有效果,應該會出現 I ♥ Dribs & Drabs 的字樣,表示成功囉!接下來就是修改自訂區塊的內容,請把HTML語法裡的 I ♥ Dribs & Drabs ﹝標紅色字體的地方﹞取代成要顯示的內容,如果是要放廣告的話,把廣告的語法置入就可以囉,非常簡單吧!這個效果應用很廣,不只文章底部,只要抓對位置部落格任何一個地方都可以加入自訂區塊,也可以試試看其它地方喔!

註1 – 這個效果只會現在文章模式﹝須點進文章裡﹞,若想要首頁模式與分類模式都出現,請把JavaScript的if判斷式拿掉。

註2 – 本部落格的自介區塊是撰寫HTML達到,若對HTML不熟可以利用撰寫網頁的軟體來輔助。

註3 – 要對自訂區塊設定CSS請在這裡設定 #my_article_footer_inner{…},非 #my_article_footer{…} 。

註4 – 語法可套用至非痞客邦部落格,需自行修改JavaScript裡的抓取的文章區塊標籤。

* 延伸應用

像本站有分享部落格樣式N個,在每個分享文章裡都有一段使用規定,有時候規則是需要更改的,一旦更改規則就需要改N篇文章,若分享數量一多也是非常令人頭痛。這個延伸應用是將規則的部分獨立出來,以後想改規則只要修改這段語法,所有文章就會一起變動,再也不用煩惱要花費許多時間一一修改,實在是太棒了!範例:這分類裡的每一篇文章的使用規定。

以下語法跟上一個範例一樣,複製全部放在同一個地方,可放的地方有後台的”側欄版位”、”公告區塊”、”頁尾描述”,建議新增一個側欄版位放入,才不會忘記這段語法是甚麼功能。

<! – – HTML – ->

<div id=”rule_blog_template_” style=”display:none;”>

    <p>Dribs & Drabs 套用分享樣式使用規則 1</p>

    <p>Dribs & Drabs 套用分享樣式使用規則 2</p>

</div>

<! – – JavaScript – ->

<script type=”text/javascript”>

    var RULES = document.getElementById(“rule_blog_template”);

    if(RULES){

        RULES.innerHTML = document.getElementById(“rule_blog_template_”).innerHTML+RULES.innerHTML;

    }

</script>

此延伸應用比上個範例多一步驟,須在文章中預顯示的地方加入以下HTML語法,要切換至HTML模式再貼上,完成後就到前台看結果吧!之後要修改規則只須修改上面的HTML,所有文章就會統一更新囉,超級方便!

<div id=”rule_blog_template”>&nbsp;</div>

* Murmur

是不是覺得部落格官方提供的架構不符合你的需求?可利用這篇的方法來改變部落格架構,怎麼改就看你的創意囉!相信聰明的大家一定會想到比我更棒的點子 ♥

 

♥ 部落格樣式 – 實用教學: https://www.dribs-drabs.com/blog/category/1358731