為你的Blogger加入新式上一篇/下一篇文章連結

其實很多Blog Engine的previous/next->post/page都很不顯眼，即使如WordPress，很多Themes的設計都同樣冷落這兩個連結按鈕。

至於Blogger也不例外，樣式不吸引，而且所在位置是頁面的最下方，就是那麼不起眼。


當然透過CSS，你可以把它改變成大圖案大文字去吸引目光，但其實透過小小的jQuery Plugin就可以做到現在本Blog的效果。


所使用的plugin叫jcLeftRightKeyNav。
可以試試官方的Demo，其中一個特色是支援Keyboard的左右鍵。

官方Demo無論連結和文字都是靜態的，
所以我還作出了少少修改 -
1. 把Blogger的Post Title，Prev/Next連結，Dynamic地連結至該Plugin。
2. 把Post的Thumbnails加上伸展標籤位置。

若覺得有點抽象，或者可以試試本站的實際使用情況，你應該會見到頁面兩旁有Previous/Next的浮動按鈕。

使用方法:
1. 下載jcLeftRightKeyNav，上傳至網絡空間或DropBox。

2.在Blogger的HTML/JavaScript小工具貼上以下Code :

<!-- CDN Hosted jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/></script>
<script type="text/javascript" src="[PathTo]/jcSimpleLeftRightKeyNav.js"></script>
<link href="[PathTo]/jcLeftRightKeyNav.css" rel="stylesheet" type="text/css" />

3. 現在就到Hack的部份。跟上面同一位置，再貼上後儲存，便完成。

<script type="text/javascript">
$(document).ready(function(){
  //If the current page is posts list, exit. The script should run when viewing post.
  if ($('div.date-outer').length > 1)
   return;
  
  //variables
  var prevtitle = '', prevmeta = '', previmg = '',nexttitle = '', nextmeta = '', nextimg = '';
  //Use your favor image when the post is no thumbnail.
  var noimage = 'http://ultraimg.com/images/t36d6d.png';
  //Get the prev/next href src.
  var prevsrc = $('#Blog1_blog-pager-newer-link').attr('href');
  var nextsrc = $('#Blog1_blog-pager-older-link').attr('href');
  
  //Perform jQuery ajax to blogger mobile version and get the title and thumbnail.
  $.ajaxSetup({ cache: false, global: false,async: false });
  if (prevsrc != null)
  {
   //Append "?m=1" to blogger url to visit mobile version.
   $.get(prevsrc + '?m=1' ,{ "_": $.now() },  function(data) {
     prevtitle = $('h3.post-title.entry-title' , data).text();
     prevmeta = $("meta[itemprop='image_url']" , data);
     if ($(prevmeta).html() == undefined)
     previmg = noimage;
     else if ($(prevmeta).attr('content').indexOf('-Ic42/') > -1)
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-Ic42/");
     else if ($(prevmeta).attr('content').indexOf('-c-Ic42/') > -1)
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-c-Ic42/");
     else 
     previmg = $(prevmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200/");
     
   });
  }
  if (nextsrc != null)
  {
   $.get(nextsrc + '?m=1' ,{ "_": $.now() },  function(data) {
     nexttitle = $('h3.post-title.entry-title' , data).text();
     nextmeta = $("meta[itemprop='image_url']" , data);
     if ($(nextmeta).html() == undefined)
     nextimg = noimage;
     else if ($(nextmeta).attr('content').indexOf('-Ic42/') > -1)
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-Ic42/");
     else if ($(nextmeta).attr('content').indexOf('-c-Ic42/') > -1)
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200-c-Ic42/");
     else 
     nextimg = $(nextmeta).attr('content').replace(/\/s[^\?\/]*\//,"/s200/");
   });
  }
  
  //Finally, run jcLeftRightKeyNav.
  jQuery().jcNextPrev({
       prevLink: prevsrc,
       prevLinkText: "<img src='" + previmg + "' />" + "<br />" + prevtitle,
       nextLink: nextsrc,
       nextLinkText: "<img src='" + nextimg + "' />" + "<br />" + nexttitle
  });

});
</script>

其實沒有太複雜的地方，應該看comment都已經足夠說明。
唯Thumbnail(預覽圖)可以解說一下。

若你跟我都是用Picasa Web或Blogger內建的上傳做圖片連結，
Blogger的預覽圖是會自動產生，Blogger會自動抓取你Post文中第一張圖片做預覽圖Url。
故為什麼要設置NoImage，因為有機會Post中沒有圖片可抓。

若果圖片都是其他網域的話，很遺憾就沒有預覽圖了。
例如這個Post是用Facebook的，當你View Source時，你會找不到任何有關預覽圖的資料。