參考網路上大家分享的資料
加上了完整的網誌文章列表~
特地寫這篇是想回饋社會
一直以來沒有資工基礎的我
想擁有版面清爽的網誌而選擇blogger
所有元件都是從網上搜 幾年下來也有點前端的概念了
感謝素昧平生的各位大大(鞠躬)
現在再寫一篇更更更無痛上手的版本
希望能幫助到比我還不熟悉工程語法的站主
我很滿意目前使用的文章列表版本
html和css使用WFU BLOG Blogger調教資料庫這篇
裡面有提到因為google drive關閉外連功能
文章內提供的 js檔必須 另外找空間放
於是我又用這篇的方法
[小工具] 徹底解決網站外連空間問題﹍幫 Google Drive 的 JS 檔買保險
將WFU大大的JS檔放到我的dropbox得到有效的js連結如下:
https://dl.getdropbox.com/s/3ejfdei0ykrx58i/toc-date-sonic-min-140301.js
加上自己微弱的css編輯能力
調整出喜歡的清爽配色 成果請看
所有文章
總而言之呢 我的code是長下面這樣 程式部分:
<div id="TOC-date"> </div> <script> var tocDate = {}; tocDate.loadNumber = 50; tocDate.loadMoreText = "載入更多"; tocDate.loadAllText = "載入全部"; tocDate.toggleEffect = "fadeToggle"; tocDate.month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; (function () { var url = "https://dl.getdropbox.com/s/3ejfdei0ykrx58i/toc-date-sonic-min-140301.js", script = document.createElement("script"); script.src = url; document.documentElement.firstChild.appendChild(script); } )(); </script>
css部分調整成這樣:
<style> .tocYearTitle { /* 年份按鈕 */ display: inline-block; float: left; width: 50px; padding: 5px; font-size: 16px; text-align: center; cursor: pointer; color: #ffffff; font-family: Arial, sans-serif; font-weight: normal; text-decoration: none; text-shadow: 0px 0px 0px #ffffff; -moz-box-shadow: 0px 0px 0px 0px #ffffff; -webkit-box-shadow: 0px 0px 0px 0px #ffffff; box-shadow: 0px 0px 0px 0px #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99)); background: -moz-linear-gradient(top, #B0C4DE 5%, #B0C4DE 100%); background: -webkit-linear-gradient(top, #B0C4DE 5%, #B0C4DE 100%); background: -o-linear-gradient(top, #B0C4DE 5%, #B0C4DE 100%); background: -ms-linear-gradient(top, #B0C4DE 5%, #B0C4DE 100%); background: linear-gradient(to bottom, #B0C4DE 5%, #B0C4DE 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B0C4DE', endColorstr='#B0C4DE',GradientType=0); background-color: #B0C4DE; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .tocYearTitle:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #A9A9A9), color-stop(1, #A9A9A9)); background: -moz-linear-gradient(top, #A9A9A9 5%, #A9A9A9 100%); background: -webkit-linear-gradient(top, #A9A9A9 5%, #A9A9A9 100%); background: -o-linear-gradient(top, #A9A9A9 5%, #A9A9A9 100%); background: -ms-linear-gradient(top, #A9A9A9 5%, #A9A9A9 100%); background: linear-gradient(to bottom, #A9A9A9 5%, #A9A9A9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A9A9A9', endColorstr='#A9A9A9',GradientType=0); background-color:#A9A9A9; } .tocYearTitle:active { position: relative; top: 1px; } .tocYear { /* 年份區塊 */ margin: 10px 10px 10px; } .tocYearToggle { /* 年份收合區塊 */ margin-left: 80px; } .tocMonthTitle { /* 月份按鈕 */ display: inline-block; font-size: 16px; font-family: Arial, sans-serif; font-weight: normal; color: #808080; cursor: pointer; margin: 5px 0px 5px; text-shadow: 0px 0px 0px #ffffff; } .tocMonthTitle:hover { text-shadow: 0 0 0px #ffffff; } .tocMonthTitle:active { position: relative; top: 1px; } .tocMonthToggle { /* 月份收合區塊 */ margin-bottom: 10px; } .tocDayNo { /* 日期 */ float: left; font-size: 16px; line-height: 1.6em; } .tocPostTitle { /* 文章標題 */ margin-left: 35px; font-size: 16px; line-height: 1.6em; } #tocMore { /* 載入按鈕區塊 */ margin: 40px 0px 40px 100px; } .tocMore { /* 載入按鈕 */ display: inline-block; margin-right: 50px; width: 80px; padding: 10px; cursor: pointer; color: #ffffff; font-family: arial, "微軟正黑體"; font-size: 16px; font-weight: normal; text-align: center; -moz-box-shadow: 0px 0px 0px 0px #ffffff; -webkit-box-shadow: 0px 0px 0px 0px #ffffff; box-shadow: 0px 0px 0px 0px #ffffff; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #A9A9A9), color-stop(1, #A9A9A9)); background:-moz-linear-gradient(top, #A9A9A9 5%, #A9A9A9 100%); background:-webkit-linear-gradient(top, #A9A9A9 5%, #A9A9A9 100%); background:-o-linear-gradient(top, #A9A9A9 5%, #A9A9A9 100%); background:-ms-linear-gradient(top, #A9A9A9 5%, #A9A9A9 100%); background:linear-gradient(to bottom, #A9A9A9 5%, #A9A9A9 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#A9A9A9', endColorstr='#A9A9A9',GradientType=0); background-color:#A9A9A9; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; text-decoration:none; text-shadow:0px 0px 0px #ffffff; } .tocMore:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #DCDCDC), color-stop(1, #DCDCDC)); background:-moz-linear-gradient(top, #DCDCDC 5%, #DCDCDC 100%); background:-webkit-linear-gradient(top, #DCDCDC 5%, #DCDCDC 100%); background:-o-linear-gradient(top, #DCDCDC 5%, #DCDCDC 100%); background:-ms-linear-gradient(top, #DCDCDC 5%, #DCDCDC 100%); background:linear-gradient(to bottom, #DCDCDC 5%, #DCDCDC 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#DCDCDC',GradientType=0); background-color:#bab1ba; } .tocMore:active { position:relative; top:1px; } #tocInfo { /* 資訊區塊 */ text-align: left; margin-top: 40px; font-family: arial, sans-serif; font-size: 11px; padding-top: 5px; border-top: 1px solid #e9eaed; } #tocInfo a { color: #bbb; text-decoration: none; } </style>ps:如何在Blogger文章顯示程式碼教學
如果也喜歡我的版本
就複製代碼 開一篇新文章以html模式下貼上 發佈
這篇文章就是你網誌的所有文章列表囉
以上簡單教學 希望有幫助到某個工程小白
再多也別問我了我絕對不會的~
感謝你的文章,我終於成功了
回覆刪除耶太好了~很高興幫到你
刪除謝謝你的文章,我用了,很好用..感謝!!
回覆刪除請問您?我的文章為什麼別人無法找到!謝謝您
回覆刪除