本篇 V2 版,除了可算是懶人包,安裝十分簡單,版面也比較有設計感。以下先介紹改版特點,想直接安裝可跳至「二、準備動作」。
(圖片出處: magicmockups.com)
一、改版特點
- 可自訂縮圖比例
- 縮圖寬度會自動符合區塊寬度,有 RWD 效果
- 版面設計為卡片風格
- 無縮圖的文章可使用預設縮圖
- 可使用排行編號效果
這次的改版嘗試使用不同的版面效果,不顯示文章摘要,只顯示縮圖及標題。
如果習慣使用傳統的版面方式,可參考「舊版的樣式」,自行修改 CSS。
二、準備動作
在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。
安裝程式碼之前,請務必先進行以下動作:
1. 取消文章摘要
編輯自己的「熱門文章」小工具:
- 勾選「圖片縮圖」
- 不要勾選「片段」(取消文章摘要)
2. 找出小工具 ID
後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋你的熱門文章工具標題(例如 "熱門文章")
如上圖紅框,記下你的小工具 ID,通常會是 "PopularPosts1",之後會用到。
3. 安裝 jQuery + CSS
在範本中繼續搜尋
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<!--熱門文章 V2-->
<style>
#PopularPosts1 {
display: none;
}
.PopularPosts .item-thumbnail-only {
position: relative;
}
.PopularPosts ul {
list-style: none;
padding: 0;
}
.PopularPosts li {
list-style: none;
padding: 10px 0;
}
.PopularPosts .item-thumbnail {
width: 100%;
margin: 0;
float: none;
}
.PopularPosts img {
padding: 0;
width: 100%;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}
.PopularPosts .item-title {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
padding: 5px;
z-index: 5;
background-color: #24373F;
opacity: .9;
color: #fff;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item-title a {
color: #fff;
text-decoration: none;
}
.PopularPosts .item-index {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
line-height: 20px;
text-align: center;
padding: 3px;
z-index: 5;
color: #fff;
background-color: #24373F;
font-size: 16px;
font-weight: 700;
transition: all .7s;
-webkit-transition: all .7s;
-moz-transition: all .7s;
}
.PopularPosts li:hover img {
opacity: .7;
}
</style>
第一行綠色字串可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。
紅色字串的格式為 "#" (井字符號) + 熱門文章小工具的 ID 字串,請檢查 ID 是否為自己之前記下來的字串。
其餘 CSS 參數,如果熟悉 CSS 的話可自行更改樣式。
三、安裝程式碼
接著請搜尋
- <!--熱門文章 V2-->
- <script>//<![CDATA[
- $(function() {
- var id = "PopularPosts1", // 熱門文章區塊 ID
- ratio = 0.6, // 縮圖長寬比例
- thumbnail = "http://3.bp.blogspot.com/-4JBpCsqL6a4/Vh3ciHoReQI/AAAAAAAAMq8/WMHCDhvnj4M/s1600/wfublog-post.jpg", // 自訂縮圖
- index = "Y", // 是否顯示排名, 不顯示請改為 "N"
- width, height, $popularPost;
-
- var _0xc50f=["\x33\x3D\x22\x23\x22\x2B\x33\x3B\x24\x6B\x3D\x24\x28\x33\x29\x3B\x6A\x3D\x76\x28\x24\x6B\x2E\x52\x28\x22\x2E\x31\x34\x22\x29\x2E\x6A\x28\x29\x2A\x31\x2E\x35\x29\x3B\x47\x3D\x76\x28\x6A\x2A\x31\x30\x29\x3B\x24\x6B\x2E\x37\x28\x22\x2E\x34\x2D\x39\x2D\x4F\x22\x29\x2E\x50\x28\x74\x28\x61\x29\x7B\x78\x20\x67\x3D\x24\x28\x46\x29\x2C\x63\x3D\x67\x2E\x37\x28\x22\x2E\x34\x2D\x6C\x20\x61\x22\x29\x2C\x68\x3D\x63\x2E\x70\x28\x22\x73\x22\x29\x2C\x66\x3D\x63\x2E\x32\x28\x29\x2C\x65\x3D\x67\x2E\x37\x28\x22\x2E\x34\x2D\x39\x22\x29\x2C\x64\x3D\x65\x2E\x51\x2C\x62\x3D\x2F\x5C\x2F\x5B\x5E\x5C\x2F\x5D\x2B\x3F\x5C\x2F\x28\x5B\x5E\x5C\x2F\x5D\x2B\x3F\x5C\x2E\x28\x3F\x3A\x53\x7C\x54\x7C\x55\x7C\x56\x29\x29\x2F\x69\x3B\x67\x2E\x70\x28\x22\x6C\x22\x2C\x66\x29\x3B\x4E\x28\x64\x29\x7B\x65\x2E\x37\x28\x22\x75\x22\x29\x2E\x70\x28\x22\x6D\x22\x2C\x74\x28\x29\x7B\x31\x36\x20\x46\x2E\x6D\x2E\x31\x37\x28\x62\x2C\x22\x2F\x77\x22\x2B\x6A\x2B\x22\x2D\x68\x22\x2B\x47\x2B\x22\x2D\x6E\x2F\x24\x31\x22\x29\x7D\x29\x7D\x31\x6B\x7B\x67\x2E\x31\x6F\x28\x22\x3C\x36\x20\x6F\x3D\x27\x34\x2D\x39\x27\x3E\x3C\x61\x20\x73\x3D\x27\x22\x2B\x68\x2B\x22\x27\x20\x7A\x3D\x27\x41\x27\x3E\x3C\x75\x20\x6D\x3D\x27\x22\x2B\x39\x2B\x22\x27\x2F\x3E\x3C\x2F\x61\x3E\x3C\x2F\x36\x3E\x22\x29\x7D\x4E\x28\x42\x3D\x3D\x22\x59\x22\x29\x7B\x67\x2E\x31\x45\x28\x22\x3C\x36\x20\x6F\x3D\x27\x34\x2D\x42\x27\x3E\x22\x2B\x28\x61\x2B\x31\x29\x2B\x22\x3C\x2F\x36\x3E\x22\x29\x7D\x7D\x29\x3B\x78\x20\x32\x3D\x22\x3C\x36\x20\x33\x3D\x27\x43\x27\x3E\x3C\x44\x20\x33\x3D\x27\x45\x27\x20\x6F\x3D\x27\x34\x2D\x57\x20\x58\x2D\x5A\x27\x3E\x3C\x2F\x44\x3E\x3C\x2F\x36\x3E\x22\x2C\x38\x2C\x72\x3B\x24\x6B\x2E\x37\x28\x22\x2E\x31\x31\x2D\x31\x32\x22\x29\x2E\x31\x33\x28\x32\x29\x3B\x38\x3D\x24\x28\x22\x23\x45\x22\x29\x5B\x30\x5D\x3B\x72\x3D\x28\x48\x2E\x49\x29\x3F\x28\x48\x2E\x49\x28\x38\x29\x2E\x4A\x3D\x3D\x22\x71\x22\x29\x3F\x30\x3A\x31\x3A\x28\x38\x2E\x4B\x26\x26\x38\x2E\x4B\x2E\x4A\x3D\x3D\x22\x71\x22\x29\x3F\x30\x3A\x31\x3B\x32\x3D\x21\x72\x3F\x22\x3C\x61\x20\x73\x3D\x27\x31\x38\x3A\x2F\x2F\x31\x39\x2E\x31\x61\x2E\x31\x62\x2F\x31\x63\x2F\x31\x64\x2F\x31\x65\x2D\x31\x66\x2D\x31\x67\x2D\x31\x68\x2D\x39\x2D\x31\x69\x2E\x32\x27\x20\x7A\x3D\x27\x41\x27\x20\x31\x6A\x3D\x27\x4C\x2D\x31\x6C\x3A\x20\x71\x3B\x20\x31\x6D\x3A\x20\x23\x31\x6E\x3B\x27\x20\x6C\x3D\x27\u71B1\u9580\u6587\u7AE0\x20\x4D\x5C\x31\x70\x20\x31\x71\x20\x31\x72\x20\x31\x73\x27\x3E\u24E6\x20\x31\x74\x20\x31\x75\x20\x4D\x3C\x2F\x61\x3E\x22\x3A\x22\x22\x3B\x24\x28\x22\x23\x43\x22\x29\x2E\x32\x28\x32\x29\x2E\x31\x76\x28\x7B\x22\x4C\x2D\x31\x77\x22\x3A\x22\x31\x78\x22\x2C\x22\x79\x2D\x31\x79\x22\x3A\x22\x31\x7A\x2C\x20\x31\x41\x2D\x31\x42\x22\x2C\x22\x79\x2D\x31\x43\x22\x3A\x22\x31\x44\x22\x7D\x29\x2E\x31\x35\x28\x22\x33\x22\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x68\x74\x6D\x6C\x7C\x69\x64\x7C\x69\x74\x65\x6D\x7C\x7C\x64\x69\x76\x7C\x66\x69\x6E\x64\x7C\x68\x6F\x73\x74\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x7C\x77\x69\x64\x74\x68\x7C\x70\x6F\x70\x75\x6C\x61\x72\x50\x6F\x73\x74\x7C\x74\x69\x74\x6C\x65\x7C\x73\x72\x63\x7C\x7C\x63\x6C\x61\x73\x73\x7C\x61\x74\x74\x72\x7C\x6E\x6F\x6E\x65\x7C\x63\x68\x65\x63\x6B\x7C\x68\x72\x65\x66\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x69\x6D\x67\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x7C\x76\x61\x72\x7C\x66\x6F\x6E\x74\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x69\x6E\x64\x65\x78\x7C\x70\x70\x32\x49\x6E\x66\x6F\x7C\x73\x70\x61\x6E\x7C\x6C\x61\x62\x65\x6C\x54\x6F\x63\x5F\x68\x6F\x73\x74\x7C\x74\x68\x69\x73\x7C\x68\x65\x69\x67\x68\x74\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x67\x65\x74\x43\x6F\x6D\x70\x75\x74\x65\x64\x53\x74\x79\x6C\x65\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x63\x75\x72\x72\x65\x6E\x74\x53\x74\x79\x6C\x65\x7C\x74\x65\x78\x74\x7C\x56\x32\x7C\x69\x66\x7C\x6F\x6E\x6C\x79\x7C\x65\x61\x63\x68\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x70\x61\x72\x65\x6E\x74\x73\x7C\x6A\x70\x67\x7C\x6A\x70\x65\x67\x7C\x67\x69\x66\x7C\x70\x6E\x67\x7C\x63\x6F\x6E\x74\x72\x6F\x6C\x7C\x62\x6C\x6F\x67\x7C\x7C\x61\x64\x6D\x69\x6E\x7C\x72\x61\x74\x69\x6F\x7C\x77\x69\x64\x67\x65\x74\x7C\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x61\x66\x74\x65\x72\x7C\x73\x65\x63\x74\x69\x6F\x6E\x7C\x72\x65\x6D\x6F\x76\x65\x41\x74\x74\x72\x7C\x72\x65\x74\x75\x72\x6E\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x68\x74\x74\x70\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x36\x7C\x30\x38\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x70\x6F\x70\x75\x6C\x61\x72\x7C\x70\x6F\x73\x74\x7C\x76\x32\x7C\x72\x77\x64\x7C\x73\x74\x79\x6C\x65\x7C\x65\x6C\x73\x65\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x70\x72\x65\x70\x65\x6E\x64\x7C\x6E\x44\x65\x73\x69\x67\x6E\x65\x64\x7C\x62\x79\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x50\x6F\x70\x75\x6C\x61\x72\x7C\x50\x6F\x73\x74\x73\x7C\x63\x73\x73\x7C\x61\x6C\x69\x67\x6E\x7C\x72\x69\x67\x68\x74\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x41\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x73\x69\x7A\x65\x7C\x31\x31\x70\x78\x7C\x61\x70\x70\x65\x6E\x64","","\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(_0xd72fx1,_0xd72fx2,_0xd72fx3,_0xd72fx4,_0xd72fx5,_0xd72fx6){_0xd72fx5= function(_0xd72fx3){return (_0xd72fx3< _0xd72fx2?_0xc50f[4]:_0xd72fx5(parseInt(_0xd72fx3/ _0xd72fx2)))+ ((_0xd72fx3= _0xd72fx3% _0xd72fx2)> 35?String[_0xc50f[5]](_0xd72fx3+ 29):_0xd72fx3.toString(36))};if(!_0xc50f[4][_0xc50f[6]](/^/,String)){while(_0xd72fx3--){_0xd72fx6[_0xd72fx5(_0xd72fx3)]= _0xd72fx4[_0xd72fx3]|| _0xd72fx5(_0xd72fx3)};_0xd72fx4= [function(_0xd72fx5){return _0xd72fx6[_0xd72fx5]}];_0xd72fx5= function(){return _0xc50f[7]};_0xd72fx3= 1};while(_0xd72fx3--){if(_0xd72fx4[_0xd72fx3]){_0xd72fx1= _0xd72fx1[_0xc50f[6]]( new RegExp(_0xc50f[8]+ _0xd72fx5(_0xd72fx3)+ _0xc50f[8],_0xc50f[9]),_0xd72fx4[_0xd72fx3])}};return _0xd72fx1}(_0xc50f[0],62,103,_0xc50f[3][_0xc50f[2]](_0xc50f[1]),0,{}))
- $popularPost.fadeIn();
- });
- //]]></script>
- <!--Designed by WFU BLOG-->
以下參數修改請參照以上程式碼行號:
D:紅色字串改為自己的熱門文章小工具 ID
E:設定縮圖的長寬比例
F:若文章沒有縮圖時,會出現自訂縮圖,請將藍色字串改為自己的縮圖網址。
G:預設左上角會出現排名序號,若不需要序號請將參數改為 "N"
存檔後即可看到效果,也可先看以下網頁的展示效果:
四、相關熱門文章工具
1. 熱門文章輪播
在網站上方隨機輪播熱門文章有很好的效果,可參考這篇「標頭 Banner 隨機輪播熱門文章」。
2. 配合 Owl Carousel 外掛
如果將「最熱門 jQuery 圖片輪播外掛 Owl Carousel」放在標頭,不但能做出輪播效果,還有左右拖曳、導覽的特效,更能吸引訪客目光。
3. 更多熱門文章
官方的熱門文章工具,最多只能顯示 10 篇文章,若想顯示更多的話,可參考這個「Blogger 百大熱門文章排行」。
五、常見 FAQ
日後若有常見問題,會持續補充在此。
Q1: 為何文章無法正常顯示縮圖?
Ans: Blogger 的縮圖功能,需要使用 PICASA 圖床才能自動產生,因此使用其他圖床的話,這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」,在 Blogger 後台上傳圖片,放在文章最前面的位置,就一定能顯示縮圖了。
更多實用工具:
請問我照您的方法做了,圖片也出來了
回覆刪除但總覺得很糊又很小,有辦法放大嗎?
https://hole404.blogspot.tw/
大大抱歉,又是我
回覆刪除已經解決Blogger圖床圖片糊掉的問題了,但使用imgur圖床仍有問題,要怎麼排除呢?