2017年9月23日 星期六

blogger技巧分享~所有文章列表

參考網路上大家分享的資料

加上了完整的網誌文章列表~



特地寫這篇是想回饋社會

一直以來沒有資工基礎的我  

想擁有版面清爽的網誌而選擇blogger

所有元件都是從網上搜  幾年下來也有點前端的概念了

感謝素昧平生的各位大大(鞠躬)

現在再寫一篇更更更無痛上手的版本

希望能幫助到比我還不熟悉工程語法的站主






我很滿意目前使用的文章列表版本

html和css使用WFU BLOG Blogger調教資料庫這篇

Blogger 文章列表極速版﹍(1) 依日期排列


裡面有提到因為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模式下貼上  發佈

這篇文章就是你網誌的所有文章列表囉

以上簡單教學  希望有幫助到某個工程小白

再多也別問我了我絕對不會的~



3 則留言:

  1. 感謝你的文章,我終於成功了

    回覆刪除
    回覆
    1. 耶太好了~很高興幫到你

      刪除
  2. 謝謝你的文章,我用了,很好用..感謝!!

    回覆刪除