Blogger的美化─加入頁次跳頁

官方的型版，及許多非官方的型版並沒有提供頁次的功能，不過有許多功力高深的網友開發了許多套件給有需要的朋友加裝。

1. 第一種除了可以顯示上一頁，下一頁之外，還多了第一頁、最末頁和跳頁功能。
   
   
   
   
   
   • 請先備份原有的模版。
   • 後台 → 範本→修改html→勾選「展開小裝置範本」。
   • 搜尋到 <b:include name='nextprev'/> 這組程式碼，並且以底下的這組程式碼替換。
     
     <b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"><
/span>
</form>
</div>

<script type="text/javascript">
var blogID = "123456789";
var home_page = "http://www.xavierliu.com/";
var pager_max_main = 10;
var pager_first_text = "第一頁";
var pager_last_text = "最末頁";
var pager_prev_text = "上一頁";
var pager_next_text = "下一頁";
</script>

<script src="http://sites.google.com/site/xavierliu123/Home/blogger_pager_script_v20.txt"
type="text/javascript"></script>

</b:if>

     
   • 上面藍色的程式碼是表控制這個頁次的CSS，大家可以按照自己的風格來做修改。
     紅色的程式碼是最重要的部份，不能正常顯示通常是這裡沒有設定好。
     var blogID：輸入你的blogID (進入後台後，網址列中的blogID=數字 )
     var home_page：填入部落格網址
     var pager_max_main：每頁幾篇文章（要與後台→版面配置→網誌文章小工具的設定一致）
     
     以下部分可以自行修改相關對應文字
     var pager_first_text = "第一頁";
     var pager_last_text = "最末頁";
     var pager_prev_text = "上一頁";
     var pager_next_text = "下一頁";
   • 先預覽，如果出現了頁次的功能，就可以點選儲存範本。


2. 接下來介紹的是由 Abu Farhan 所開發的套件，有許多不同的風格可以挑選，我只列出其中幾種，有興趣的朋友可以自行連結到 Abu Farhan 的網站去尋寶。
   
   
   
   
   .showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

]]></b:skin>

   
   
   
   .showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaO5QOnAkr6CSVhY575TUkJrwwTTEFCrwU6IwdJqO3N5ypm45mGy0Ie5L2DkSUpAXgVkh8RoI88waqQ4_PurONB1tIzMtjjBXpgfV54dFGiDxeGZSc8SKtyqtwGfN6J_s1Z72ubmeinU4/s1600/wp1.jpg) 0 -50px repeat-x;
}

.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaO5QOnAkr6CSVhY575TUkJrwwTTEFCrwU6IwdJqO3N5ypm45mGy0Ie5L2DkSUpAXgVkh8RoI88waqQ4_PurONB1tIzMtjjBXpgfV54dFGiDxeGZSc8SKtyqtwGfN6J_s1Z72ubmeinU4/s1600/wp1.jpg) 0 -25px repeat-x;
}

.showpageOf{
margin:0 8px 0 0;
}

.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaO5QOnAkr6CSVhY575TUkJrwwTTEFCrwU6IwdJqO3N5ypm45mGy0Ie5L2DkSUpAXgVkh8RoI88waqQ4_PurONB1tIzMtjjBXpgfV54dFGiDxeGZSc8SKtyqtwGfN6J_s1Z72ubmeinU4/s1600/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}
]]></b:skin>

   
   
   
   .blog-pager,#blog-pager{
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:12px;
width:500px;
}
.showpageNum a,.showpage a {
background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;
border:1px solid #97a7af;
margin:0px 1px 0 1px;padding:3px 8px;
text-decoration:none;
color:#333;line-height:14px;cursor:pointer;white-space:nowrap;
-webkit-border-radius:3px;-moz-border-radius:3px;
}
.showpageNum a:hover,.showpage a:hover {
background-image:url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png');
border:1px solid #e4905a;color:#e4905a;text-decoration:none;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png') repeat-x;
margin:0 3px 0 3px;padding:3px 8px;
line-height:14px;cursor:pointer;white-space:nowrap;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold;
}
]]></b:skin>

   
   
   
   .blog-pager,#blog-pager{
font-size: 0.6em;font-family:verdana;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border:1px solid #FFF;
background: #FFF; text-decoration: none;
width:500px;
}
.showpageNum a,.showpage a {
color: #693;
text-decoration: underline;
border: 1px solid #E3E3E3;
text-decoration: none;
padding: 0.2em 0.5em;
}
.showpageNum a:hover,.showpage a:hover {
border: 1px solid #693;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
border: 1px solid #693;
padding: 0.2em 0.5em;
font-weight: bold;
background: #693; color: #FFF;
]]></b:skin>

   
   1. 請先備份原有的模版。
   2. 後台 → 範本→修改html→不要勾選「展開小裝置範本」。
   3. 複製選定風格鈕的程式碼  
   4. 取代 ]]></b:skin> 
   5. 接著再找到 </body>
   6. 並且以下面列出的程式碼完整取代。
   
   <script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
</body>

   
   紅色那組是決定一頁要出現幾篇文章，這要與後台→版面配置→網誌文章小工具裡的設定一致。
   藍色那組則是決定一次出現幾個頁次
   

   接下來要展開「小裝置範本」

   找到 
   'data:label.url' 

   換成 
   

   'data:label.url + "?&max-results=7"'

   7. 其中 results=7 要與前面 var postperpage=7 的數值一致。
   8. 先點選「預覽」，如果順利出現頁次的話，就可以點選「儲存範本」收工了。

參考來源：Abu Farhan、chanel【X】