2014年3月31日

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

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




三、注意事項


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

&<>@!+,

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


文章列表極速版各版本:

13 則留言:

  1. 版主你好, 再次推出"文章列表"強化版, 更配上"閃爍"文字特效, 效果一流. ^_^

    參閱了 CSS 的部份, 有小小建議提供.
    .tocLabelNewText 跟 .tocNewText 同樣是呼叫子程序 "color-change",
    那麼子程序 "color-change" 只需要一個已經足夠.
    e.g.
    .tocLabelNewText { ....中間簡約....
    -webkit-animation: color-change 1s infinite alternate ease-in-out;
    ....中間簡約....}
    .tocNewText { ....中間簡約....
    -webkit-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;}}

    再者, .tocLabelNewText 跟 .tocNewText 裡頭的 "color: #990000" 不用屏蔽,
    因為, 還有一些瀏覽器是不支援 "keyframes" 這個 CSS3 指令的,
    不指定一個色彩給它, 便會出現預設值, 即是"黑"色.

    言身寸 言身寸 你的用心程式分享.

    回覆刪除
  2. <4738064904609044198>(以上內容請勿刪除,從括號之後開始留言)謝謝指教!因為對 CSS3 不熟,所以您當初留的 CSS 碼就胡亂複製了,經說明後,現已了解並更正本文 CSS 的部份~ :D

    回覆刪除
  3. Wayne您好:不好意思又要來麻煩請教您了!我將此篇裡面 " !!NEW!! " 的CSS運用在我的http://www.hairblog.tw/2014/12/2015HairstyleCollection.html這篇文章內,效果有了,可是文字跳了一行下來(不能接在1/9後面)想請問一下我是不是哪裡弄錯了?謝謝喔^^

    回覆刪除
  4. <5403969278205895480>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁,NEW 字樣的 html 碼是 "<span class="tocLabelNewText">NEW</span>" → span 是行內樣式

    整個文章標題「橙紅色系列髮色+瀏海過直燙彎處理1/9」用了 ul li,這是區塊樣式,所以 span 就會被擠到下一行了。

    以上概念可以 google 一下相關的 CSS 教學。要讓 span 跟 ul li 同一個區塊,你得將 "<span class="tocLabelNewText">NEW</span>" 放在 </li> 的前面。

    回覆刪除
  5. <1786979381900102383>(以上內容請勿刪除,從括號之後開始留言)我試了也找過還是搞不懂要怎麼用= =我試著將 "NEW" 這段 放在 li 的前面還是不行耶= =
    另外一個問題,程式碼中的O行需要進行分流嗎??謝謝你

    回覆刪除
  6. <756577150553281075>(以上內容請勿刪除,從括號之後開始留言)[quote]放在 li 的前面還是不行耶[/quote]
    再檢查一下,我說的是 </li> 前面,不是 <li> 前面喔

    [quote]程式碼中的O行需要進行分流嗎?[/quote]
    js 檔分流才能避免哪天被限流量. 這篇文章是在 google drive 發生限速之前寫的,所以才沒出現提醒分流的敘述 ^^

    回覆刪除
  7. <3850418100825854496>(以上內容請勿刪除,從括號之後開始留言)呵呵!我已經放了還是一樣耶= =
    瞭解!我在做一下分流!我把您的功能加上了分頁http://www.hairblog.tw/2013/01/ArticleNavigation.html分頁功能超好用^^

    回覆刪除
  8. <931379923695395269>(以上內容請勿刪除,從括號之後開始留言)[quote]我已經放了還是一樣耶[/quote]看了你的網頁,原來你按了 Enter,所以被換行了。在 Blogger 文章編輯器要注意,若勾選了「按下 Enter 鍵可建立換行符號」,只要文字有換行,呈現出來的效果就是會換行 → 這一點跟範本之內的 html 碼是不同的。

    [quote]我把您的功能加上了分頁[/quote]
    依日期排列、依標籤排列的文章列表,做成分頁的的效果真的不錯 ^^

    回覆刪除
  9. <485018096879029033>(以上內容請勿刪除,以下引言請自行刪減) [quote]看了你的網頁,原來你按了Enter,所以被換行了。[/quote]
    我刪除了,問題依舊= =鬼遮眼了嗎?哈哈

    [quote]依日期排列、依標籤排列的文章列表,做成分頁的的效果真的不錯 ^^[/quote]真的!超喜歡這個效果^^感謝您的分享,我將它發揚了!!哈哈

    回覆刪除
  10. <2571333431628404630>(以上內容請勿刪除,從括號之後開始留言)ken 我看你要開始練習用「Chrome 開發人員工具」來解決這類的問題了,你可以練習把 NEW 的 HTML 碼移到別的位置,來找出問題所在。

    這一題我可以先告訴你答案,我剛試的結果,NEW 放到哪裡都會跑到下一行,看來是因為 NEW 的寬度不夠上一行放,所以都會被擠到下一行。

    不過你還是可以練習放在別的位置,來測試各種效果,可以更瞭解 HTML/CSS。

    回覆刪除
  11. <1625179745353934907>(以上內容請勿刪除,從括號之後開始留言)哈哈,瞭解了^^也謝謝你喔!!我會認真練習的^^呵呵

    回覆刪除
  12. <2672281734999610694>(以上內容請勿刪除,從括號之後開始留言)後來發現,我把你的 new 貼在很短的地方也會斷行。原來 .tocLabelNewText 的第一個項目為 display: table-cell; → 因為這篇文章列表的環境必須這麼設定,讓每個部分都是 table 格式。

    因為你只取 new 這一塊去用, 結果 display: table-cell 讓 new 變成了 table,所以你把第一個項目刪除,new 就能變成行內了(table 會變成區塊)。

    回覆刪除
  13. <9076646635046755290>(以上內容請勿刪除,從括號之後開始留言)大感謝,已經順利解決了^^

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。