2018年12月12日

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

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

Wayne Fu 0 A+
其實這個工具很久以前就很想做了,原因是側邊欄放了「熱門文章」小工具,但本站性質比較奇特一點:

  • 網站主題以 Blogger、部落格經營設計為主
  • 而網站流量主要從 Google 搜尋引擎而來
  • 可是流量較大的文章多半與網站主題無關
  • 導致這個熱門文章排行榜,對主力客群吸引力不大
  • 主要的讀者在熱門文章不容易看到與網站主題相近的文章,會喪失停留的機會

所以老早想做個「精選文章」這樣的小工具來取代熱門文章。與其顯示一個無法控制與預期的榜單,不如只顯示精心挑選、忠實讀者真正有興趣與需要的文章。

(圖片出處: pixabay.com)


一、功能介紹


1. 文字版

本篇提供的側邊欄工具,特點如下:

  • 只顯示文字標題 (無圖片)
  • 可自訂顯示順序、每頁顯示的文章數
  • 超過一頁可顯示的數量時,可進行上下頁切換
  • 所以要擺放幾篇精選文章都可以


2. 圖片版

先前曾製作另一個版本「Blogger 精選文章圖片版」,差異如下:

  • 可顯示文章縮圖
  • 可自訂顯示的文章數,但不能切換上下頁
  • 要更換文章顯示順序的話沒那麼方便,比較麻煩一些


3. 其他方案

如果要顯示的精選文章沒那麼多,不需要切換上下頁的話,那麼也不一定要安裝本篇的工具,直接使用官方小工具「連結清單」即可。



二、功能展示


1. DEMO 效果

請見下方這個小工具的效果,可直接操作試玩:





2. 側邊欄效果

或是也可看本站右邊側邊欄,目前有三個區塊使用本篇的工具:

  • 精選文章
  • Blogger 精選
  • 網頁設計精選



三、安裝程式碼


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


1. 準備動作

請到後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*Blogger 精選文章*/
#collection_outer ul,#collection_outer li{list-style:none;margin:0;padding:0;}
#collection_outer li{padding-bottom:10px;font-size: 14px;line-height:1.4;}
#collection_outer a,#collection_info a{text-decoration:none;}
#collection_info{float:right;font-size:11px;font-family:helvetica, arial, sans-serif;text-shadow:1px 1px 1px #E6E6FA;}
#collection_info a{color:#ccc;}
.clp_postTitle{font-weight:700;}
#clp_switchPage{background-color:#eee;font-size:14px;line-height:16px;margin:5px 0;padding:3px;}
#clp_switchPage a,#clp_switchPage span{box-sizing:border-box;display:inline-block;border-left:1px dashed #aaa;text-align:center;padding:0;}
#clp_switchPage a:hover{background-color:rgba(100,100,100,0.1);}
#clp_switchPage a:first-child,#clp_switchPage span:first-child{border-left:0;}
</style>


第 1 行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

其餘的部分,如果對 CSS 熟悉可自行修改參數,沒問題即可儲存範本。


2. 安裝小工具

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

<div id="collection_outer"></div>
<div id="collection_info"><a href="https://www.wfublog.com/2018/12/blogger-collection-text-version.html">ⓦ Collection Posts</a>
</div>
<script>
var clp = {
showPost: 8, // 每頁顯示幾篇文章
nextLogo: "▸", // 下一頁圖示
prevLogo: "◂" // 上一頁圖示
};
clp.posts = [
["CC0 免費圖庫搜尋引擎", "https://www.wfublog.com/2017/05/cc0-free-high-quality-image-search-engine-manual.html"],
["標題 2", "網址 2"],
["標題 3", "網址 3"],
["標題 4", "網址 4"],
["標題 5", "網址 5"]
];

