v 將首頁、較新及較舊文章文字以圖片代替 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...