► Blogger加上分頁列的小教學
BLOGGER一向沒有文章分頁，試了幾個網上不同的版本，我覺得這一個比較容易用。
因為不需要開HTML來改，而只是開 -
[設定]→[版面配置]→[新增小工具]→[HTML/JAVASCRIPT]
再貼上以下的CODE :
<style>
.showpageArea {
font: 13px/36px Arial,Times New Roman,Times,serif;
overflow: hidden;
text-align: center; text-decoration: none;
width: 100%;
}
.showpageArea a,.showpageNum a {
border: 1px solid #CFE0EA;
color: #555;
margin: 2px;
padding: 3px 8px;
text-decoration: none;
}
.showpageArea a:hover,.showpageNum a:hover,.showpageNum a:hover {
background:#54748E;
color: #FFF;
}
.showpagePoint {
background:#FFF;
border: 1px solid #CCC;
color: #454545;
font-weight: bold;
padding: 3px 8px; margin: 2px;
text-decoration: none;
}
.showpage a:hover {
background:#54748E;
color: #FFF;
}
</style>
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=5; //首頁顯示的數量，和系統設定要一樣
var displayPageNum=3; //按鈕數量
var upPageWord ='上一頁'; //上一頁按鈕(可以改成PREV)
var downPageWord ='下一頁'; //下一頁按鈕(可以改成NEXT)
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';var upPageHtml ='';
var downPageHtml ='';
htmlMap[htmlMap.length]='/';
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span style="padding: 3px 8px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">頁面 '+thisNum+' / '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
htmlMap[htmlMap.length]=labelHtml;
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
itemCount++;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>'; }else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>
接著再按[儲存排列方式]就成了。
當然如果你想頁數的顏色和連結時的顏色有變的話，可以改CSS!!!改三欄簡易的吧!?
你貼好儲存之後，有CLICK開這個加了程序碼的HTML/JAVASCRIPT格仔，在剛才你貼上的的文字中，同時接電腦的KEYBOARD "CTRL+F"，搜尋這關鍵字 : - hover
你會見到
1.)
.showpageArea a:hover,.showpageNum a:hover,.showpageNum a:hover {
background:#54748E;
color: #FFF;
這是改變你CLICK下去數字時會變的[字色]和[底色]
改了它就變成你想要的色!!
上面那種下少少會見到這一組
2.)
.showpage a:hover {
background:#54748E;
color: #FFF;
這是控制[上一頁/PREV] 及[下一頁/NEXT] 的[字色]和[底色]
另外，到頁數列外框的位置，在改hover 的1. 上一組就是了；
.showpageArea a,.showpageNum a {
border: 1px solid #CFE0EA;
color: #555;
margin: 2px; padding: 3px 8px;
text-decoration: none;
這是格線色和字色
想找顏色的HTML碼，可以來這裡 http://html-color-codes.info/ ，記緊只是改動#和;之間的數子。
其實整個頁數列的字體大少、字型都可以改，不過對不懂HTML的人來說，火星文看少一點會比較舒服，所以改這三點，應該足以襯到自己BLOG的色調囉~
試試吧!!!
參巧來自:
http://sofree.cc/blogger-pagebar/ 及
http://01mistery.blogspot.com/2009/02/page-navigation-menu.html
因為不需要開HTML來改，而只是開 -
[設定]→[版面配置]→[新增小工具]→[HTML/JAVASCRIPT]
再貼上以下的CODE :
<style>
.showpageArea {
font: 13px/36px Arial,Times New Roman,Times,serif;
overflow: hidden;
text-align: center; text-decoration: none;
width: 100%;
}
.showpageArea a,.showpageNum a {
border: 1px solid #CFE0EA;
color: #555;
margin: 2px;
padding: 3px 8px;
text-decoration: none;
}
.showpageArea a:hover,.showpageNum a:hover,.showpageNum a:hover {
background:#54748E;
color: #FFF;
}
.showpagePoint {
background:#FFF;
border: 1px solid #CCC;
color: #454545;
font-weight: bold;
padding: 3px 8px; margin: 2px;
text-decoration: none;
}
.showpage a:hover {
background:#54748E;
color: #FFF;
}
</style>
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=5; //首頁顯示的數量，和系統設定要一樣
var displayPageNum=3; //按鈕數量
var upPageWord ='上一頁'; //上一頁按鈕(可以改成PREV)
var downPageWord ='下一頁'; //下一頁按鈕(可以改成NEXT)
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';var upPageHtml ='';
var downPageHtml ='';
htmlMap[htmlMap.length]='/';
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span style="padding: 3px 8px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">頁面 '+thisNum+' / '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
htmlMap[htmlMap.length]=labelHtml;
postNum++;
for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
itemCount++;
}
var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};
for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>'; }else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>
接著再按[儲存排列方式]就成了。
當然如果你想頁數的顏色和連結時的顏色有變的話，可以改CSS!!!改三欄簡易的吧!?
你貼好儲存之後，有CLICK開這個加了程序碼的HTML/JAVASCRIPT格仔，在剛才你貼上的的文字中，同時接電腦的KEYBOARD "CTRL+F"，搜尋這關鍵字 : - hover
你會見到
1.)
.showpageArea a:hover,.showpageNum a:hover,.showpageNum a:hover {
background:#54748E;
color: #FFF;
這是改變你CLICK下去數字時會變的[字色]和[底色]
改了它就變成你想要的色!!
上面那種下少少會見到這一組
2.)
.showpage a:hover {
background:#54748E;
color: #FFF;
這是控制[上一頁/PREV] 及[下一頁/NEXT] 的[字色]和[底色]
另外，到頁數列外框的位置，在改hover 的1. 上一組就是了；
.showpageArea a,.showpageNum a {
border: 1px solid #CFE0EA;
color: #555;
margin: 2px; padding: 3px 8px;
text-decoration: none;
這是格線色和字色
想找顏色的HTML碼，可以來這裡 http://html-color-codes.info/ ，記緊只是改動#和;之間的數子。
其實整個頁數列的字體大少、字型都可以改，不過對不懂HTML的人來說，火星文看少一點會比較舒服，所以改這三點，應該足以襯到自己BLOG的色調囉~
試試吧!!!
參巧來自:
http://sofree.cc/blogger-pagebar/ 及
http://01mistery.blogspot.com/2009/02/page-navigation-menu.html