2011年1月21日 星期五

-步驟-Blogger 較新文章 / 較舊文章連結,將連結文字變成「真正」的文章標題

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 的程式碼放置在比較前面的地方,否則,就不會產生作用了。

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

16 則留言:

  1. it's coolmy friend, thanks so much, its so usefully
    Cheers Beben si bloglang anu ganteng kalem tea \m/

    回覆刪除
  2. 這篇文章很有用,要先在這裡謝謝你。不過相對板主的文章版面,我有個小疑問:
    我的blogger在newer link與older link中間有一個 "首頁" 的連結,請問要怎麼把它移除呢?網路上說在#blog-pager下新增 display:none; 可是出來的效果是連newer link與older link也一併消除了,並非如預期只隱藏"首頁"連結。利用Ctrl+U複製此站#blog-pager的語法也達不到相同的效果,請問還有哪邊是要修改的嗎?

    回覆刪除
  3. 不好意思回的晚了,最近手上的專案正在水深火熱啊啊啊 >o<

    1.到 Design → Edit HTML 勾選 Expand Widget Templates
    2.按 Ctrl + F 搜尋這串文字:
    a class='home-link' expr:href='data:blog.homepageUrl'
    3.會有兩筆搜尋結果,第一筆是獨立一行的
    < a class='home-link' expr:href='data:blog.homepageUrl' >< data:homeMsg/ >< /a >
    第二筆是一獏一樣的文字,但是緊接在
    < div class='mobile-link-button' id='blog-pager-home-link' >
    的下一行。
    4.把第一筆搜尋結果的 < a class='home-link' expr:href='data:blog.homepageUrl' >< data:homeMsg/ >< /a > 整行刪掉,但是第二筆搜尋結果不要動,因為第二筆是 moblie 版面專用的,行動版網頁有自己特殊的考量,所以我從來都不去更動它。
    5.儲存樣板。

    這樣應該就可以了,或者,你如果不想用刪除的方式的話,可以在 a 標籤裡面塞一段 style='display:none;' 也可以達到隱藏首頁連結的效果 XD

    回覆刪除
  4. 喔喔喔 !!!!!! 成功了 !!!!!!
    大感謝 !!!!!!

    回覆刪除
  5. 非常感激!! 我作了少許改動, Classic Template 也用得着。不錯~不錯~

    回覆刪除
  6. thanks honey, about 2 weeks try to shown the title, no one can explain why not work at my blog, so this time its work wonderfull, nice trick, i found error at (.load(olderLink+" h3:first",) and change this 'h3:' with 'h2:' and problem solving, thanks again.......

    回覆刪除
  7. Interesting. I might try this for my blog. Good effort.

    回覆刪除
  8. 作者已經移除這則留言。

    回覆刪除
  9. 這篇真是太好了!!
    不知道有沒有辦法將標題納入新舊文連結圖片的「img title」,滑鼠移過去再顯示,這樣畫面看起來就更加簡約了!

    回覆刪除
  10. 感謝大大,文章標提出來了,但是找不到「#blog-pager {」,只找到下面這些:

    .blog-pager {
    background: $(paging.background);
    }

    .blog-pager-older-link, .home-link,
    .blog-pager-newer-link {
    background-color: $(content.background.color);
    padding: 5px;
    }

    我和上面的wilam大大一樣有「首頁」標籤,刪了「.home-link,」沒反應,而且左右字數不一樣,就會變不對稱。
    我的網址:https://qingxianz.blogspot.com

    另外我想把上下一頁移到留言部分的前面,不知道有沒有可能,網路上所有大大也都沒這樣搬。

    回覆刪除
    回覆
    1. 我自己用table 變數改好了,但是上下頁那一段無法搬,搬上去的話整個post page會直接消失@@?
      所以網路上的大大都是因為這樣不搬的樣子,目前無解中…

      刪除