2016年8月15日

Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

Wayne Fu 0 A+
blogger-popular-post-v2-rwd-Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)幾年前寫的「Blogger 熱門文章+任意尺寸縮圖」,由於修改方式比較複雜,不熟悉程式碼的讀者,有可能不小心會把範本改壞。

本篇 V2 版,除了可算是懶人包,安裝十分簡單,版面也比較有設計感。以下先介紹改版特點,想直接安裝可跳至「二、準備動作」。




(圖片出處: magicmockups.com)


一、改版特點


  • 可自訂縮圖比例
  • 縮圖寬度會自動符合區塊寬度,有 RWD 效果
  • 版面設計為卡片風格
  • 無縮圖的文章可使用預設縮圖
  • 可使用排行編號效果

這次的改版嘗試使用不同的版面效果,不顯示文章摘要,只顯示縮圖及標題。

如果習慣使用傳統的版面方式,可參考「舊版的樣式」,自行修改 CSS。



二、準備動作


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

安裝程式碼之前,請務必先進行以下動作:

1. 取消文章摘要

編輯自己的「熱門文章」小工具:

  • 勾選「圖片縮圖」
  • 不要勾選「片段」(取消文章摘要)


2. 找出小工具 ID

後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋你的熱門文章工具標題(例如 "熱門文章")

blogger-popular-post-id-Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸 (RWD)

如上圖紅框,記下你的小工具 ID,通常會是 "PopularPosts1",之後會用到。


3. 安裝 jQuery + CSS

在範本中繼續搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:


<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 的話可自行更改樣式。



三、安裝程式碼


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

  1. <!--熱門文章 V2-->
  2. <script>//<![CDATA[
  3. $(function() {
  4. var id = "PopularPosts1", // 熱門文章區塊 ID
  5. ratio = 0.6, // 縮圖長寬比例
  6. thumbnail = "http://3.bp.blogspot.com/-4JBpCsqL6a4/Vh3ciHoReQI/AAAAAAAAMq8/WMHCDhvnj4M/s1600/wfublog-post.jpg", // 自訂縮圖
  7. index = "Y", // 是否顯示排名, 不顯示請改為 "N"
  8. width, height, $popularPost;
  9.  
  10. 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,{}))
  11. $popularPost.fadeIn();
  12. });
  13. //]]></script>
  14. <!--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 後台上傳圖片,放在文章最前面的位置,就一定能顯示縮圖了。


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. 請問我照您的方法做了,圖片也出來了
    但總覺得很糊又很小,有辦法放大嗎?

    https://hole404.blogspot.tw/

    回覆刪除
  2. 大大抱歉,又是我
    已經解決Blogger圖床圖片糊掉的問題了,但使用imgur圖床仍有問題,要怎麼排除呢?

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

⏩ 提問請詳細描述狀況,並附網址或截圖,如提供的資訊不足,則無法回覆。

TOP