2018年7月1日 星期日

Blogger 自製「精選文章」小工具﹍圖片版

Blogger 自製「精選文章」小工具﹍圖片版

Wayne Fu 0 A+
blogger-collection-image-version.jpg-Blogger 自製「精選文章」小工具﹍圖片版Blogger 官方幾年前推出「精選文章」小工具,我認為這個功能非常有必要性,因為跟側邊欄的「熱門文章」、「最新文章」工具一樣,都具有維持訪客注意力、減少跳出率的用途。

不過本質上,「精選文章」還是有所不同:

  • 「熱門文章」顯示的文章無法由自己決定,熱門程度是由訪客決定。
  • 「最新文章」容易良莠不齊,不太可能每篇文章都很吸睛。
  • 「精選文章」是親自精挑細選過的文章,在某種程度上會比「熱門文章」實用。

但是官方推出的這個「精選文章」工具,WFU 卻從來沒有想要安裝,因為覺得很不實用,只能顯示一篇文章而已。

如果可以顯示自訂數量的精選文章,宣傳效果不是更好嗎?


(圖片出處: pixabay.com)


一、「精選文章」的必要性


雖然本站的主題是 Blogger,不過熱門文章前十名只有一篇與 Blogger 主題相關,這也會造成搜尋長尾關鍵字而來的主要讀者,對網站有興趣而想多閱讀一些熱門、看板文章時,卻找不到幾篇 Blogger 相關文章。

某種程度上這也算是相當無奈的現象,然而熱門文章的排行不是自己能決定的。比較好的作法是,親自挑選幾篇文章放在側邊欄,相信經由這些「精選文章」,可以更快讓讀者認識自己的網站。

那麼本篇將會改造「精選文章」工具:

  • 可以指定顯示的文章數
  • 可以指定列出某標籤的文章
  • 例如將所有要出現在「精選文章」工具的文章,設定某個標籤名稱即可


側邊欄版面效果大致如下:

blogger-collection-image-version-1.jpg-Blogger 自製「精選文章」小工具﹍圖片版



二、安裝程式碼


