原始網址:Beautiful New Page Navi For Blogger With Scroll
第一步:進入Blogger的控制台內,先進行修改前的範本備份工作
第二步:修改範本的HTML原始碼
第三步:尋找下列原始碼所在
]]></b:skin>
在上方加入以下內容:
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVdHlOaYqwzJMjXHl59KFZDVZt9KeBfqOk5LrinprNhLaGYGto-i8mm1fm2RXNGFJw096GwqL0sv_CJ45_mK-ZuRqRWe70QQro1hZqjM0WIvSjDFsPSh4aZKGJG4VDoG8NbkUcRVcCVzw/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
第四步:搜尋
</body>
在上方加入下列原始碼
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=8; //此行為每頁要顯示的文章數,最好與Blogger裡的設定數量一致
var numshowpage=7; //此為捲軸上要呈現的按鈕數
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
第五步:搜尋
'data:label.url'
取代成
'data:label.url + "?&max-results=8"'
其中8這個數字,為選擇文章分類時每頁出現的文章數。
不過以上效果,在單篇文章下是沒有作用的。
阿輝老師您好~~
回覆刪除請問一下,我照上面將教學語法成功顯示數字分頁後,這幾天沒有更動範本的情況下,突然無法顯示數字分頁,創新的網頁測試結果也一樣,
是因為Blogger問題呢?還是有可能哪裡出錯了? 感謝
今早才發現自己的Blogger也是一樣,被回復到以前的樣子了,有時間再看看。
刪除果然 哭哭了 ~~ 感謝老師回覆呀! 期待能解決問題!
刪除請問..這個功能目前還有辦法使用嗎?
回覆刪除我語法都正確卻顯示不出這功能...還是我文章數太少原因??
要幾篇才有辦法讓這功能顯示??