文章列表+「讚」統計(依日期排列)

(Pic from: iconfinder.com, iconpng.com, iconarchive.com)2016.4.8 公告：因 Google Drive 外連失效，請勿使用本篇的程式碼，請改用新版「Blogger 文章列表 RWD 版﹍(3) 依日期排列+讚統計」

自訂安裝篇

如果不需要自訂版面配置，那麼只需要依「簡易安裝」來安裝程式碼即可；而本篇則是列出可以修改版面配置的程式碼位置。

在「簡易安裝」的第一個 js 檔，作用為收集所有要印出的資料，第二個 js 檔則印出文章列表的表格，因此自訂安裝主要是改第二個 js 檔的內容。以下的內容可複製到文書處理軟體，將欲自訂的部分修改完後，依照同樣的步驟：新開一篇文章 → 複製修改後的程式碼貼上 → 存檔即完成。

1. <script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TOC_date_FB_main.js' type='text/javascript'></script>
2. <script type='text/javascript'>
3. function displayToc2() {
4.   var a = 0;
5.   var b = 0;
6.   while (b < postTitle.length) {
7.     temp1 = postYearMonth[b];
8.     document.write("<p/>");
9.         
10.     document.write("<p><b><a href='" + postYearMonth2[b] + "' target='_blank' style='color: #000060;text-decoration: none;'>" + temp1 + "</a></b></p>");
11.     firsti = a;
12.     document.write("<table width='100%' style='height:20px; vertical-align:middle'>");
13.     do {
14.       document.write("<tr><td width=430px style='padding-left:20px'>");
15.             
16.   document.write("[" + postTanggal[a] + "] <a href='" + postUrl[a] + "' target='_blank'>" + postTitle[a] + "</a></td>");
17.       
18.       for (var i=0;i<Collect_FBurl.length;i++){
19.     if(postUrl[a]==Collect_FBurl[i]){
20.   if(Collect_FBlike[i]>99){Collect_FBlike[i]="<span style='color:#3d85c6;'>爆</span>"}
21.   document.write("<td><img src='https://lh6.googleusercontent.com/-Ofxn3Sj1alw/T3Uln9JxIqI/AAAAAAAACes/K3d-PfYQzsE/s51/fb_like_share.png' style='padding:0px; vertical-align:middle'/>：<span>"+Collect_FBlike[i]+"</span></td>")
22.   break
23. }
24.       }      
25.       document.write("</tr>");
26.       a = a + 1
27.     } 
28. while (postYearMonth[a] == temp1);
29.     b = a;
30.     document.write("</table>"); 
31.     if (b > postTitle.length) {break}
32.   }
33. }
34. displayToc2()
35. </script>

J：印出年、月。

N：設定文章標題最大的寬度。可以根據自己的版型來改這裏的數值。

P：印出日期、文章標題。

T：預設超過 99 個讚顯示藍爆，以免出現三位數影響版面美觀。

U：印出預設「讚＋分享按鈕」圖案、"讚"的數目。

以上大略簡單提一下，修改那個部分有問題請再留言。


注意事項：
  A. 貼上程式碼前，注意是否為「HTML」的編輯模式(而非 "撰寫" 的編輯模式)。
  B. 文章設定 → 「選項」 → 「撰寫模式」，注意是否為「解釋輸入的HTML」。

一點小提醒：

新開一篇文章插入大量的 javascript 後，以後若是編輯文章時，一些程式碼會亂掉，因此此類文章最好儲存後不要使用編輯功能。比較好的方法是原程式碼備份，直接在原程式碼編輯，編輯完再貼到文章裡，否則 javascript 的效果通常會失敗的！！