JQUERY|文章二側加入頁面導覽

每篇文章或分享文,有些篇幅很長卻又沒有分頁,通常使用者在找資料時想要利用上一頁、下一頁的功能,往往要捲到最底部才能看到導覽選單,一般的免費部落格空間往往沒有這功能,今天就以Google Blogger為例,教導大家如何輕鬆加入上下頁導覽的按鈕功能。

  1. 準備工作:前後導覽的圖片(上一頁、下一頁)

    自行製作或下戴上下頁的的按鈕圖案,這應該很容易取得。

  2. 編輯範本

    (4-1)在<head>區段碼裡,引入Jquery Library

    <script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

    (4-2)在]]></b:skin>之前加上(注意寬度1140要改成自己的版寬,570則是為了取中心位置)

    #post-pager {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -570px;
    width: 1140px;
    overflow:hidden; 
    padding:0px;
    }
    #post-pager .prev , #post-pager .prev a  {margin-left:0px; float:right;}
    #post-pager .next , #post-pager .next a {margin-right:0px;float:left;}
    #post-pager .prev_arrow, #post-pager .next_arrow{width:40px;height:60px;display:block;padding:0;}
    
    .next_cont , .prev_cont{
    z-index: 1000;
    width:400px;
    height:200px;
    font-size:1.25em;
    top: 50%;
    left: 50%;
    margin-top:-100px;
    margin-left:-200px;
    padding: 8px 10px;
    border-radius: 5px;
    background: #E85E03;
    box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
    color: #EEEEEE;
    }

    (4-3)在範本最後一個<data:post.body/>之後加上:

        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div id="post-pager">
     
     <b:if cond='data:newerPageUrl'>
        <span class='next'><a class='next_arrow' style="background-image: url('https://dl.dropboxusercontent.com/u/22429126/images/post-next.png');" expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/></span>
        <b:else/>
        <span class='next'>最近一篇</span>
        </b:if>
    
        <b:if cond='data:olderPageUrl'>
        <span class='prev'><a class='prev_arrow' style="background-image: url('https://dl.dropboxusercontent.com/u/22429126/images/post-prev.png');" expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/></span>
        <b:else/>
        <span class='prev'>最後一篇</span>
        </b:if>
    
     </div><div class='next_cont' style='display:none'></div><div class='prev_cont' style='display:none'></div>
        <script type='text/javascript'>
        //<![CDATA[
        (function($){   
            var newerLink = $('a.next_arrow');
            var olderLink = $('a.prev_arrow');
            $.get(newerLink.attr('href'), function (data) {
             $('.next_cont').html(' <span>下一篇:'+$(data).find('.post h3.post-title').text().replace('0', '')+'</span>');   
            },"html");
            $.get(olderLink.attr('href'), function (data2) {
             $('.prev_cont').html(' <span>上一篇:'+$(data2).find('.post h3.post-title').text().replace('0', ':')+'</span>');   
            },"html");
        })(jQuery);
     $(function() {
     $('.prev').hover(function() { 
      $('.prev_cont').show(); 
     }, function() { 
      $('.prev_cont').hide(); 
     });
     $('.next').hover(function() { 
      $('.next_cont').show(); 
     }, function() { 
      $('.next_cont').hide(); 
     });
     });
        //]]>
        </script>
         </b:if></b:if> 

    (4-4)去除原本的導覽連結按鈕:

    先搜尋 你會看到這一串肉粽
    <div class='blog-pager' id='blog-pager'>
       <b:if cond='data:newerPageUrl'>
         <span id='blog-pager-newer-link'>
         <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
         </span>
       </b:if>
    
       <b:if cond='data:olderPageUrl'>
         <span id='blog-pager-older-link'>
         <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
         </span>
       </b:if>
    
       <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    
       <b:if cond='data:mobileLinkUrl'>
         <div class='blog-mobile-link'>
           <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
         </div>
       </b:if>
    
    </div>
    <div class='clear'/> 
    
    然後在這段程式碼的前後用以下的2+1行將頭尾包住,也就是這個樣子:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    上那串肉粽內容
    </b:if></b:if>
    

  • 2014.04.29.post.body的位置說明
    因為<data:post.body>的語法出現在二個地方,一個是提供給手機版本使用,另一個才是桌機版本,所以我把我的原始碼部份截取出來供參考,正確應該是827行之後828行的<data:post.body>才對:
<div class="post-header">
<div class="post-header-line-1">
<span class="post-labels">
        <b:if cond="data:post.labels">
          <data:postlabelslabel>
          <b:loop values="data:post.labels" var="label">
            <a expr:href="data:label.url" href="https://www.blogger.com/null" rel="tag"><data:label .name=""></data:label></a><b:if cond="data:label.isLast != &quot;true&quot;">,</b:if>
          </b:loop>
        </data:postlabelslabel></b:if>
      </span> <br />
<div class="post-share-buttons goog-inline-block">
<b:if cond="data:post.sharePostUrl">
          <b:include data="post" name="shareButtons">
        </b:include></b:if>
      </div>
</div>
</div>
<div class="post-body entry-content" expr:id="&quot;post-body-&quot; + data:post.id">
<data:post .body="">

    <b:if cond="data:blog.pageType == &quot;item&quot;">
    <b:if cond="data:blog.pageType != &quot;static_page&quot;">
    </b:if></b:if></data:post><br />
<div id="post-pager">
<b:if cond="data:newerPageUrl">
    <span class="next"><a class="next_arrow" expr:href="data:newerPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-newer-link&quot;" href="https://www.blogger.com/null" rel="next" style="background-image: url('https://dl.dropboxusercontent.com/u/22429126/images/post-next.png');"></a></span>
    <b:else>
    <!--span class='next'>最新一篇</span-->
    </b:else></b:if>

    <b:if cond="data:olderPageUrl">
    <span class="prev"><a class="prev_arrow" expr:href="data:olderPageUrl" expr:id="data:widget.instanceId + &quot;_blog-pager-older-link&quot;" href="https://www.blogger.com/null" rel="previous" style="background-image: url('https://dl.dropboxusercontent.com/u/22429126/images/post-prev.png');"></a></span>
    <b:else>
    <!-- span class='prev'>最後一篇</span-->
    </b:else></b:if>

 </div>
<div class="next_cont" style="display: none;">
</div>
<div class="prev_cont" style="display: none;">
</div>
<script type="text/javascript">
    //<![CDATA[
    (function($){   
        var newerLink = $('a.next_arrow');
        var olderLink = $('a.prev_arrow');
        $.get(newerLink.attr('href'), function (data) {
         $('.next_cont').html(' <span>上一篇:'+$(data).find('.post h3.post-title').text().replace('0', '')+'</span>');   
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         $('.prev_cont').html(' <span>下一篇:'+$(data2).find('.post h3.post-title').text().replace('0', ':')+'</span>');   
        },"html");
    })(jQuery);
 $(function() {
 $('.prev').hover(function() { 
  $('.prev_cont').show(); 
 }, function() { 
  $('.prev_cont').hide(); 
 });
 $('.next').hover(function() { 
  $('.next_cont').show(); 
 }, function() { 
  $('.next_cont').hide(); 
 });
 });
    //]]>
    </script>  
      <br />
<div style="clear: both;">
<!-- clear for photos floats -->
    </div>
</div>
分享

Jim Lin

  • Image
  • Image
  • Image
張貼留言