2009年9月24日

Blogger 10週年慶(四):You Might As Well Jump!

呼萬喚始出來,終於,Blogger最令人詬病的地方,也有了改變,當各家BSP將「Read More(閱讀全文)」視為基本配備時,Blogger始終沒有這個功能,我們只好利用各種Hack的房法來實現,如今,Blogger 10週年慶,終於有了這個功能。

要使用這個功能,首先要先將你的編輯器改為新版,進入「設定」–「基本」,下方有個「一般設定」的地方,選擇「新版文章編輯器」,之後儲存。

接著進入編輯文章,切換到「撰寫」模式,如下圖:

你會發現在功能列最右邊多個一個圖示,按下後會在文章之中插入一個類似將文章分開的圖示,當我們切回「修改HTML」模式時,有一行<!-- more -->,系統就是以這一串來判定,並自動將<!-- more -->以下的文章隱藏。

接著請切換到「版面配置」–「修改 HTML」–「展開小裝置範本」,搜尋下列程式碼:
<data:post.body/>
檢查在上列程式碼的下方是否有下列程式碼,沒有請加上,有則跳過:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

接著到「版面配置」–「網頁元素」,在「網誌文章」這個區塊點選「編輯」來開啟設定視窗,如下圖:

其中「張貼頁面連結顯示文字」這裡,可以自行設定所要顯示「繼續閱讀」的文字,如:Read More、繼續閱讀、詳閱全文……等等。

另外,你會發現上述「繼續閱讀」的字會出現在左下角,我的習慣是讓該字串保持在右下角,這時可以用CSS讓它跑到右下角,將下列CSS語法放到]]></b:skin>的前面即可。
.jump-link {
text-align:right;
}

這就是Blogger 10週年慶的第四彈,令人更期待接下來的驚喜還會出現什麼。

2 則留言:

  1. 我想問一問可以改變它的大小和顏色嗎?如果可以的,可以教教我嗎?

    回覆刪除
  2. TO Tommy5ol:
    改變文字的大小和顏色,只需要在.jump-link這個class內下指令即可。如下:
    .jump-link, .jump-link a {
    color:#6F6F6F;
    font-size:20px;
    text-align:right;
    }
    其中color就是字的顏色,font-size就是字的大小。

    回覆刪除