2013年1月24日星期四

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

17 則留言:

  1. 你好:
    不好意思我有點看不太懂解說.....Orz

    為什麼第一步驟要先下載後再上傳呢?跳過進行步驟二可以嗎?
    第三步驟的hack是blogger後台中的哪裡呢?

    回覆刪除
    回覆
    1. 1. 第一步驟要先下載後再上傳

      其實這是一個JavaScript檔案,你需要遠程把它載入至BlogSpot當中.
      所以你必須下載這個JS檔,上存至任何可讀取的伺服器即可。
      步驟二的[PathTo]就是你伺服器的位置。

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

      上面同一位置 = 在Blogger的HTML/JavaScript小工具貼上以下Code

      刪除
    2. 謝謝回覆,不過我第二個code複製貼上後,儲存時會顯示「請修正錯誤」的訊息 Orz
      以後有機會我再重試這個小工具好了 ^^

      刪除
  2. 請問一下這個語法支援IE嗎?
    我用IE時 Previous 字眼是橫的,也沒有漂亮的陰影,還有很多奇怪現象(試了幾台PC,狀況不一)。
    想請問您是否有試過IE,還是根本放棄IE了?
    ^_^

    回覆刪除
    回覆
    1. 我用IE11沒問題,IE9,10都應該沒問題的。
      見圖: http://i.na.cx/929M2.png

      刪除
    2. 瞭解了,我試的可能都是IE8,應該更新了。
      另外,十分感謝您,無意間找到這篇,加上此功能後,馬上發現Page View次數增加許多,Blogger原本的架構,的確很難吸引網友點閱其他文章。
      繼續拜讀您的其他文章中。
      Thank you!

      刪除
    3. Sorry, 我還是上一個我... ^_^
      今天突然發現,原來加了這個功能以後,Page View次數的增加並不見得是訪客點閱增加。而是每次每個網頁都會自動載入上下篇,所以一個點閱會有3個Page View.
      我是觀察「現在」的流量時,看自己使用firefox瀏覽器,即時點閱時發現的。
      分享一下...

      刪除
    4. 而且我的firefox明明有設定「不追蹤自己的流量」,卻沒有作用,還是被紀錄流量。
      why?

      刪除
    5. 正常的,你可以看看我源始碼第11,12行和20,28行。
      我取得上下頁之後,會用javascript去取得其他項目。

      刪除
  3. 你好, 本人在Blogger的同一個HTML/JavaScript小工具貼上 了步驟2,3的程式碼都沒有效果。有什麼特別原因嗎?

    回覆刪除
    回覆
    1. 你有沒有修改[PathTo]的路徑?

      刪除
    2. 有的, 就更改了[PathTo], 其他程式碼都和你上面一樣。

      刪除
    3. 如果你方便,可以留下blog url,我幫你看看。

      刪除
  4. 好的, 非常感謝!!
    http://worldtravellersblog.blogspot.hk/
    另外,[PathTo] 的連結為這個:
    http://mingcloud.i234.me/jcSimpleLeftRightKeyNav-master/leftrightkeynav/jcSimpleLeftRightKeyNav.js

    回覆刪除
    回覆
    1. 我找到你copy那段js有很多(&#160;)原因就是這個了,你可以試試再copy and paste或人手replace.

      刪除
    2. 十分感謝你的解答, 但我還沒有找到你說的問題... :( ..

      刪除
    3. 我終於成功了!! 謝謝你啊!! 不過還有一個問題, 就昰怎樣可以改變 prev/ next 連結的大小和位置。因為我的連結按鈕好像太小不能顯示整張圖片和標題!

      刪除