2016年5月6日

Blogger 隨機文章 V2 + 輪播效果

A+
前陣子介紹完最熱門的 jQuery 輪播外掛「Owl Carousel」,聯想到部落格文章結束處,經常會配置的 "推薦文章" 工具,例如「相關文章」,如果搭配輪播功能的話,應該會有不錯的效果。

要進行輪播之前,得先隨機抽出足夠的樣本數,而 "相關文章" 的樣本母體來自於相同標籤的文章,數量有時會不夠,因此本篇選擇將輪播功能,搭配同樣適合放在文末的「隨機文章」,這樣子抽樣母體比較大(整個網站的文章數)。

同時 "隨機文章" 加了新的版本號 V2,版面、樣式上也做了一些改變,以下先介紹改版的特點,想直接安裝請跳至「二、安裝 jQuery 及 CSS」




一、隨機文章 V2 介紹


可參照 DEMO 網頁的效果,V1 的特點大致有這些:

  • 可抽樣網站所有文章,超過 500 篇也可處理
  • 自適應螢幕寬度
  • 可自訂縮圖長寬比例,縮圖會自動調整寬度
  • 排除特定標籤字串的文章不顯示


這個版本 V2 新增的特點如下:

  • 文章標題放在圖片底部,版面設計比較美觀
  • 可自訂輪播文章總數、及顯示的文章數
  • 可手動切換上下篇輪播文章
  • 可用滑鼠拖曳輪播文章
  • 可設定是否自動輪播
  • 可設定輪播的間隔時間
  • 可無限輪播,不會有捲到頭、尾之後卡住的現象



二、安裝 jQuery 及 CSS


如安裝過舊版隨機文章,請完整移除所有程式碼。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*隨機文章V2*/
.rndPost2_caption {
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-align: left;
margin: 10px 0;
}
#rndPost2_main {
position: relative;
margin: auto;
}
#rndPost2_main,
#rndPost2_main *,
.rndPost2_left,
.rndPost2_right {
box-sizing: border-box;
}
.rndPost2_left {
float: left;
}
.rndPost2_right {
float: right;
}
.rndPost2_left,
.rndPost2_right {
width: 35px;
margin: 0;
padding: 5px;
text-align: center;
cursor: pointer;
opacity: .6;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}
.rndPost2_left:hover,
.rndPost2_right:hover {
opacity: 1;
}
.rndPost2_left img,
.rndPost2_right img {
width: 25px;
}
.rndPost2_post {
display: inline-block;
padding: 5px;
font-size: 12px;
}
.rndPost2_post a {
display: block;
position: relative;
opacity: .8;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}
.rndPost2_post a:hover {
opacity: 1;
}
.rndPost2_post img {
display: block;
max-width: 100%;
padding: 5px;
background: #FFF;
webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
}
.rndPost2_title {
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
padding: 5px;
z-index: 5;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

第一行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

其餘的部分,如果對 CSS 熟悉可自行修改參數



三、安裝程式碼


接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

F:設定全部要輪播的文章數量

G:設定一次顯示的文章數量

H~I:設定縮圖的長寬比例,若要使用正方形的話,請將 H、I 行的數字改為 1 即可。

J:若不要自動輪播功能,請將參數改為 false

K:設定每幾秒切換一次輪播效果

L:可自訂顯示的大標題字串

M:橘色字串請改為自訂的「無縮圖替代圖片網址」

N~O:橘色字串可改為自訂的「左右箭頭圖示網址」

P:如果不需要排除特定標籤的文章(整個網站的文章都想顯示),請刪除括號內的字串,留下括號 [] 即可。預設的字串以本站來舉例,代表所有樹狀標籤中包含 "站務" 字串的標籤文章、以及所有包含 "休閒" 字串的標籤文章,都不會出現在隨機文章中。

Q:此工具預設會出現在留言區塊之前。如果要擺到到別的位置,請將字串改為 "." + class 名、或是 "#" + id 名稱。


儲存後即可看到效果,也可前往範例網頁觀看:




四、常見 FAQ


日後若有常見問題,會持續補充在此。

Q1: 有些文章無法顯示縮圖?

Ans: Blogger 的縮圖功能,需要使用 PICASA 圖床(G+ 相簿)才能自動產生,因此使用其他圖床的話,這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」,在 Blogger 後台上傳圖片,放在文章最前面的位置,就一定能顯示縮圖了。


Q2: 小工具使用後無效果,只有顯示隨機文章推薦?

Ans: 這是留言 #2 遇到的狀況,因為使用了較舊的 jQuery 版本,將版本改為 2.0.0 後就可正常執行了。


Q3: 小工具安裝後無效果?

Ans: 請參考本文提到的「引用 jQuery 的注意事項」,檢查 jQuery 是否安裝多次,並參考是否有 Q2 的狀況。


更多實用工具:

13 則留言:

  1. 不知道為什麼縮圖顯示都小小的(我的圖床是flickr),抓不到圖的文章所連結圖片大小就剛好...y怎麼會這樣呢...能幫我解惑嗎??

    回覆刪除
    回覆
    1. 我的部落格: http://nk61011.blogspot.tw/

      刪除
    2. 「四、常見 FAQ」→「Q1」有說明喔~

      刪除
  2. 使用後無效果
    只有顯示隨機文章推薦 :
    https://jimchangmaster.blogspot.tw/2016/07/1.html

    回覆刪除
    回覆
    1. 看了你的網頁,jQuery 不知為何報錯,也許你先把 1.8.2 版改成 2.0.0 版試試看。

      如果還不行的話,先刪除所有其他外掛,只留隨機文章 V2,再一一加回其他外掛,可找出是跟哪個外掛衝突。

      刪除
    2. 改成2.0.0版後,就正常了,真是太感謝了!

      刪除
    3. 謝謝回報,我補充到「常見 FAQ」~ :)

      刪除
  3. 你好,我安裝程式碼後好像沒有效果,就好像沒有安裝過的,請問為什麼??
    http://dse00.blogspot.hk/2016/05/vs.html
    感謝^_^

    回覆刪除
    回覆
    1. 已將你的狀況整理到「四、常見 FAQ」→ Q3

      刪除
  4. 請問一下如何讓這個輪播一直顯示,而不是點入文章後才看的到。剛接觸Blogger,我是套用網路找到的範本,標頭沒有辦法增加小工具(如:標頭 Banner 隨機輪播熱門文章)

    回覆刪除
    回覆
    1. 不好意思,補充一下。或者是相反,可以讓輪播在首頁顯示,點入文章就看不到
      http://www.a2ntw.tk/

      刪除
    2. 1. 請見留言注意事項,由於你使用了非官方範本,標頭不能增加小工具這件事,無法經由目前這個管道解決喔

      2. 可搜尋本站有關 Blogger 判斷式的文章,就可瞭解如何限定特定頁面才執行小工具。

      刪除
    3. 太感謝了!從您的Blogger 判斷式的文章,修改成我想要的方式了

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。