Top

在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>

上面藍色字的部分是箭頭圖案的網址,如果不喜歡的話可以改成自己的圖片網址。我是把圖片放在Google drive,然後設定網站可以連到圖片網址,詳細設定可以參考先前文章:裝飾網誌標頭圖片-用向量圖取代點陣圖。橘色字是更新的部分,讓這個程式碼功能只有在行動版作用,網頁版不會作用。


.3 首頁下方的上一頁、下一頁提示

完成上面3個步驟後,就可以拿起手邊的智慧型手機打開自己的blogger,如果在文章頁面下方有像圖1那樣的結果就是成功了。另外,步驟1的設定會顯示在首頁下面,如圖3所示。

操作上有遇到問題的歡迎在下方留言提出來~