至於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時，你會找不到任何有關預覽圖的資料。
