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

---

提示 :
1. 本數字分頁(功能)的效果樣式: 

2. 進行安裝此小工具之前請您先將你的Blogger Blog主題作備份。(備份的方法)

安裝此小工具的方法 :

Step 1. 登入您的Blogger Blog；

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

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

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

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

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

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

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

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

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

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

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=7;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends →

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

Step 12. 完成。 

應用說明 :
您可以自行編定所增加的數字分頁其外觀效果

a. 在 ]]></b:skin> 程式碼上方所貼上的這些程式碼，是定義數字分頁頁面導航外觀的CSS部分。您可以根據需要對其進行修改。

b. 程式碼 :  var pageCount=7;
此代碼訂定每頁顯示的文章數量為7篇，將數字 7 改成 5 將會每頁顯示的文章數量為5篇。

c. 程式碼 :  var displayPageNum=6;
此代碼決定在分頁頁面上所顯示的頁面導航號碼的數量。 數字 6，表示分頁頁面上所顯示的頁面導航號瑪數量有六個。

d. 程式碼 :
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
這兩行程式碼訂定分別顯示前一頁和下一頁的文本。 


以上 / The End.

---