clp.switchPage=function(a){var e=clp.showPost,c="",d="50%";if(a>0){c+="<a class='clp_prevPage' style='width:"+d+"' href='javascript:' title='上一頁'>"+clp.prevLogo+"</a>"}else{c+="<span class='clp_prevPage' style='width:"+d+"'>"+clp.prevLogo+"</span>"}if(a+e<clp.posts.length){c+="<a class='clp_nextPage' style='width:"+d+"' href='javascript:' title='下一頁'>"+clp.nextLogo+"</a>"}else{c+="<span class='clp_nextPage' style='width:"+d+"'>"+clp.nextLogo+"</a>"}$("#clp_switchPage").html(c);$("a.clp_prevPage").click(function(){b();setTimeout(function(){clp.main(a-e)},500)});$("a.clp_nextPage").click(function(){b();setTimeout(function(){clp.main(a+e)},500)});function b(){$("#collection_outer").html("<div style='text-align: center; margin: 20px auto;'><img src='//lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/s512/indicator-light.gif'/></div>")}};clp.main=function(idx){var showPost=clp.showPost,posts=clp.posts,html="",i,title,link,info;idx=idx||0;html+="<ul>";for(i=idx;i<idx+showPost;i++){if(i>posts.length-1){break}title=posts[i][0];link=posts[i][1];html+="<li>";html+="<div class='clp_postTitle'><a href='"+link+"'>"+title+"</a></div>";html+="</li>"}html+="</ul>";html+="<div id='clp_switchPage'></div>";var _0xacf3=["\x24\x28\x22\x23\x33\x22\x29\x2E\x31\x28\x31\x29\x3B\x35\x2E\x36\x28\x37\x29\x3B\x32\x3D\x22\x3C\x61\x20\x38\x3D\x27\x39\x3A\x2F\x2F\x62\x2E\x63\x2E\x64\x2F\x65\x2F\x66\x2F\x67\x2D\x68\x2D\x69\x2D\x6A\x2E\x31\x27\x20\x6B\x3D\x27\x6C\x20\x27\x20\x6D\x3D\x27\x6F\x20\u7CBE\u9078\u6587\u7AE0\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x70\x20\x71\x27\x3E\u24E6\x20\x72\x20\x73\x3C\x2F\x61\x3E\x22\x3B\x74\x20\x24\x30\x3D\x24\x28\x22\x23\x30\x22\x29\x3B\x75\x28\x24\x30\x2E\x76\x29\x7B\x24\x30\x2E\x31\x28\x32\x29\x7D\x77\x7B\x24\x28\x22\x23\x33\x22\x29\x2E\x78\x28\x22\x3C\x34\x20\x79\x3D\x27\x30\x27\x3E\x22\x2B\x32\x2B\x22\x3C\x2F\x34\x3E\x22\x29\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6E\x66\x6F\x7C\x68\x74\x6D\x6C\x7C\x69\x6E\x66\x6F\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x6F\x75\x74\x65\x72\x7C\x64\x69\x76\x7C\x63\x6C\x70\x7C\x73\x77\x69\x74\x63\x68\x50\x61\x67\x65\x7C\x69\x64\x78\x7C\x68\x72\x65\x66\x7C\x68\x74\x74\x70\x73\x7C\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x38\x7C\x31\x32\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x74\x65\x78\x74\x7C\x76\x65\x72\x73\x69\x6F\x6E\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x43\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x50\x6F\x73\x74\x73\x7C\x76\x61\x72\x7C\x69\x66\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x65\x6C\x73\x65\x7C\x61\x66\x74\x65\x72\x7C\x69\x64","\x72\x65\x70\x6C\x61\x63\x65","","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0xa4ccx1,_0xa4ccx2,_0xa4ccx3,_0xa4ccx4,_0xa4ccx5,_0xa4ccx6){_0xa4ccx5=function(_0xa4ccx3){return _0xa4ccx3.toString(_0xa4ccx2)};if(!_0xacf3[5][_0xacf3[4]](/^/,String)){while(_0xa4ccx3--){_0xa4ccx6[_0xa4ccx5(_0xa4ccx3)]=_0xa4ccx4[_0xa4ccx3]||_0xa4ccx5(_0xa4ccx3)}_0xa4ccx4=[function(_0xa4ccx5){return _0xa4ccx6[_0xa4ccx5]}];_0xa4ccx5=function(){return _0xacf3[6]};_0xa4ccx3=1}while(_0xa4ccx3--){if(_0xa4ccx4[_0xa4ccx3]){_0xa4ccx1=_0xa4ccx1[_0xacf3[4]](new RegExp(_0xacf3[7]+_0xa4ccx5(_0xa4ccx3)+_0xacf3[7],_0xacf3[8]),_0xa4ccx4[_0xa4ccx3])}}return _0xa4ccx1}(_0xacf3[0],35,35,_0xacf3[3][_0xacf3[2]](_0xacf3[1]),0,{}))};clp.main();
</script>

修改說明如下:

  • 紅色數字可改為自訂數量
  • 接下來比較複雜一些:
    • clp.posts 儲存了所有文章資訊,外層用一組括號 "[ ]" 包覆起來
    • 內層每一組括號 "[ ]" 存放一組文章資訊
    • 其中藍色字串請改為自己的文章標題,綠色字串請改為自己的文章網址
    • 要減少文章請刪除一組內層括號 "[ ]" 及後面的逗點 ","
    • 要增加文章請複製一組內層括號 "[ ]" 及後面的逗點 ","
    • 請注意最後一組內層括號 "[ ]" 的後面,不可以有逗點

儲存後即可看到效果,修改若有問題請仔細詳閱以上說明。


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

沒有留言:

張貼留言注意事項:

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

TOP