為 Blogger Blog 建立數字分頁(樣式一)

---

有些 Blogger 其變更網頁的模式為「<   首頁   >」, 或是「首頁   較舊文章」。這種方式雖然簡便，但是不方便跨頁選擇，如果Blogger的文章數及網頁數多了，將難以操作。

數字分頁的架構可讓使用者容易選擇Blogger頁面及選擇文章。

建立Blogger數字分頁的方法 :

a. 請您先將你的Blogger主題作備份。(備份的方法)
b. 效果樣式:

1. 登入Blogger；

2. 點選Blogger控制台版面的「主題」項目，並再點選主題的 " 編輯HTML "；

3. 將電腦滑鼠點擊所開啟的HTML頁面內(任何位置皆可)；

4. 按壓電腦鍵盤上的 CTL + F 兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；

5. 使用電腦鍵盤在此搜尋欄框內輸入 ]]></b:skin>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 ]]></b:skin> 內容段；

6. 將如下的程式碼拷貝張貼到 ]]></b:skin> 的上方

/* Home Share
----------------------------------------------- */
.home-share {margin:6px auto 0;padding:0 auto;text-align:left}
.home-share a {text-decoration:none;}
.facebook-home i, .twitter-home i, .gplus-home i, .linkedin-home i {padding:0;margin-right:15px;-webkit-transition: color 3s ease-in-out;-moz-transition: color 0.3s ease-in-out;-ms-transition: color 0.3s ease-in-out;-o-transition: color 0.3s ease-in-out;transition: color 0.3s ease-in-out;}
.facebook-home i {color:#3b5998;}
.twitter-home i {color:#00aced;}
.gplus-home i {color:#dd4b39;}
.linkedin-home i {color:#007bb6;}
.facebook-home i:hover, .twitter-home i:hover, .gplus-home i:hover, .linkedin-home i:hover {color:#333;}

/* Homepage Thumbnail
----------------------------------------------- */
.homepage-thumbnail {clear:both;position:relative;margin:0 20px 0 0;width:200px;height:200px;float:left;}
.homepage-thumbnail img {width:200px;height:200px;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
.homepage-thumbnail img:hover {opacity:0.7;filter: alpha(opacity=70);}

/* Page Navigation
----------------------------------------------- */
.displaypageNum a, .showpage a, .pagecurrent {font:$headerfont;font-weight:400;font-size:16px;padding:8px 12px;margin-right:4px;color:#fff;background:#3481b8;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition: all 0.3s ease-in;}
.displaypageNum a:hover, .showpage a:hover, .pagecurrent {background:$pagenumbercolor;text-decoration:none;color:#000;}
.showpageOf, .firstpage, .lastpage {display:none!important}

/* Status Msg Wrap
----------------------------------------------- */
.status-msg-wrap {font-size:14px;font-weight:400;width:100%;margin:0px auto;}
.status-msg-body {padding:10px 2%;width:96%;}
.status-msg-border {border:1px solid $bordercolor!important;border-width:0 0 1px 0!important;opacity:10;width:auto;}
.status-msg-bg {background-color:#fff;}
.status-msg-hidden {padding:10px 2%;}

7. 將電腦滑鼠點擊所開啟的HTML頁面內(任何位置皆可)；

8. 按壓電腦鍵盤上的CTL + F兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；

9. 使用電腦鍵盤在此搜尋欄框內輸入 </body>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 </body> 內容段；

10. 將如下的程式碼拷貝張貼到 </body> 的上方

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='?';
var nextText ='?';
var urlactivepage=location.href;
var home_page="/";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5(18 O=="1a"){O="1w"}5(18 P=="1a"){P="1x"}6 L;6 o;6 m;6 u;1b();F 1c(f){6 d="";M=N(Q/2);5(M==Q-M){Q=M*2+1}E=m-M;5(E<1){E=1}i=N(f/p)+1;5(i-1==f/p){i=i-1}G=E+Q-1;5(G>i){G=i}d+="<4 7=\'1y\'>1z "+m+" 1A "+i+"</4>";6 e=N(m)-1;5(m>1){5(o=="r"){d+=\'<4 7="1d 1e"><a 9="\'+C+\'">\'+O+"</a></4>"}j{d+=\'<4 7="k 1e"><a 9="/v/w/\'+u+"?&l-s="+p+\'">\'+O+"</a></4>"}}5(m>2){5(m==3){5(o=="r"){d+=\'<4 7="1d"><a 9="\'+C+\'">\'+R+"</a></4>"}j{d+=\'<4 7="k"><a 9="/v/w/\'+u+"?&l-s="+p+\'">\'+R+"</a></4>"}}j{5(o=="r"){d+=\'<4 7="k"><a 9="#" x="H(\'+e+\');y z">\'+R+"</a></4>"}j{d+=\'<4 7="k"><a 9="#" x="I(\'+e+\');y z">\'+R+"</a></4>"}}}5(E>1){5(o=="r"){d+=\'<4 7="k"><a 9="\'+C+\'">1</a></4>\'}j{d+=\'<4 7="k"><a 9="/v/w/\'+u+"?&l-s="+p+\'">1</a></4>\'}}5(E>2){d+=" ... "}1f(6 g=E;g<=G;g++){5(m==g){d+=\'<4 7="1B">\'+g+"</4>"}j{5(g==1){5(o=="r"){d+=\'<4 7="k"><a 9="\'+C+\'">1</a></4>\'}j{d+=\'<4 7="k"><a 9="/v/w/\'+u+"?&l-s="+p+\'">1</a></4>\'}}j{5(o=="r"){d+=\'<4 7="k"><a 9="#" x="H(\'+g+\');y z">\'+g+"</a></4>"}j{d+=\'<4 7="k"><a 9="#" x="I(\'+g+\');y z">\'+g+"</a></4>"}}}}5(G<i-1){d+="..."}5(G<i){5(o=="r"){d+=\'<4 7="k"><a 9="#" x="H(\'+i+\');y z">\'+i+"</a></4>"}j{d+=\'<4 7="k"><a 9="#" x="I(\'+i+\');y z">\'+i+"</a></4>"}}6 a=N(m)+1;5(m<(i-1)){5(o=="r"){d+=\'<4 7="k"><a 9="#" x="H(\'+a+\');y z">\'+1g+"</a></4>"}j{d+=\'<4 7="k"><a 9="#" x="I(\'+a+\');y z">\'+1g+"</a></4>"}}5(m<i){5(o=="r"){d+=\'<4 7="k 1h"><a 9="#" x="H(\'+i+\');y z">\'+P+"</a></4>"}j{d+=\'<4 7="k 1h"><a 9="#" x="I(\'+i+\');y z">\'+P+"</a></4>"}}6 c=D.1C("1D");6 b=D.1E("1F-1G");1f(6 h=0;h<c.S;h++){c[h].1i=d}5(c&&c.S>0){d=""}5(b){b.1i=d}}F 15(a){6 c=a.1j;6 b=N(c.1H$1I.$t,10);1c(b)}F 1b(){6 a=B;5(a.n("/v/w/")!=-1){5(a.n("?T-l")!=-1){u=a.J(a.n("/v/w/")+14,a.n("?T-l"))}j{u=a.J(a.n("/v/w/")+14,a.n("?&l"))}}5(a.n("?q=")==-1&&a.n(".1J")==-1){5(a.n("/v/w/")==-1){o="r";5(B.n("#K=")!=-1){m=B.J(B.n("#K=")+8,B.S)}j{m=1}D.1k(\'<A U="\'+C+\'V/W/X?l-s=1&Y=Z-11-A&12=15"><\\/A>\')}j{o="w";5(a.n("&l-s=")==-1){p=1K}5(B.n("#K=")!=-1){m=B.J(B.n("#K=")+8,B.S)}j{m=1}D.1k(\'<A U="\'+C+"V/W/X/-/"+u+\'?Y=Z-11-A&12=15&l-s=1" ><\\/A>\')}}}F H(a){13=(a-1)*p;L=a;6 b=D.1l("1m")[0];6 c=D.1n("A");c.1o="1p/1q";c.1r("U",C+"V/W/X?1s-1t="+13+"&l-s=1&Y=Z-11-A&12=16");b.1u(c)}F I(a){13=(a-1)*p;L=a;6 b=D.1l("1m")[0];6 c=D.1n("A");c.1o="1p/1q";c.1r("U",C+"V/W/X/-/"+u+"?1s-1t="+13+"&l-s=1&Y=Z-11-A&12=16");b.1u(c)}F 16(c){17=c.1j.1L[0];6 a=17.1v.$t.J(0,19)+17.1v.$t.J(1M,1N);6 d=1O(a);5(o=="r"){6 b="/v?T-l="+d+"&l-s="+p+"#K="+L}j{6 b="/v/w/"+u+"?T-l="+d+"&l-s="+p+"#K="+L}1P.9=b};',62,114,'||||span|if|var|class||href|||||||||lastPageNo|else|displaypageNum|max|currentPageNo|indexOf|currentPage|perPage||page|results||postLabel|search|label|onclick|return|false|script|urlactivepage|home_page|document|pageStart|function|pageEnd|redirectpage|redirectlabel|substring|PageNo|noPage|pageNumber|parseInt|firstText|lastText|numPages|prevText|length|updated|src|feeds|posts|summary|alt|json||in|callback|jsonstart||totalcountdata|finddatepost|post|typeof||undefined|pagecurrentg|looppagecurrentg|showpage|firstpage|for|nextText|lastpage|innerHTML|feed|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|published|First|Last|showpageOf|Page|of|pagecurrent|getElementsByName|pageArea|getElementById|blog|pager|openSearch|totalResults|html|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>
</b:if>
</b:if>
</b:if>
<!--Page Navigation Ends -->

11. 以上動作確認無誤後，點擊HTML版面區域左上方位的 儲存主題；

12. 完成。

應用說明 :
您可以自行編定所增加的數字分頁其外觀效果，將所附加的程式碼 /* Page Navigation 之下的內容

1. color:#fff
此顏色碼為分頁數字的顏色，#fff 為白色，你可將其更改為你意向的顏色。

2. background:#3481b8
此顏色碼為分頁數字的方框顏色，#3481b8為淡藍色，你可將其更改為你意向的顏色。

3. color:#000
此顏色碼為被點選的分頁數字的顏色，#000為黑色，你可將其更改為你意向的顏色。

注 意 :
本程式預設定每一Blogger頁面所顯示的文章數為7篇，如果你的Blogger目前所設定的數字不是7篇文章數，請將其設定為顯示文章數為7篇，或是更改以上的程式碼，將 var perPage=7 其中的7更改為你的數字。

---