November 10, 2011

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. 並且以下面列出的程式碼完整取代。

    7. &lt;script type='text/javascript'&gt;
      var home_page=&quot;/&quot;;
      var urlactivepage=location.href;
      var postperpage=7;
      var numshowpage=4;
      var upPageWord ='Prev';
      var downPageWord ='Next';
      &lt;/script&gt;
      &lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;
      </body>

      紅色那組是決定一頁要出現幾篇文章,這要與後台→版面配置→網誌文章小工具裡的設定一致。
      藍色那組則是決定一次出現幾個頁次
    8. 接下來要展開「小裝置範本」
    9. 找到 
      'data:label.url' 
    10. 換成 
      'data:label.url + &quot;?&amp;max-results=7&quot;'
    11. 其中 results=7 要與前面 var postperpage=7 的數值一致。
    12. 先點選「預覽」,如果順利出現頁次的話,就可以點選「儲存範本」收工了。
參考來源:Abu Farhanchanel【X】

0 意見:

Post a Comment

STAY WITH US

 
;