2013年11月13日星期三

小貼士21:自訂相關文章/Related Post進階版「低難度」

UPDATE 16-11-2013: 新增自訂css,請看語法。
UPDATE 14-11-2013: 新增「縮圖」「多列」顯示,請看語法。

是時候清舊貨(右邊關於我,有一堆“不日上映”文章未寫)。

較早前寫個 小貼士8:相關文章/Related Post「中低難度」,介紹兩個方法做“相關文章”。一個是Linkwithin,隨機式推文,另外一個是從同一標籤中推出最後幾篇。

此BLOG用上Linkwithin,覺得不夠用。

我想自己選擇:
  • 從那一個標籤推文
  • 自訂推出多少篇
  • 自訂標題
  • 自訂位置
最後決定自己寫個簡單的,試用了一個月多,是時候介紹一下。


例:
  1. 表情符號Emoticons 這篇無內容,只是一個簡單關於Emoticons文章列表,將所有「表情符號」標籤的文章列出來。
  2. 2013年11月 沖縄 小總結 一般都會為同一行程放在文章最後。
  3. 小貼士13:加入每頁檢視次數-最後步驟「中難度」 今次將三篇「每頁檢視次數」文章,放在最頂。
  4. 2013年7月 東京北海道 D6-1 登別温泉、千歳アウトレットモール・レラ~完 遇上非常多文,會用多個related posts來分group處理。我將所有行程分為「第X天行程」,逐一列出。


安裝方法:

首先去Dashboard > Layout > add HTML/Javascript,貼上下面Script(請將<之後空格刪除)。最好加在最底,即” 由 Blogger 提供”上面。

< script src='https://googledrive.com/host/0B3A_Ixxw5RrjamhLcjBFM0trRHM/showrelatedposts.min.js'/>< /script>


跟住如果想在文中加入「相關文章」,寫文章時用HTML模式加入(請將<之後空格刪除)。
例(根據以上例子):
  1. < div class="related_posts" label="表情符號" title="表情符號相關文章">< /div>
  2. < div class="related_posts" label="13年11月 沖縄自駕">< /div>
  3. < div class="related_posts" label="Page Views" title="加入每頁檢視次數三步曲" max=3>< /div>
  4. < div class="related_posts" label="201307D06" title="第六天行程">< /div>
如果無錯,div 的部份會轉換成所需文章列表。

語法:

div class=”related_posts”
必須
一定要一樣
label=”你的標籤”
必須
想要顯示的標籤
title=”標題”

標題,如果無填,預設為"相關文章"
max=3

文章數目,預設為50
thumbnails=”1”

顯示縮圖,預設“無”
multi=”1”

multi-column顯示,預設“無”
css=”.col{font-size:70%;width:150px !important;}”

高手用,自訂css。預設“無”


e.g.
< div class="related_posts" label="表情符號" title="表情符號相關文章" thumbnails="1" multi="1">< /div>


< div class="related_posts" label="13年11月 沖縄自駕"  thumbnails="1" multi="1">< /div>


< div class="related_posts" label="201307D05" title="第五天行程" thumbnails=1 multi=1 css=".col{font-size:70%;width:150px!important;}">< /div>
這個將col改小(default width 200px),font-size改小,變一行可放四個cell。

P.S. 答小肥先生問題,可以在Dashboard>Settings>Posts and Comments,將上面div code加入「文章範本 」,以後新文章就自動有related posts。


P.P.S 遲少少可能加多少少option,可選擇顯示Thumbnails相片。已加。

~ 完 ~

22 則留言 :

  1. 嗯,睇嚟唔難搞。反而系記得每编都要先做少少工夫呢part惡搞。。。^。^

    回覆刪除
    回覆
    1. 其實你可以set template,每篇新文都有,如下:

      [IMG]http://i.imgur.com/BURqojh.png[/IMG]

      刪除
    2. 好,訓醒揾個樣版試吓。^°^

      刪除
  2. 這個構想真的非常棒!以前系列文總是一篇一篇處理,滿麻煩的,
    借用您的概念,以後就可以比較方便了~

    回覆刪除
    回覆
    1. Wayne兄的Google+社群威力很大呢。謝謝分享。::cc9021

      刪除
    2. 我還想幫你介紹表情圖案啊~::ee5093
      可是不曉得什麼時候最終版會出來呢?
      還是我介紹這篇「小貼士6:加表情符號 Emoticons / Smiley低難度」就好了?

      另外,右下角浮動列按下表情圖案展開後,似乎不能收合起來~(印象中以前可以收合?)

      刪除
    3. Wayne兄,其實早前重寫整個“表情圖案”+“輸入表”,在這裡測試,已經一個月,差不多可以發佈。

      我想會利用這個假期做完,到時會發佈綜合安裝文章。

      另外click同一個圖示兩次,會收合的。

      刪除
  3. 咦!呢個Related Post進階版幾好喎!得閒搞搞先!::cc9120

    回覆刪除
    回覆
    1. 先用簡單的,再慢慢tune,加縮圖等。

      刪除
  4. 謝謝版主,太棒了!
    不用再一個個手動貼了!

    回覆刪除
    回覆
    1. 你好,我有看過「跪婦阿冠」。:-bd

      好像計劃去沖縄?

      刪除
  5. ::vv4059 天天開心享受美好...晚安啦...甜夢.::uu7123

    回覆刪除
  6. 我想請教下你是怎樣增添熱門文章小工具的? 我好想像你那樣能夠加上, 美觀.實用!

    回覆刪除
  7. 回覆
    1. 已經加了這個“相關文章”程式?

      刪除
  8. 您好,請問一下這個語法在行動版是不是沒有辦法顯示?因為我用行動版測試沒有顯示耶!

    謝謝!

    回覆刪除
    回覆
    1. 上面用“小工具”方式加script,行動版會skip所有小工具。

      如果要在行動版顯示,需要將script直接加進範本內HTML啊。

      刪除
  9. 感謝您的方享 : )
    想要在首頁將分類標籤各放1篇(如這max 變數), 另希望能預覽幾行.
    但今日找了許多template, 沒找著 [網頁在blogspot, template 多是xml, 無法產生這樣的架構?]

    採用您這方法, 可以達成"分類標籤各放1篇",
    但"預覽幾行", 不知版大有沒有建議?

    謝謝

    回覆刪除

如果想傳送私人信息,請用最底「聯絡我」。

如果需要留言通知,請click「通知我 」。