2007年1月22日

將Archives頁面底部的文字導向連結圖形化

當我們進入Archives頁面時,畫面最底部有三個文字連結,分別是:「較新的文章」、「首頁」、「較舊的文章」,這三個文字連結,透過範本編輯,也能夠以圖形連結的方式來進行美化。



先進入版面設置––範本––修改 HTML,記得要選取展開小裝置範本,搜尋下最程式碼:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</div>
<div class='clear'/>
</b:includable>

<data:newerPageTitle/>代表較新的文章
<data:olderPageTitle/>
代表較舊的文章
<data:homeMsg/>首頁,

將這三個變數字串以圖形連結替換,圖形連結語法:
<img src="圖形連結位址"/>

下面提供三組圖形,請自行下載後,上傳到自己的空間。
Blue:


Orange



Pale Blue


UPDATA:2/9
當你完成時,請先檢查首頁“較舊的文章”連結是否有作用,如果沒有作用請再進入修改Html,將“<data:newerPageTitle/>”的<a>和</a>之間所有的程式碼,以下列程式碼取代。

<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='圖片連結位址'/></a>


延伸閱讀:
將Archives頁面底部的文字導向連結圖形化(續)

8 則留言:

  1. 哈囉,你好,
    想請問一下,我使用你這篇文章的方法修改後,卻造成首頁下方的"較舊的文章"無法作用,但是在Archives等其他頁面均是正常,請問一下這該怎麼解決呢?感謝!
    http://planykao.blogspot.com/

    回覆刪除
  2. To PlanyKao:
    已找到解決方法,將“較舊的文章”那裡
    <a......到</a>的所有程式以我UPDATA的程式碼取代,確定在BlogBetaTemplate_Kubrick中可行。

    回覆刪除
  3. 請問Josh,
    我的較新與較舊文章和首頁會跑到頁面最上方,
    請問我要如何才能將它放到頁面最下方?
    謝謝!

    回覆刪除
  4. To bluesky:
    首先看一下你的範本內容,找到這一段<b:include name='nextprev ' />,看看是不是放在<div class='blog-posts' />的上方,如果是的話,將<b:include name='nextprev ' />剪下並貼到</b:loop>
    </div>的下方即可。

    回覆刪除
  5. 太好啦、太好啦,謝謝Joseph,調到下方了!XD

    回覆刪除
  6. 版主我發現語法有兩段耶 includable id='nextprev-icon和includable id='nextprev,前一個有附圖案連結,後一個是按照版主的方法修改。不曉得這兩段語法差在哪?

    回覆刪除
  7. To Mr.Shen:
    你的includable id='nextprev-icon這一段照字面的意思看來應該是範本內已經有包含圖形連結的設定,你試著將<b:include name='nextprev ' />換成<b:include name='nextprev-icon ' />看看是否有同樣的效果。

    回覆刪除