這個算是雞肋的功能吧，有些人或許很久以前就已經有用過了，不過綸太郎還是將它分享出來，有時也想調整一下版面，但又不想有太大變更，就微調一下吧，用些小小圖片增添趣味吧。
將回到首頁(blog-pager)、較舊的文章(blog-pager-older-link )及較新的文章(blog-pager-newer-link )以圖片代替，圖片可以自行尋找，選擇你覺得有趣、漂亮或是適合你版面的圖樣都可，綸太郎是利用Iconfinder這個網站來找圖的，
譬如首頁圖案，輸入"Home"，而向左圖案，輸入"Left"，就可以找到你要的圖案，向右的圖，就將向左的圖利用影像編輯軟圖將圖作"水平旋轉"，就能得到向右的圖片了。
如何置換呢?一樣記得先備份原始的模板
進入後台→版面配置→修改HTML→勾選"展開小裝置範本"，然候找到以下的語法，將它置換即可，
較新的文章
<data:newerPageTitle/>以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>置換
較舊的文章
<data:olderPageTitle/>以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>置換
首頁，有兩個地方都要置換
<data:homeMsg/>以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>置換
以上這樣修改html的語法後，就能將這些文字連結以圖片替代了。
如果發現你的圖片區高度太低，或是還是想用原本的文字連結，而想修改展示文字的顏色大小，可以找到以下Css部分的，
#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center; }修改或是新增裡面的語法，讓版面更適合你的需求。
另外如果想保留原有的文字，而想再加上圖片，也可以不用如同上方的語法用置換的方式，而是將圖片語法直接加上語法的前或後，這都是可以自行運用的方式。
參考來源：
Replace Home and Posts Links by images in Blogger--Blog Godown
這一篇很讚喔!很實用可以讓blogger變的活潑一點...抄收中!感謝綸大的無私奉獻啦!!
回覆刪除謝謝了，你的網站也很有看頭，我也是很喜歡那個牛仔模板，只是屬性不和。
回覆刪除我也改了這3個圖示,我的作法是download圖檔後再upload到Picasa,再將圖檔的網路位址放到需要改的語法列..但是,網誌打開後都是"叉燒包",是我錯了嗎?還是他要時間啊?
回覆刪除麻煩你囉,謝謝
你貼的不是正確的網址，例如1.jpg那個像是小木屋的圖，網址是http://lh6.ggpht.com/_VAXzu3B6IxU/SsNXRuHgoUI/AAAAAAAAAbo/YForJodrV6c/1.jpg
回覆刪除你要點圖按右鍵，按屬性就會知道網址，(Firefox)你要仔細看看picasa的說明。
感謝你的指教,匆匆忙忙的亂複製網址,我以後會多注意的.謝謝你的說明
回覆刪除站長你好：
回覆刪除我想請問的是，
能將首頁下方的"較新的文章""首頁""較舊的文章"隱藏起來；
但當點進文章或是分類時，
仍能顯示出"較新的文章""首頁""較舊的文章"的連結嗎?
我現在能做到的，就是將整個footer-outer隱藏起來。
希望站長如果有時間，能撥空回答我的問題。
以上，先謝謝了。<(_ _)>
找到 <b:if cond='data:newerPageUrl'>這行到<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>這一大段的語法，在這段的前面加上<b:if cond='data:blog.url != data:blog.homepageUrl'> 最後面加上 </b:if>把它包裹住，就可以實現你要的功能。
回覆刪除另外你可以參考 http://abintech.twidv.com/2007/02/sidebar.html的文章。
回覆刪除感謝站長的協助。
回覆刪除修改成功了，其實那篇參考的網站我有去看，
可能是修行不夠，不懂舉一反三。
另外，還想再詢問站長的是，
那我要如何修改，"張貼意見"和下方"最新文章""首頁""最舊文章"之間的距離呢？
嘗試過修改blog-pager裡的細項，但似乎都無法調整。
找了comments的類似項也都無法修改。
以上，感謝站長抽空解答。<(_ _)>
在 #blog-pager {這個定義，新增一個
回覆刪除margin-top:100px;
敘述即可，100px大小自己修改。
再次感謝站長的解答。
回覆刪除已瞭解如何修改，但因為有分類的關係，似乎沒辦法獨立調整?
所以還是維持原樣。<(_ _)>
請問我可以把這篇文章複製到我的部落格嗎？
回覆刪除不可以。
回覆刪除嗯。
回覆刪除我會注明原文主人是誰的。
已告知不可以轉載全文，請尊重本人的著作權， 歡迎網摘或是連結。
回覆刪除嗯。知道了。
回覆刪除請問，如果我更改了圖片。
但是，我想換回原本的摸樣要如何呢？
因為我移除了那個CODE它顯示的還是我更改過好的CODE。
謝謝。
如果你是將 ＜img src="...那段語法去掉，原來的
回覆刪除＜<data:newerPageTitle/＞相關語法還是要加回去，才能還原。
哦。
回覆刪除原來如此。
感激不盡。
嗯。
回覆刪除我放了進去為何還是不可以呢？
哎喲喂。==
應該是這樣沒錯，除非你的
回覆刪除#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center; }
這三項有另外用圖片當背景。
嗯。
回覆刪除我弄到了。
可以再問你一個問題嗎？
希望你不介意。
可以啊，不過儘量在今晚問，明天起大概一星期沒法用網路。
回覆刪除感激不盡。
回覆刪除我想問你就是要如何把‘頁面’移去中間的位置。
而且如何把‘頁面’的字調大哦。
謝謝
‘頁面’是指哪一部份，不懂，如果你是指頁尾那三個東西，較舊、較新、首頁，這是不能調的。
回覆刪除字調大，找到該項目的定義(例如頁首、較新、較舊，就是留言20那三部份)，就加上
font-size: 20px;
大小你自己可以設定。
不是。
回覆刪除就好像你的‘首頁’‘FACEBOOK留言板’
可以移它的位置去中間的嗎？
那個叫做分頁的網頁，因為他是可以新增的項目，沒有固定寬度，所以只能置左或右，如果要調成中間，找到
回覆刪除.tabs-inner { 這個定義，但每個模版可能不同
我把他改成
margin-left: 200px;
自己再微調看看。
如果真的要置中，可能.tabs-inner要設寬度才可以。
請問是這個部份嗎？
回覆刪除那麼請問要調哪兒呢？
我沒看到你說的那個字。
抱歉。
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}
.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}
.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1em;
font: $(tabs.font);
color: $(tabs.text.color);
border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}
.tabs-inner .widget li:first-child a {
border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}
你的應該是第一個吧，tabs-inner .section:first-child { ，每個模版定義都不太相同，其實你可以自己試驗看看，就知道了。
回覆刪除