-步驟-Blogger 較新文章 / 較舊文章連結，將連結文字變成「真正」的文章標題-Steps-Change newer posts link and older posts link text, make them become real dynamic post titles - my Blogger template tweak

English | 正體中文

-- 2011-01-28 更新：加入英文版本
-- 2011-02-19 更新：修改 CSS
-- 2011-02-21 更新：修改 javascript 語法
-- 2011-03-09 更新：製作中英切換按鈕


各大部落格平台，幾乎都會有「較新一篇 / 上一篇」「較舊一篇 / 下一篇」文章的功能，Blogger 當然也不例外。

不過，相信許多 Blogger 愛用者都發現到了，別的系統像是 Wordpress，上一篇 / 下一篇連結的文字，可以動態的顯示該篇文章的標題，不過 Blogger 卻永遠都是「較新的文章」「較舊的文章」，實在是有點遜。

Google 結果發現，許多人也有相同的需求，但是似乎沒有人提出解法，大家的答案都是「不可能」。主要的原因是，Blogger 系統利用寫在樣板中的 data:olderPageTitle 和 data:newerPageTitle 標籤，從資料庫中擷取較新/較舊頁面的標題。但是，Blogger 系統顯然還沒準備好這個動態擷取的功能，所以千篇一律的顯示成「newer post / 較新的文章」以及「older post / 較舊的文章」。

不過，菜鳥我當然不可能這樣認輸！經過一番研究，很輕鬆的用 jQuery 達成了，哇～哈哈哈哈（雙手叉腰長笑）

樣板功能：Blogger 較新文章 / 較舊文章連結，將連結文字變成「真正」的文章標題

1. 到 Blogger 後台的 design > page elements 頁面，在最下方的 footer 區段，按下 add a gadget 新增小工具
   
2. 小工具的類型選擇 html /javascript
   
3. 小工具標題不要設定，內容則貼上這段文字：
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   
   <script type="text/javascript">
   var olderLink = $("a.blog-pager-older-link").attr("href");
   $("a.blog-pager-older-link").load(olderLink+" h3", function() {
   var olderLinkTitle = $("a.blog-pager-older-link:first").text();
   $("a.blog-pager-older-link").text(olderLinkTitle);
   });
   
   var newerLink = $("a.blog-pager-newer-link").attr("href");
   $("a.blog-pager-newer-link").load(newerLink+" h3", function() {
   var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
   $("a.blog-pager-newer-link").text(newerLinkTitle);
   });
   </script>
   
    -- 2011.02.21 更新：如果只想要取第一篇文章的 title 的話，請改用下面這段：（紅色字是跟上面不一樣的地方）
   <script type="text/javascript">
   var olderLink = $("a.blog-pager-older-link").attr("href");
   $("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
   var olderLinkTitle = $("a.blog-pager-older-link:first").text();
   $("a.blog-pager-older-link").text(olderLinkTitle);
   });
   
   var newerLink = $("a.blog-pager-newer-link").attr("href");
   $("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
   var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
   $("a.blog-pager-newer-link").text(newerLinkTitle);
   });
   </script>
   這樣的話，即使略過步驟 5 與步驟 6 ，也是可以的，因為它只會顯示出「下一頁的第一篇文章」的標題。
   -- 更新部分結束 --
   
   其中，第一段紅色字的部份，是引入 jQuery 的程式碼，由於之前寫的許多 blogger hack 文章都有用到 jQuery，如果妳採用的話，那麼妳的樣板中很可能已經有了這段文字了。此時，就可以把這個小工具中的這段文字刪掉，不需要重複引入。
   
4. 儲存小工具後，就可以在妳的網誌中看到這個功能。
   不過，在首頁或者其他非單篇文章的頁面，由於它的上一頁或下一頁，有許多篇文章，也就有許多個文章標題，導致我們的連結文字變得很長，因為它把下一頁的全部文章標題都列出來了。
   另外一點是，如果下一篇文章的標題很長，那這個連結文字，會一直往左或往右延伸，有時候都快要跑到對面去了，整個位置看起來就很奇怪。
   要解決這個問題，只要修改 blog-pager 的 css 即可。
   
5. 在 Blogger 後台的 design > edit html 頁面，按 Ctrl + F 搜尋 blog-pager ，會找到像下面這段文字：
   #blog-pager {
     font-size: 140%
   }
