2014年3月1日 星期六

Blogger 文章列表極速版﹍(4) 依標籤排列+讚統計

Blogger 文章列表極速版﹍(4) 依標籤排列+讚統計

Wayne Fu 0 A+
這個版本主要是將「文章列表極速版__依標籤排列」加上讚統計的功能。另外,該篇的留言 FreeTong Leung 提供了一些不錯的建議及 CSS 語法,因此本篇也將這些建議放入展示效果,例如:

1. 標籤按鈕旁增加新文章的提示效果
2. 新文章的提示效果增加顏色閃爍 CSS 語法

至於文章列表極速版的優點、及讚統計的介紹,請參考「文章列表極速版__依日期排列+讚統計」,以下直接敘述如何安裝程式碼。




一、安裝程式碼


新開一篇文章 → 複製以下程式碼:


請先別存檔,以上是主程式的部分,還需要複製 "版面樣式" 的部分。

請參照以下程式碼行號的說明──

E:可設定最近的幾篇文章要顯示為新文章,紅字 15 代表最近的 15 文章,會標示為 "新文章"。

F:藍色字串即為標示 "新文章" 時所顯示的字樣,也可填入 http 開頭的圖片網址。

G:讚統計爆表數量,預設值 50 代表超過這個數字後會顯示 ""。

H:爆表時顯示的字串,也可改為自訂字串。

I:"讚" 的圖示,可使用自訂的圖示網址。如果使用不同尺寸的圖片,可能需要修改 CSS 以符合版面美觀,請再參考「安裝 CSS」的內容。

J:請填入不想顯示的標籤名稱,每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。如果沒有需要排除的標籤,本行請留下 tocLabelLike.exclude = []; 這樣的內容即可。

K:文章開合的效果,預設值 "fadeToggle" 為「淡入淡出」的效果;若改為 "slideToggle" 則有「滑動開合」的效果

L:標籤若不標示有新文章,請改為 "N"。

M:若不展開第一個標籤的文章,請改為 "N"。

O:由於「Google Drive 關閉外連」功能,綠色字串的 JS 網址是無法外連的,請參照「WFU BLOG 外連 JS 變更及操作說明」,將這個連結下載後存成 JS 檔,上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後,置換本行的綠色網址字串。



二、安裝 CSS


接在「一、安裝程式碼」這部分的程式碼後面,貼上以下 CSS 程式碼:

<style>
.tocLabelTitle { /* 標籤按鈕 */
display: table-cell;
width: 200px; /* 按鈕的寬度 */
padding: 5px 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Arial, "標楷體", sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
-moz-box-shadow: 0px 10px 14px -8px #276873;
-webkit-box-shadow: 0px 10px 14px -8px #276873;
box-shadow: 0px 10px 14px -8px #276873;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color: #599bb3;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.tocLabelTitle:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tocLabelTitle:active {
position: relative;
top: 1px;
}

.tocLabel { /* 個別標籤區塊 */
margin: 0px 5px 15px;
}

.tocLabelToggle { /* 標籤開合區塊 */
display: none;
margin: 20px 10px 30px;
}

.tocPostNo { /* 文章編號 */
float: left;
font-size: 16px;
width: 25px;
text-align: right;
}
.tocPost { /* 文章標題區塊 */
margin-left: 35px;
font-size: 16px;
border-bottom: 1px dotted lavender;
padding-bottom: 5px;
}
.tocPostTitle { /* 文章標題 */
display: inline-block;
width: 75%;
}
.tocLike { /* 讚區塊 */
padding-left: 10px;
display: inline-block;
width: 20%;
vertical-align: top;
}
.tocLike img { /* 讚圖片 */
height: 20px;
vertical-align: middle;
border: none;
box-shadow: none;
}
.tocBurst { /* 爆 */
color: #000060;
font-weight: bold;
vertical-align: middle;
}
#tocInfo { /* 資訊區塊 */
text-align: left;
margin-top: 30px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 14px;
font-style: italic;
text-shadow: 1px 1px 1px lavender;
}
.tocLabelNewText { /* 最新文章標籤標示 */
display: table-cell;
color: #990000;
font-weight: bold;
font-style: italic;
padding-left: 10px;
vertical-align: middle;
-webkit-animation: color-change 1s infinite alternate ease-in-out;
-moz-animation: color-change 1s infinite alternate ease-in-out;
-o-animation: color-change 1s infinite alternate ease-in-out;
-ms-animation: color-change 1s infinite alternate ease-in-out;
animation: color-change 1s infinite alternate ease-in-out;
}
.tocNewText { /* 最新文章標示 */
color: #990000;
font-weight: bold;
font-style: italic;
margin-left: 10px;
-webkit-animation: color-change 1s infinite alternate ease-in-out;
-moz-animation: color-change 1s infinite alternate ease-in-out;
-o-animation: color-change 1s infinite alternate ease-in-out;
-ms-animation: color-change 1s infinite alternate ease-in-out;
animation: color-change 1s infinite alternate ease-in-out;
}
@-webkit-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-moz-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-ms-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-o-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
</style>

請特別注意第四行的紅色字串,如不滿意標籤按鈕的寬度,可自行調整 200 這個數值。

由於每個網站的範本都不同、文章區塊的寬度也不一樣,如果發現 "讚" 或統計數字被擠到下一行(或使用了自訂的 "讚" 圖示),可能需要改兩個地方:
  • /* 文章標題 */ 這個區間,紅色字串的寬度百分比 75% 請自行調整。
  • /* 讚區塊 */ 這個區間,紅色字串的寬度百分比 20% 請自行調整。

現在可以將文章發佈,接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能),提供訪客有很好的導覽效果。

如果有 CSS 基礎概念的話,那麼可以自行修改參數,讓自己的文章列表有截然不同的風貌,可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結,請按下面的按鈕:




三、注意事項


根據這篇「官方說明文件」,標籤的名稱不得使用以下字元:

&<>@!+,

如果使用本篇的工具而執行不正常時,請先仔細檢查一下標籤的名稱是否誤用了以上紅字的字元。


文章列表極速版各版本:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP