7/14/2018

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

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

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.  
  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://3.bp.blogspot.com/-4JBpCsqL6a4/Vh3ciHoReQI/AAAAAAAAMq8/WMHCDhvnj4M/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 _0x29da=["\x39\x28\x69\x20\x31\x38\x20\x6F\x29\x7B\x32\x3D\x6F\x5B\x69\x5D\x3B\x36\x3D\x32\x2E\x36\x2E\x24\x74\x3B\x34\x3D\x32\x2E\x70\x24\x72\x3F\x32\x2E\x70\x24\x72\x2E\x37\x3A\x4A\x3B\x34\x3D\x34\x2E\x64\x28\x2F\x46\x2D\x63\x2F\x2C\x22\x77\x22\x2B\x67\x2B\x22\x2D\x68\x22\x2B\x42\x28\x67\x2A\x7A\x29\x2B\x22\x2D\x6E\x22\x29\x2E\x64\x28\x22\x50\x3A\x22\x2C\x22\x71\x3A\x22\x29\x3B\x35\x3D\x32\x2E\x35\x3B\x6C\x3D\x32\x2E\x35\x2E\x75\x3B\x39\x28\x6A\x3D\x30\x3B\x6A\x3C\x6C\x3B\x6A\x2B\x2B\x29\x7B\x76\x28\x35\x5B\x6A\x5D\x2E\x78\x3D\x3D\x22\x79\x22\x29\x7B\x37\x3D\x35\x5B\x6A\x5D\x2E\x38\x3B\x41\x7D\x7D\x31\x2B\x3D\x22\x3C\x33\x20\x66\x3D\x27\x43\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\x44\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\x66\x3D\x27\x45\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\x31\x2B\x3D\x22\x3C\x33\x20\x65\x3D\x27\x47\x2D\x48\x3A\x20\x49\x3B\x62\x2D\x4B\x3A\x4C\x3B\x27\x3E\x3C\x61\x20\x38\x3D\x27\x71\x3A\x2F\x2F\x4D\x2E\x4E\x2E\x4F\x2F\x73\x2F\x51\x2F\x52\x2D\x53\x2D\x54\x2D\x55\x2E\x31\x27\x20\x56\x3D\x27\x57\x27\x20\x65\x3D\x27\x62\x2D\x58\x3A\x20\x59\x3B\x20\x5A\x3A\x20\x23\x31\x30\x3B\x20\x6D\x2D\x31\x31\x3A\x20\x31\x32\x2C\x20\x31\x33\x2C\x20\x31\x34\x2D\x31\x35\x3B\x20\x6D\x2D\x31\x36\x3A\x20\x31\x37\x3B\x27\x20\x36\x3D\x27\x6B\x20\u7CBE\u9078\u6587\u7AE0\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x39\x20\x31\x61\x27\x3E\u24E6\x20\x6B\x20\x31\x62\x3C\x2F\x61\x3E\x3C\x2F\x33\x3E\x22\x3B\x24\x28\x22\x23\x31\x63\x22\x29\x2E\x31\x28\x31\x29\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\x66\x6F\x72\x7C\x7C\x74\x65\x78\x74\x7C\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x73\x74\x79\x6C\x65\x7C\x63\x6C\x61\x73\x73\x7C\x77\x69\x64\x74\x68\x7C\x7C\x7C\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x7C\x66\x6F\x6E\x74\x7C\x7C\x65\x6E\x74\x72\x69\x65\x73\x7C\x6D\x65\x64\x69\x61\x7C\x68\x74\x74\x70\x73\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x32\x30\x31\x38\x7C\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x69\x66\x7C\x7C\x72\x65\x6C\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x72\x61\x74\x69\x6F\x7C\x62\x72\x65\x61\x6B\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x69\x74\x65\x6D\x7C\x73\x72\x63\x7C\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x73\x37\x32\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x74\x6F\x70\x7C\x35\x70\x78\x7C\x6E\x6F\x49\x6D\x61\x67\x65\x7C\x61\x6C\x69\x67\x6E\x7C\x72\x69\x67\x68\x74\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x68\x74\x74\x70\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\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\x69\x6E\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x43\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6D\x67","","\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(_0x86f1x1,_0x86f1x2,_0x86f1x3,_0x86f1x4,_0x86f1x5,_0x86f1x6){_0x86f1x5=function(_0x86f1x3){return(_0x86f1x3<_0x86f1x2?_0x29da[4]:_0x86f1x5(parseInt(_0x86f1x3/_0x86f1x2)))+((_0x86f1x3=_0x86f1x3%_0x86f1x2)>35?String[_0x29da[5]](_0x86f1x3+29):_0x86f1x3.toString(36))};if(!_0x29da[4][_0x29da[6]](/^/,String)){while(_0x86f1x3--){_0x86f1x6[_0x86f1x5(_0x86f1x3)]=_0x86f1x4[_0x86f1x3]||_0x86f1x5(_0x86f1x3)}_0x86f1x4=[function(_0x86f1x5){return _0x86f1x6[_0x86f1x5]}];_0x86f1x5=function(){return _0x29da[7]};_0x86f1x3=1}while(_0x86f1x3--){if(_0x86f1x4[_0x86f1x3]){_0x86f1x1=_0x86f1x1[_0x29da[6]](new RegExp(_0x29da[8]+_0x86f1x5(_0x86f1x3)+_0x29da[8],_0x29da[9]),_0x86f1x4[_0x86f1x3])}}return _0x86f1x1}(_0x29da[0],62,75,_0x29da[3][_0x29da[2]](_0x29da[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. </style>

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

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

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




三、注意事項


以下是幾點補充:

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


更多 Blogger 小工具:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

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

TOP