每篇文章或分享文，有些篇幅很長卻又沒有分頁，通常使用者在找資料時想要利用上一頁、下一頁的功能，往往要捲到最底部才能看到導覽選單，一般的免費部落格空間往往沒有這功能，今天就以Google Blogger為例，教導大家如何輕鬆加入上下頁導覽的按鈕功能。
準備工作：前後導覽的圖片(上一頁、下一頁)
自行製作或下戴上下頁的的按鈕圖案，這應該很容易取得。
編輯範本
(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 == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
上那串肉粽內容
</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 != "true"">,</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=""post-body-" + data:post.id">
<data:post .body="">
<b:if cond="data:blog.pageType == "item"">
<b:if cond="data:blog.pageType != "static_page"">
</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 + "_blog-pager-newer-link"" 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 + "_blog-pager-older-link"" 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>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
沒有留言:
張貼留言