在 Blogger 行動版範本加入上一篇/下一篇文章提示-顯示文章標題

(8/6更新，感謝+跪婦阿冠找到一隻小bug，已經消滅了。詳情請看第三點)

最近發現越來越多新聞網站的手機板頁面有「上一篇/下一篇文章」提示，我覺得這是一個挺好的設計，又比單純只放個箭頭還要能夠吸引讀者點入。所以我就在思考能不能讓blogger行動版範本下方原本單純的箭頭變成上一篇/下一篇文章提示。

圖.1 修改後成果

圖.2 原本blogger行動版下方的上一篇/下一篇文章按鈕

原本的blogger行動版範本，在文章頁面最下方是兩個箭號，左、右兩邊點進去分別是上一篇、下一篇文章。可是沒有顯示文章標題的話，說實在沒什麼理由會去點那兩個小按鈕。所以我這篇文章是一些我調整的過程記錄，主要會有「按鈕的程式碼修改」、「按鈕大小修改」、「放入讀取上一篇/下一篇文章的程式碼」3部分。其中第3部分的程式碼來源是來自WFU BLOG，文章連結：Blogger 較新/較舊文章按鈕改造__(一)顯示文章標題。

(強烈建議在修改blogger範本前事先備份範本)

一、按鈕的程式碼修改

到範本中編輯HTML並搜尋
<b:includable id='mobile-nextprev'>
這裡就是行動版上一篇文章跟下一篇文章按鈕的語法區。

找到下面第一個
div class='mobile-link-button'
在它的後面加上
id='blog-pager-newer-link-mobile'

再將下面第一個</a>標籤之前被夾住的文字改為
<img src='https://googledrive.com/host/0B8h1srzA_rLXdFhNMUNrSVpUWjg/white-arrow-for-newerpage1.png' style='height: 24px;'/> 上一頁

接著搜尋下一個
div class='mobile-link-button'
在它後面加上
id='blog-pager-older-link-mobile'
一樣再將下方第一個
</a>
標籤之前夾住的文字改為
下一頁 <img src='https://googledrive.com/host/0B8h1srzA_rLXdFhNMUNrSVpUWjg/white-arrow-for-olderpage-2.png' style='height: 24px;'/>

解釋一下這邊的邏輯，原本blogger範本裡，"blog-pager-newer-link"是指較新文章的連結，那我宣告的" id='blog-pager-newer-link-mobile' "是為了區分網頁版介面中的連結和行動版中的連結，否則待會修改完CSS之後會連網頁版的按鈕也被改動，這就不是我的本意了。簡單說，行動版跟網頁版的按鈕必須分開來宣告、調整CSS。至於上一頁、下一頁文字是要在首頁文章清單時顯示用的，多了文字提示也是比只有小箭頭還易懂。

二、按鈕大小修改

在完成上面的調整之後，接著是把按鈕放大。其實先前就有嘗試要在行動版加入文章提示，可是沒有先改變按鈕大小的話，文章標題會擠在圖2中左、右的兩個小按鈕裡，然後因為按鈕範圍很小，文字用一般大小(16pt)時只能看到前一兩個字，這樣根本等於沒提示。所以要讓文章標題完整顯示在按鈕中，必須要調整按鈕的大小，這個部分就要從範本CSS下手。

首先搜尋"]]></b:skin>"，在它的上面加上程式碼：

#blog-pager-newer-link-mobile {margin-bottom:20px;height:40px;text-align:left;}

#blog-pager-older-link-mobile {margin-bottom:20px;height:40px;text-align:right;}

三、放入讀取上一篇/下一篇文章的程式碼(8/6程式碼更新)

上面兩步驟比較偏向版面的調整，這裡是要放入一段程式碼，是用來抓上一篇文章跟下一篇文章標題的。這個部分原始碼是來自WFU BLOG，因為原本是用在網頁版，所以為了適應行動版的部分，我有對其做修改。

在"</body>"前放入以下程式碼：

<b:if cond="data:blog.isMobile">

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script>

//<![CDATA[

var bPager = {};

bPager.width = "310px"; // 設定文章標題的寬度像素值

bPager.home = "N", // 是否顯示首頁按鈕, 填入 "N" 將不顯示

bPager.newPic = "https://googledrive.com/host/0B8h1srzA_rLXdFhNMUNrSVpUWjg/white-left-arrow5.png"; // 較新文章的圖示

bPager.oldPic = "https://googledrive.com/host/0B8h1srzA_rLXdFhNMUNrSVpUWjg/white-right-arrow6.png"; // 較舊文章的圖示

bPager.newer=function(a){document.getElementById("Blog1_blog-pager-newer-link").innerHTML="<span><img src='"+bPager.newPic+"' style='height:28px;'/></span><span>"+a.feed.entry[0].title.$t+"</span>"};bPager.older=function(a){document.getElementById("Blog1_blog-pager-older-link").innerHTML="<span>"+a.feed.entry[0].title.$t+"</span><span><img src='"+bPager.oldPic+"'style='height:28px;'/></span>"};(function(){var f="Blog1_blog-pager-newer-link",e="Blog1_blog-pager-older-link",i=function(n){return document.getElementById(n)},m="http://"+location.hostname,g=i(f)?i(f).href.replace(m,""):"",b=i(e)?i(e).href.replace(m,""):"",d="/feeds/posts/summary?alt=json-in-script",l=function(n){return document.createElement(n)},k=l("script"),j=l("script"),a=l("style"),c=function(n){return document.documentElement.firstChild.appendChild(n)},h=bPager.home=="N"?".home-link {display: none;}":"";k.src=d+"&callback=bPager.newer&path="+g;j.src=d+"&callback=bPager.older&path="+b;a.innerHTML="#Blog1_blog-pager-older-link span, #Blog1_blog-pager-newer-link span {display: table-cell; vertical-align: middle; padding: 3px;} #Blog1_blog-pager-older-link, #Blog1_blog-pager-newer-link {display: table; text-decoration: none; font-size: 18px; width: "+bPager.width+"}"+h;c(k);c(j);c(a)})();

//]]>

</script>

</b:if>

</b:if>