請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、及以下程式碼:

  1. <div id="collection_img"></div>
  2. <div id="collection_img_info"><a href="https://www.wfublog.com/2018/07/blogger-collection-image-version.html">ⓦ Blogger Collection</a></div>
  3. <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
  4. <script>
  5. (function() {
  6. var label = "精選文章", // 填入精選文章使用的標籤名稱
  7. total = 5, // 顯示最新的幾篇文章
  8. noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUzjAFwiW_-E8IyG35qcdd8Ah4R7ewR9OcCzsL1b8O9eBhPwWnyt4LEI2eY5kZLBDt3qbcrZlAib2rO0HCtyiwysT570dCnduvTBsgLhyphenhyphen7d5BTfLIbI-EgE6OArsY7tFsXjyCKZm0qGfH_/s1600/wfublog-post.jpg", // 無縮圖的預設圖片
  9. width = 400, // 圖片寬度
  10. ratio = 0.6, // 縮圖長寬比例
  11. feedUrl = "/feeds/posts/summary/-/" + label + "?max-results=" + total + "&alt=json-in-script&callback=?";
  12.  
  13. $.getJSON(feedUrl,function(a){showPost(a)});function showPost(json){var entries=json.feed.entry,html="",i,j,l,entry,title,link,url,img;var _0xef5b=["\x64\x28\x69\x20\x79\x20\x65\x29\x7B\x32\x3D\x65\x5B\x69\x5D\x3B\x36\x3D\x32\x2E\x36\x2E\x24\x74\x3B\x34\x3D\x32\x2E\x66\x24\x67\x3F\x32\x2E\x66\x24\x67\x2E\x37\x3A\x7A\x3B\x34\x3D\x34\x2E\x6B\x28\x2F\x41\x2D\x63\x2F\x2C\x22\x77\x22\x2B\x6D\x2B\x22\x2D\x68\x22\x2B\x42\x28\x6D\x2A\x43\x29\x2B\x22\x2D\x6E\x22\x29\x2E\x6B\x28\x22\x44\x3A\x22\x2C\x22\x6F\x3A\x22\x29\x3B\x35\x3D\x32\x2E\x35\x3B\x6C\x3D\x32\x2E\x35\x2E\x70\x3B\x64\x28\x6A\x3D\x30\x3B\x6A\x3C\x6C\x3B\x6A\x2B\x2B\x29\x7B\x71\x28\x35\x5B\x6A\x5D\x2E\x45\x3D\x3D\x22\x46\x22\x29\x7B\x37\x3D\x35\x5B\x6A\x5D\x2E\x38\x3B\x47\x7D\x7D\x31\x2B\x3D\x22\x3C\x33\x20\x72\x3D\x27\x48\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x37\x2B\x22\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x34\x20\x49\x3D\x27\x22\x2B\x34\x2B\x22\x27\x2F\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x2F\x61\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x33\x20\x72\x3D\x27\x4A\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x37\x2B\x22\x27\x3E\x22\x2B\x36\x2B\x22\x3C\x2F\x61\x3E\x3C\x2F\x33\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x2F\x33\x3E\x22\x7D\x24\x28\x22\x23\x73\x22\x29\x2E\x31\x28\x31\x29\x3B\x4B\x20\x39\x3D\x22\x3C\x61\x20\x38\x3D\x27\x6F\x3A\x2F\x2F\x4C\x2E\x4D\x2E\x4E\x2F\x4F\x2F\x50\x2F\x51\x2D\x52\x2D\x53\x2D\x54\x2E\x31\x27\x20\x55\x3D\x27\x56\x27\x20\x57\x3D\x27\x58\x2D\x59\x3A\x20\x5A\x3B\x20\x31\x30\x3A\x20\x23\x31\x31\x3B\x20\x75\x2D\x31\x32\x3A\x20\x31\x33\x2C\x20\x31\x34\x2C\x20\x31\x35\x2D\x31\x36\x3B\x20\x75\x2D\x31\x37\x3A\x20\x31\x38\x3B\x27\x20\x36\x3D\x27\x76\x20\u7CBE\u9078\u6587\u7AE0\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x39\x20\x31\x61\x27\x3E\u24E6\x20\x76\x20\x31\x62\x3C\x2F\x61\x3E\x22\x2C\x24\x62\x3D\x24\x28\x22\x23\x78\x22\x29\x3B\x71\x28\x24\x62\x2E\x70\x29\x7B\x24\x62\x2E\x31\x28\x39\x29\x7D\x31\x63\x7B\x24\x28\x22\x23\x73\x22\x29\x2E\x31\x64\x28\x22\x3C\x33\x20\x31\x65\x3D\x27\x78\x27\x3E\x22\x2B\x39\x2B\x22\x3C\x2F\x33\x3E\x22\x29\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x68\x74\x6D\x6C\x7C\x65\x6E\x74\x72\x79\x7C\x64\x69\x76\x7C\x69\x6D\x67\x7C\x6C\x69\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x75\x72\x6C\x7C\x68\x72\x65\x66\x7C\x69\x6E\x66\x6F\x7C\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6E\x66\x6F\x7C\x7C\x66\x6F\x72\x7C\x65\x6E\x74\x72\x69\x65\x73\x7C\x6D\x65\x64\x69\x61\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x7C\x7C\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x7C\x77\x69\x64\x74\x68\x7C\x7C\x68\x74\x74\x70\x73\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x69\x66\x7C\x63\x6C\x61\x73\x73\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6D\x67\x7C\x7C\x66\x6F\x6E\x74\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6D\x67\x5F\x69\x6E\x66\x6F\x7C\x69\x6E\x7C\x6E\x6F\x49\x6D\x61\x67\x65\x7C\x73\x37\x32\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x72\x61\x74\x69\x6F\x7C\x68\x74\x74\x70\x7C\x72\x65\x6C\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x62\x72\x65\x61\x6B\x7C\x69\x74\x65\x6D\x7C\x73\x72\x63\x7C\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x76\x61\x72\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x38\x7C\x30\x37\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x69\x6D\x61\x67\x65\x7C\x76\x65\x72\x73\x69\x6F\x6E\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\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x61\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\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x43\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x65\x6C\x73\x65\x7C\x61\x66\x74\x65\x72\x7C\x69\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(_0xe1cax1,_0xe1cax2,_0xe1cax3,_0xe1cax4,_0xe1cax5,_0xe1cax6){_0xe1cax5=function(_0xe1cax3){return(_0xe1cax3<_0xe1cax2?_0xef5b[4]:_0xe1cax5(parseInt(_0xe1cax3/_0xe1cax2)))+((_0xe1cax3=_0xe1cax3%_0xe1cax2)>35?String[_0xef5b[5]](_0xe1cax3+29):_0xe1cax3.toString(36))};if(!_0xef5b[4][_0xef5b[6]](/^/,String)){while(_0xe1cax3--){_0xe1cax6[_0xe1cax5(_0xe1cax3)]=_0xe1cax4[_0xe1cax3]||_0xe1cax5(_0xe1cax3)}_0xe1cax4=[function(_0xe1cax5){return _0xe1cax6[_0xe1cax5]}];_0xe1cax5=function(){return _0xef5b[7]};_0xe1cax3=1}while(_0xe1cax3--){if(_0xe1cax4[_0xe1cax3]){_0xe1cax1=_0xe1cax1[_0xef5b[6]](new RegExp(_0xef5b[8]+_0xe1cax5(_0xe1cax3)+_0xef5b[8],_0xef5b[9]),_0xe1cax4[_0xe1cax3])}}return _0xe1cax1}(_0xef5b[0],62,77,_0xef5b[3][_0xef5b[2]](_0xef5b[1]),0,{}))};
  14. })();
  15. </script>
  16.  
  17. <style>
  18. #collection_img .item { margin-bottom: 15px; }
  19. #collection_img img { width: 100%; height: auto; object-fit: cover; }
  20. #collection_img .post_title a { text-decoration: none; font-size: 16px; }
  21. #collection_img_info { margin-top: 5px; text-align: right; }
  22. </style>

以下修改請參照以上行號:

  • C:可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。
  • F:紅字請改為要篩選文章的標籤名稱
  • G:可修改要顯示的文章數
  • H:可修改預設圖片
  • I:如果側邊欄寬度沒有大於 400px 的話,可不用改本行數值
  • J:修改縮圖的長寬比例
  • R~T:如果熟悉 CSS,可自行修改參數

儲存後即可看到效果,也可先看以下 DEMO 頁面的效果:




三、注意事項


以下是幾點補充:

  • 可額外設定一個標籤名稱,例如 "精選文章",專門用來顯示此工具的文章。
  • 將所有要顯示在此工具的文章,都新增這個標籤。
  • 將來某篇文章不想出現在此工具時,移除這個標籤即可。
  • 想調整文章的顯示順序,可修改文章的發佈日期。
  • 此工具會從日期較近的文章開始顯示。


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

沒有留言:

張貼留言注意事項:

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

TOP