6. 在下面插入另外兩段 css ，插入後看起來像這樣：（紅色字為插入的部份）
   
   #blog-pager {
     font-size: 140%
   }
   
   #blog-pager-newer-link a {
     max-width:300px;
     height:30px;
     overflow:hidden;
   }
   
   #blog-pager-older-link a {
     max-width:300px;
     height:30px;
     overflow:hidden;
   }
   
   -- 2011-02-19 更新：我用 simple 樣板測試，紅色字要要改成這樣：
   #blog-pager-older-link,
   #blog-pager-newer-link {
     width:300px;
     line-height:2em;
     height:2em;
     overflow:hidden;
   }
   -- 更新部分結束 --
   
   其中，max-width 最大寬度和 height 高度，可以隨妳的喜好設定。
   
7. 儲存樣板後，就大功告成了。
   

最後提醒，如果妳的引入 jQuery 的程式碼，跟產生本效果的程式碼，是放在不同的小工具裡的話，記得一定要把引入 jQuery 的程式碼放置在比較前面的地方，否則，就不會產生作用了。

實際的效果，看本網誌的介面就知道了。只要七步驟就能完成，是不是很簡單呢？

-- 2011-01-28 update: add english version under each paragraph (english is not my native language but i have done my best)... enjoy!
-- 2011-02-19 update: modify CSS
-- 2011.02.21 update: modify javascript
-- 2011-03-09 update: add a language switch button in this post

you can also check my answers on blogger help forum: http://www.google.com/support/forum/p/blogger/thread?tid=4f3f6a2bc1d7a5fd&hl=en&fid=4f3f6a2bc1d7a5fd00049a5245e51902


the newer / older post links is considered a very basic blog feature. it should dynamically display post titles of previous / next articles, like what Wordpress do. but in Blogger, we have got the same "newer post" and  "older post" text in every page :-(

the main reason is Blogger's data tag. the "data:olderPageTitle" and "data:newerPageTitle" tags in our templates should retrieve page titles from Blogger's database, but they just don't.

so i write a simple javascript for this, using my favorite jQuery (a famous javascript framework).

Template Feature: Change newer posts link and older posts link text, make them become real dynamic post titles

1. go to design > page elements, add a gadget in footer section
2. select html /javascript widget
3. do not set widget title. paste the following text into widget content:
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   
   <script type="text/javascript">
   var olderLink = $("a.blog-pager-older-link").attr("href");
   $("a.blog-pager-older-link").load(olderLink+" h3", function() {
   var olderLinkTitle = $("a.blog-pager-older-link:first").text();
   $("a.blog-pager-older-link").text(olderLinkTitle);
   });
   
   var newerLink = $("a.blog-pager-newer-link").attr("href");
   $("a.blog-pager-newer-link").load(newerLink+" h3", function() {
   var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
   $("a.blog-pager-newer-link").text(newerLinkTitle);
   });
   </script>
   
   -- 2011.02.21 update：please use the following code instead. the red parts are the modified parts:
   
   <script type="text/javascript">
   var olderLink = $("a.blog-pager-older-link").attr("href");
   $("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
   var olderLinkTitle = $("a.blog-pager-older-link:first").text();
   $("a.blog-pager-older-link").text(olderLinkTitle);
   });
   
   var newerLink = $("a.blog-pager-newer-link").attr("href");
   $("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
   var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
   $("a.blog-pager-newer-link").text(newerLinkTitle);
   });
   </script>
   
   using this code, you can skip step 5 and step 6. since the code just retrieve the very first post title, instead of all post titles in the same page.
   -- 2011.02.21 update end --
   
   the first paragraph in red is for acquiring jQuery framework. i use jQuery a lot in my blogger hacks. if you have acquired jQuery in your template, then you can just delete this part.
4. save widget and you can see it work.
   and here is another problem... when you are at an index page, where there are a lot of post titles on its older page, the older page text will become very long.
   moreover, if the post title is too long, the link text will extend to opposite side.
   i fix it by changing template css.
5. go to design -> edit html, press Ctrl + F and search for "blog-pager", you would find this:
   #blog-pager {
     font-size: 140%
   }
6. add the following code right after it
   
   #blog-pager {
     font-size: 140%
   }
   
   #blog-pager-newer-link a {
     max-width:300px;
     height:30px;
     overflow:hidden;
   }
   
   #blog-pager-older-link a {
     max-width:300px;
     height:30px;
     overflow:hidden;
   }
   
   -- 2011-02-19 update：in "Simple" template，the code should be modified as following:
   #blog-pager-older-link,
   #blog-pager-newer-link {
     width:300px;
     line-height:2em;
     height:2em;
     overflow:hidden;
   }
   -- 2011-02-19 update end --
   
   you can change the max-width value and height value to whatever you like.
7. save. and it's done.

finally, the jQuery code have to be in front of this piece of javascript or it won't work.

you can see the effect on my blog http://etblue.blogspot.com/