Photo


I'm Wei

Traveler / Photographer / Designer

旅行除了美麗的風景,最重要的是途中發生的點點滴滴,唯有照片與文字的交織,才能讓美麗的回憶不朽。這本部落格是份珍貴的禮物,獻給多年後的自己,有那麼一天,曬著午後慵懶的日光,溫習當年青春的味道。部落格取名為 Dribs & Dribs,為 "點點滴滴" 之意。

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

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

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

 

♥ 部落格樣式 - 實用教學: http://weilife.pixnet.net/blog/category/1358731

, , , , ,
創作者介紹

Dribs & Drabs 點點 滴滴

Dribs & Drabs 發表在 痞客邦 PIXNET 留言(26) 人氣()


留言列表 (26)

發表留言
  • Yusen
  • 謝謝分享,這是一個很實用的教學OuO
  • :D

    Dribs & Drabs 於 2015/02/04 08:24 回覆

  • 悄悄話
  • 貓科類Tiger♥
  • 想問一下我的側欄1.2都會一直跑來跑去><
    常常跑到中間或側欄1跟著側欄2跑 是哪裡有問題嗎??
    謝謝你^^
  • 你應該有動到語法喔,要不要重新套用?

    Dribs & Drabs 於 2015/02/13 17:14 回覆

  • 悄悄話
  • 悄悄話
  • 周小龍
  • 傷腦筋
    偶都有看 木有懂 >"<
  • 可以先去學一下基礎的HTML跟JavaScript,會比較好上手 :)

    Dribs & Drabs 於 2015/08/09 08:40 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 大貓
  • 我並不是很懂javascript 在網路google後把文章中
    「 var ARTICLE = document.getElementById("article-box"); 」 部分改成

    「 var ARTICLE = document.getElementByClassName("article-body"); 」 就顯示不出來
    如果要顯示出來要如何改
  • 關於截取class可以參考這篇教學
    http://weilife.pixnet.net/blog/post/440822236

    Dribs & Drabs 於 2015/12/10 09:10 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • HoneyAlice
  • 想請問一下撰寫HTML的部分,請問要怎麼套用? 找了很多網站可是都說得很不清楚,可以請問您是怎麼修改痞客的html嗎?
  • 這篇教學就是在做這件事,抓取原本HTML裡面的某個區塊,然後把事先撰寫的HTML語法插入該區塊中

    Dribs & Drabs 於 2016/12/11 17:14 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 涵兒
  • 我有套用您的樣式,那剛試了一下發現延伸應用放在頁尾,就會把您的版權遮住
    放公告卻無法出現任何東西,看來只能放側欄呢~
    再次謝謝分享~
  • 原來是這樣啊~我試試看哪邊有問題喔,謝謝你的回報 :)

    Dribs & Drabs 於 2017/04/24 20:42 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話