因為社群的盛行，許多部落格漸漸被淘汰，但是個人認為部落格還是有它存在的意義，與社群網路不同的地方，具有多一點的隱密性、版面自由度等，是個完全屬於自己的空間。相較於其他像是痞客邦 Pixnet、隨意窩 Xuite 等，Blogger 的版面能改的部分較多，而且不會強迫放上廣告，最重要的是，Blogger 屬於 Google 公司的產品之一，可以說是全世界最多人用的部落格空間，基本上應該不會在哪天突然告知將要關閉。雖說後台主題的選擇不多，但是網路上搜尋 Blogger Theme 就有許多地方提供免費的版面下載，甚至如果會編輯 CSS，更能依照本身想要的美感設計。
以下分享如何在 Blogger 增加隨機文章的輪播效果，也就是網誌文章的底部會出現的隨機文章推薦，引用自 網路精華實用文章 與 WFU BLOG，由於本人對於網頁設計方面只是興趣，略懂皮毛，所以只能從其他大人的網站學習改面板，因此不提供為各位解答疑難雜症囉 😅。
進入正題。
要進行輪播之前，得先隨機抽出足夠的樣本數，而 "相關文章" 的樣本母體來自於相同標籤的文章，數量有時會不夠，因此本篇選擇將輪播功能，搭配同樣適合放在文末的「隨機文章」，這樣子抽樣母體比較大(整個網站的文章數)。
同時 "隨機文章" 加了新的版本號 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> 這個字串，找到後在此字串的前一行，插入以下程式碼：
<!-- 隨機文章 V2 start -->
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
var rndPost2 = {
totalSlide: 10, // 全部輪播的文章數量
showSlide: 3, // 一次輪播的文章數量
width: 1, // 縮圖寬度比例
height: 0.618, // 縮圖高度比例
autoplay: true, // 是否自動輪播
autoplayTimeout: 3, // 幾秒切換輪播
caption: "隨機文章推薦 :", // 大標題字樣
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw4GjffRLzofsBXKjYmItPN-MwwE0WGUbATuT0GgnG-UWCYedYBx4EsYWxrZFfwT6MoiQVo-R2ouzGHpgbQJPZZGzjjykbmlKqgyIfYFOs_-QPWy5qqmDc4YXZy3q0_vm31YGoJ5GWe5D1/s72-c/wfublog-noimage-square.jpg", //無縮圖的替代圖片
leftArrow: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUUqSo_2HECheEFTBqQcfLiKUVuK-GUY4wBV9PGIzEJw6UVpZSPa-QBZWpDZr23GbT4i-HPBGWryiQVPRDzzIOUZ-2ZAcMuOBn17s-bbkqdleGO_efIw-Xhsbygagb5zhVYcDMMFUId1z/s1600/left-arrow.png", // 左箭頭圖案
rightArrow: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSLWTf5eTc0OZ4wOJu1VjVSKJoMmMpxoODwmq9i9eAStWIcfQzLlJgO-b-MoHpHrTT0rsQEQfjAzsiKqbAgo7l92ytm1GfUlBGBhW8J0tiO4wqbilxmUxyPY_Ax-cqc6_S542-yOwMdl1/s1600/right-arrow.png", // 右箭頭圖案
excludeLabel: ["站務", "休閒"], // 排除的標籤字串
location: ".post-footer-line-3", // 擺放位置
//]]>
postUrl: "<data:blog.canonicalUrl/>"
};
//<![CDATA[
rndPost2.titleSet=[];rndPost2.urlSet=[];rndPost2.picSet=[];rndPost2.showPost=function(){var titleSet=rndPost2.titleSet,urlSet=rndPost2.urlSet,picSet=rndPost2.picSet,showSlide=rndPost2.showSlide,l=rndPost2.urlSet.length,width=rndPost2.width,height=rndPost2.height,arrowWidth=$(".rndPost2_left").outerWidth(),$left=$(".rndPost2_left"),$right=$(".rndPost2_right"),$main=$("#rndPost2_main"),leftArrow=rndPost2.leftArrow,rightArrow=rndPost2.rightArrow,html="",info="",totalWidth,arrowLineheight,eachWidth,eachHeight,host,hostElem,pic,size,i;leftArrow=leftArrow.indexOf("http")>-1?"<img src='"+leftArrow+"'/>":leftArrow;rightArrow=rightArrow.indexOf("http")>-1?"<img src='"+rightArrow+"'/>":rightArrow;totalWidth=$(rndPost2.location).width()-2*arrowWidth;eachWidth=Math.floor(totalWidth/showSlide);eachHeight=Math.round(eachWidth*height/width);size="w"+eachWidth*2+"-h"+eachHeight*2+"-n";for(i=0;i<l;i++){pic=picSet[i].replace("http:","https:").replace("s72-c",size);html+="<div class='rndPost2_post' title='"+titleSet[i]+"'>";html+="<a href='"+urlSet[i]+"' target='_blank'><img src='"+pic+"'/>";html+="<div class='rndPost2_title'>"+titleSet[i]+"</div>";html+="</a></div>"}var _0x8188=["\x32\x3D\x24\x28\x22\x23\x42\x22\x29\x5B\x30\x5D\x3B\x33\x3D\x28\x39\x2E\x62\x29\x3F\x28\x39\x2E\x62\x28\x32\x29\x2E\x65\x3D\x3D\x22\x34\x22\x29\x3F\x30\x3A\x31\x3A\x28\x32\x2E\x38\x26\x26\x33\x2E\x38\x2E\x65\x3D\x3D\x22\x34\x22\x29\x3F\x30\x3A\x31\x3B\x69\x3D\x21\x33\x3F\x22\x3C\x61\x20\x78\x3D\x27\x4C\x3A\x2F\x2F\x51\x2E\x57\x2E\x5A\x2F\x31\x30\x2F\x31\x31\x2F\x6A\x2D\x6B\x2D\x6C\x2D\x6D\x2D\x6F\x2E\x35\x27\x20\x71\x3D\x27\x72\x27\x20\x73\x3D\x27\x74\x2D\x75\x3A\x20\x34\x3B\x20\x76\x3A\x20\x23\x77\x3B\x20\x63\x2D\x79\x3A\x20\x7A\x2C\x20\x41\x2D\x31\x61\x3B\x20\x63\x2D\x43\x3A\x20\x44\x3B\x20\x45\x3A\x20\x46\x3B\x20\x47\x3A\x20\x30\x3B\x20\x48\x2D\x49\x3A\x20\x4A\x3B\x27\x20\x4B\x3D\x27\u96A8\u6A5F\u6587\u7AE0\x20\x64\x20\x2B\x20\u8F2A\u64AD\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x4D\x20\x4E\x27\x3E\u24E6\x20\x4F\x20\x50\x20\x64\x3C\x2F\x61\x3E\x22\x3A\x22\x22\x3B\x24\x36\x2E\x35\x28\x35\x29\x2E\x52\x28\x29\x3B\x24\x36\x2E\x53\x28\x7B\x54\x3A\x55\x2C\x56\x3A\x66\x2C\x58\x3A\x59\x2C\x67\x3A\x68\x2E\x67\x2C\x37\x3A\x68\x2E\x37\x2A\x31\x32\x2C\x31\x33\x3A\x66\x7D\x29\x3B\x24\x36\x2E\x31\x34\x28\x31\x35\x29\x2E\x31\x36\x28\x29\x2E\x31\x37\x28\x22\x2E\x31\x38\x2D\x31\x39\x22\x29\x2E\x70\x28\x69\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x68\x6F\x73\x74\x45\x6C\x65\x6D\x7C\x68\x6F\x73\x74\x7C\x6E\x6F\x6E\x65\x7C\x68\x74\x6D\x6C\x7C\x6D\x61\x69\x6E\x7C\x61\x75\x74\x6F\x70\x6C\x61\x79\x54\x69\x6D\x65\x6F\x75\x74\x7C\x63\x75\x72\x72\x65\x6E\x74\x53\x74\x79\x6C\x65\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x7C\x67\x65\x74\x43\x6F\x6D\x70\x75\x74\x65\x64\x53\x74\x79\x6C\x65\x7C\x66\x6F\x6E\x74\x7C\x56\x32\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x74\x72\x75\x65\x7C\x61\x75\x74\x6F\x70\x6C\x61\x79\x7C\x72\x6E\x64\x50\x6F\x73\x74\x32\x7C\x69\x6E\x66\x6F\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x72\x61\x6E\x64\x6F\x6D\x7C\x70\x6F\x73\x74\x7C\x76\x32\x7C\x7C\x73\x6C\x69\x64\x65\x72\x7C\x70\x72\x65\x70\x65\x6E\x64\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x73\x74\x79\x6C\x65\x7C\x74\x65\x78\x74\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x68\x72\x65\x66\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x41\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x72\x70\x32\x5F\x68\x6F\x73\x74\x7C\x73\x69\x7A\x65\x7C\x31\x31\x70\x78\x7C\x70\x6F\x73\x69\x74\x69\x6F\x6E\x7C\x61\x62\x73\x6F\x6C\x75\x74\x65\x7C\x72\x69\x67\x68\x74\x7C\x6C\x69\x6E\x65\x7C\x68\x65\x69\x67\x68\x74\x7C\x32\x35\x70\x78\x7C\x74\x69\x74\x6C\x65\x7C\x68\x74\x74\x70\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x52\x61\x6E\x64\x6F\x6D\x7C\x50\x6F\x73\x74\x73\x7C\x77\x77\x77\x7C\x68\x69\x64\x65\x7C\x6F\x77\x6C\x43\x61\x72\x6F\x75\x73\x65\x6C\x7C\x69\x74\x65\x6D\x73\x7C\x73\x68\x6F\x77\x53\x6C\x69\x64\x65\x7C\x6C\x6F\x6F\x70\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x6E\x61\x76\x7C\x66\x61\x6C\x73\x65\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x36\x7C\x30\x35\x7C\x31\x30\x30\x30\x7C\x61\x75\x74\x6F\x70\x6C\x61\x79\x48\x6F\x76\x65\x72\x50\x61\x75\x73\x65\x7C\x77\x69\x64\x74\x68\x7C\x74\x6F\x74\x61\x6C\x57\x69\x64\x74\x68\x7C\x73\x68\x6F\x77\x7C\x63\x68\x69\x6C\x64\x72\x65\x6E\x7C\x6F\x77\x6C\x7C\x63\x6F\x6E\x74\x72\x6F\x6C\x73\x7C\x73\x65\x72\x69\x66","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0xac94x1,_0xac94x2,_0xac94x3,_0xac94x4,_0xac94x5,_0xac94x6){_0xac94x5=function(_0xac94x3){return(_0xac94x3<_0xac94x2?_0x8188[4]:_0xac94x5(parseInt(_0xac94x3/_0xac94x2)))+((_0xac94x3=_0xac94x3%_0xac94x2)>35?String[_0x8188[5]](_0xac94x3+29):_0xac94x3.toString(36))};if(!_0x8188[4][_0x8188[6]](/^/,String)){while(_0xac94x3--){_0xac94x6[_0xac94x5(_0xac94x3)]=_0xac94x4[_0xac94x3]||_0xac94x5(_0xac94x3)}_0xac94x4=[function(_0xac94x5){return _0xac94x6[_0xac94x5]}];_0xac94x5=function(){return _0x8188[7]};_0xac94x3=1}while(_0xac94x3--){if(_0xac94x4[_0xac94x3]){_0xac94x1=_0xac94x1[_0x8188[6]](new RegExp(_0x8188[8]+_0xac94x5(_0xac94x3)+_0x8188[8],_0x8188[9]),_0xac94x4[_0xac94x3])}}return _0xac94x1}(_0x8188[0],62,73,_0x8188[3][_0x8188[2]](_0x8188[1]),0,{}));arrowLineheight=eachHeight+10+"px";$left.html(leftArrow).css("line-height",arrowLineheight);$right.html(rightArrow).css("line-height",arrowLineheight);$left.click(function(){$main.trigger("prev.owl.carousel")});$right.click(function(){$main.trigger("next.owl.carousel")})};rndPost2.getPost=function(){var b="/feeds/posts/summary?alt=json-in-script&max-results=0&callback=?",a="";a+="<div class='rndPost2_caption'>"+rndPost2.caption+"</div>";a+="<div class='owl_arrow owl-prev rndPost2_left'></div>";a+="<div class='owl_arrow owl-next rndPost2_right'></div>";a+="<div class='owl-carousel' id='rndPost2_main'>";$(rndPost2.location).append(a);$("#rndPost2_main").html("<span id='rp2_host' class='item-control blog-admin'></span>");$.getJSON(b,function(q){var n=rndPost2.totalSlide,l=parseInt(q.feed.openSearch$totalResults.$t),g=l>n?n:l-1,h=0,c=0,d=rndPost2.excludeLabel,j=[],o=[],p=rndPost2.titleSet,k=rndPost2.urlSet,e=rndPost2.picSet,m=function(){var r=Math.ceil(Math.random()*l),i="/feeds/posts/summary?alt=json-in-script&start-index="+r+"&max-results=1&callback=?";if(j.indexOf(r)>-1){m();return}else{j.push(r)}$.getJSON(i,function(D){var C=D.feed.entry[0],B=C.title.$t,A=C.link,v=d.length,u=/(\/\w\d+(-\w\d.*)*)\/([^\/]+)$/,w,x,z,y,t,s;if(C.category){w=C.category;x=w.length;for(z=0;z<x;z++){for(y=0;y<v;y++){if(w[z].term.search(d[y])>-1){c++;if(l-c==h){rndPost2.showPost()}else{m()}return}}}}x=C.link.length;for(z=0;z<x;z++){if(A[z].rel=="alternate"){t=A[z].href;break}}s=C.media$thumbnail?C.media$thumbnail.url:rndPost2.noImage;if(s.indexOf("youtube")<0&&s.indexOf("flickr")<0){s=s.replace(u,"/s72-c/$3")}if(o.indexOf(r)<0&&t!=rndPost2.postUrl){o.push(r);p.push(B);k.push(t);e.push(s);h++;if(h==g){rndPost2.showPost()}if(l-c==h){rndPost2.showPost()}}else{m()}})},f;for(f=0;f<g;f++){m()}})};rndPost2.init=function(){var a="<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css'></link>";a+="<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.min.css'></link>";$("head").append(a);$.getScript("https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/owl.carousel.min.js",function(){rndPost2.getPost()})};rndPost2.init();
//]]>
</script>
</b:if>
<!-- Designed by WFU BLOG-->
⬇️ 以下參數修改請參照以上程式碼行號：
- totalSlide：設定全部要輪播的文章數量。
- showSlide：設定一次顯示的文章數量。
- width height：設定縮圖的長寬比例，若要使用正方形的話，請將 width height 的數字改為 1 即可。
- autoplay：若不要自動輪播功能，請將參數改為 false。
- autoplayTimeout：設定每幾秒切換一次輪播效果。
- caption：可自訂顯示的大標題字串。
- noImage：橘色字串請改為自訂的「無縮圖替代圖片網址」。
- leftArrow rightArrow：橘色字串可改為自訂的「左右箭頭圖示網址」。
- excludeLabel：如果不需要排除特定標籤的文章(整個網站的文章都想顯示)，請刪除括號內的字串，留下括號 [] 即可。預設的字串以本站來舉例，代表所有樹狀標籤中包含 "站務" 字串的標籤文章、以及所有包含 "休閒" 字串的標籤文章，都不會出現在隨機文章中。
- location：此工具預設會出現在留言區塊之前。如果要擺到到別的位置，請將字串改為 "." + class 名、或是 "#" + id 名稱。
儲存後即可看到效果，也可前往範例網頁觀看：
點此看範例網頁
四、常見 FAQ
日後若有常見問題，會持續補充在此。Q1: 有些文章無法顯示縮圖？
Ans: Blogger 的縮圖功能，需要使用 PICASA 圖床（G+ 相簿）才能自動產生，因此使用其他圖床的話，這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，在 Blogger 後台上傳圖片，放在文章最前面的位置，就一定能顯示縮圖了。
更多實用工具：Blogger hack 及工具整理
留言
張貼留言