2009年9月3日 星期四

將首頁、較新及較舊文章文字以圖片代替



這個算是雞肋的功能吧,有些人或許很久以前就已經有用過了,不過綸太郎還是將它分享出來,有時也想調整一下版面,但又不想有太大變更,就微調一下吧,用些小小圖片增添趣味吧。

將回到首頁(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

28 則留言:

  1. 這一篇很讚喔!很實用可以讓blogger變的活潑一點...抄收中!感謝綸大的無私奉獻啦!!

    回覆刪除
  2. 謝謝了,你的網站也很有看頭,我也是很喜歡那個牛仔模板,只是屬性不和。

    回覆刪除
  3. 我也改了這3個圖示,我的作法是download圖檔後再upload到Picasa,再將圖檔的網路位址放到需要改的語法列..但是,網誌打開後都是"叉燒包",是我錯了嗎?還是他要時間啊?
    麻煩你囉,謝謝

    回覆刪除
  4. 你貼的不是正確的網址,例如1.jpg那個像是小木屋的圖,網址是http://lh6.ggpht.com/_VAXzu3B6IxU/SsNXRuHgoUI/AAAAAAAAAbo/YForJodrV6c/1.jpg
    你要點圖按右鍵,按屬性就會知道網址,(Firefox)你要仔細看看picasa的說明。

    回覆刪除
  5. 感謝你的指教,匆匆忙忙的亂複製網址,我以後會多注意的.謝謝你的說明

    回覆刪除
  6. 站長你好:
    我想請問的是,
    能將首頁下方的"較新的文章""首頁""較舊的文章"隱藏起來;
    但當點進文章或是分類時,
    仍能顯示出"較新的文章""首頁""較舊的文章"的連結嗎?
    我現在能做到的,就是將整個footer-outer隱藏起來。
    希望站長如果有時間,能撥空回答我的問題。
    以上,先謝謝了。<(_ _)>

    回覆刪除
  7. 找到 <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>把它包裹住,就可以實現你要的功能。

    回覆刪除
  8. 另外你可以參考 http://abintech.twidv.com/2007/02/sidebar.html的文章。

    回覆刪除
  9. 感謝站長的協助。
    修改成功了,其實那篇參考的網站我有去看,
    可能是修行不夠,不懂舉一反三。
    另外,還想再詢問站長的是,
    那我要如何修改,"張貼意見"和下方"最新文章""首頁""最舊文章"之間的距離呢?
    嘗試過修改blog-pager裡的細項,但似乎都無法調整。
    找了comments的類似項也都無法修改。
    以上,感謝站長抽空解答。<(_ _)>

    回覆刪除
  10. 在 #blog-pager {這個定義,新增一個
    margin-top:100px;
    敘述即可,100px大小自己修改。

    回覆刪除
  11. 再次感謝站長的解答。
    已瞭解如何修改,但因為有分類的關係,似乎沒辦法獨立調整?
    所以還是維持原樣。<(_ _)>

    回覆刪除
  12. 請問我可以把這篇文章複製到我的部落格嗎?

    回覆刪除
  13. 嗯。
    我會注明原文主人是誰的。

    回覆刪除
  14. 已告知不可以轉載全文,請尊重本人的著作權, 歡迎網摘或是連結。

    回覆刪除
  15. 嗯。知道了。
    請問,如果我更改了圖片。
    但是,我想換回原本的摸樣要如何呢?
    因為我移除了那個CODE它顯示的還是我更改過好的CODE。
    謝謝。

    回覆刪除
  16. 如果你是將 <img src="...那段語法去掉,原來的
    <<data:newerPageTitle/>相關語法還是要加回去,才能還原。

    回覆刪除
  17. 哦。
    原來如此。
    感激不盡。

    回覆刪除
  18. 嗯。
    我放了進去為何還是不可以呢?
    哎喲喂。==

    回覆刪除
  19. 應該是這樣沒錯,除非你的
    #blog-pager-newer-link {float: left;}
    #blog-pager-older-link {float: right;}
    #blog-pager {text-align: center; }
    這三項有另外用圖片當背景。

    回覆刪除
  20. 嗯。
    我弄到了。
    可以再問你一個問題嗎?
    希望你不介意。

    回覆刪除
  21. 可以啊,不過儘量在今晚問,明天起大概一星期沒法用網路。

    回覆刪除
  22. 感激不盡。
    我想問你就是要如何把‘頁面’移去中間的位置。
    而且如何把‘頁面’的字調大哦。
    謝謝

    回覆刪除
  23. ‘頁面’是指哪一部份,不懂,如果你是指頁尾那三個東西,較舊、較新、首頁,這是不能調的。
    字調大,找到該項目的定義(例如頁首、較新、較舊,就是留言20那三部份),就加上
    font-size: 20px;
    大小你自己可以設定。

    回覆刪除
  24. 不是。
    就好像你的‘首頁’‘FACEBOOK留言板’
    可以移它的位置去中間的嗎?

    回覆刪除
  25. 那個叫做分頁的網頁,因為他是可以新增的項目,沒有固定寬度,所以只能置左或右,如果要調成中間,找到
    .tabs-inner { 這個定義,但每個模版可能不同
    我把他改成
    margin-left: 200px;
    自己再微調看看。
    如果真的要置中,可能.tabs-inner要設寬度才可以。

    回覆刪除
  26. 請問是這個部份嗎?
    那麼請問要調哪兒呢?
    我沒看到你說的那個字。
    抱歉。

    /* 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;
    }

    回覆刪除
  27. 你的應該是第一個吧,tabs-inner .section:first-child { ,每個模版定義都不太相同,其實你可以自己試驗看看,就知道了。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能