v 將繼續閱讀(Readmore)更改位置或外觀 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


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

2009年5月6日 星期三

將繼續閱讀(Readmore)更改位置或外觀


有網友問到想將"繼續閱讀"移到右邊,該怎麼做?

因為簡單回答,我可能會說將ReadMore弄成一個定義,再用語法來安排位置,但是我想有些新手的網友不黯CSS語法,也有同樣的疑問,所以就將他寫成教學文分享了,大家也比較容易了解,不過這是針對羊男的"繼續閱讀"的版本而言,其他版本我很少接觸,有問題還是請教該Hacks作者為宜。

原本的繼續閱讀Hacks語法,"閱讀全文"是在左邊


進入後台→版面配置→修改HTML,記得展開小裝置範本,(當然也要先記得備份)
這個方式比較複雜,但是可以將"繼續閱讀"這個元件作點變化,例如加上背景顏色或是利用圖片,如果只單純置右,可以參考第二種方式,

一、可改變繼續閱讀外觀的方式

先給這個元素(.readmore)一個簡單定義,名稱可自訂,外觀定義是位在右邊、粗體,和右邊距15px
.readmore {
float: right;
font-weight: bold;
padding-right:15px;
}

如果你要加上背景圖片或顏色,就利用background語法即可,再調整文字與圖片的距離。

然後找到安裝繼續閱讀語法區段,例如我的是"閱讀全文....",類似
<data:post.body/>
<br/><a expr:href='data:post.url'/>閱讀全文... </a>

然後在閱讀全文...的前後加上span語法把它包住,
<span class='readmore'>閱讀全文...</span>
就完成了

他就會變成

<data:post.body/>
<br/><a expr:href='data:post.url'/><span class='readmore'>閱讀全文......</span></a>

意思就是閱讀全文的文字,我們用readmore來定義它的外觀,然後用span語法來前後套住,讓他成為一個物件或是元素,而不再只是單純的文字型態。

二、繼續閱讀單純置右的方式
直接找到繼續閱讀的文字區,一樣用span把他包裹住,但多加了style語法,將他設定置右即可,
<span style='float:right;'>閱讀全文...</span>

如果想自己設計不同的繼續閱讀按鈕,這是可以自行運用的方式,其實也可以套用在其他的元件上,例如"相關文章"的文字顯示,也是可以利用這種方式做點變化,有興趣的人可以自己修改看看。

19 則留言 :

  1. 哈囉~我又有問題來問你了...@@

    我用第一種方式把2個東西都加進去了..

    可是我的READMORE還是在左邊耶..

    還是說我一開始的定義放錯地方了??..(!)

    回覆刪除
  2. 你的readmore前面少了一個‧
    要有‧才能判斷他是一個變數

    回覆刪除
  3. 恩~我加上去了...XD
    可是..好像還是沒變耶..@@

    回覆刪除
  4. 因為我沒法從你的原始檔看出你加的語法,是否有用span將readmore包起來
    <span class='readmore'>這個有改嗎?

    回覆刪除
  5. 恩~有..我有把他加上去..@@

    回覆刪除
  6. 不然就用第二種方式也是可以,如果都不行,那應該是你繼續閱讀裡的Hacks裡有些語法影響了。

    回覆刪除
  7. ....成功了...

    我發現我的post.body那一串有2個...==

    我原本把SPAN包在第1個..

    剛剛我想說包在第2個好了..

    結果就成功了..XD

    所以說應該是我那個多出來的有問題了吧~@@

    因為我一開始想要用第2種方式結果也不行.

    回覆刪除
  8. 大概是繼續閱讀的語法差異吧,成功了就好。

    回覆刪除
  9. 可是每次点击“继续阅读”,就要等该网页再跑一次~有点小麻烦~而且如果遇上没有耐心和懒惰的网友都会不想要点击~因为换作是我可能也会这样也说不定~
    我看过有部落格的设定是通过点击就可以马上收缩与展开文章,包括某一段的文字~好像这个http://www.ifublog.com/litheng/188
    是后台有如此设定还是可以通过修改语法完成呢?

    回覆刪除
  10. 我都用過羊男的繼續閱讀,其他版本不清楚。

    回覆刪除
  11. 請問官方的繼續閱讀有辦法調換位置嗎?

    回覆刪除
  12. 新版官方的繼續閱讀,定義名稱也是.readmore,應該跟上面的方式新增一個定義即可,你自己可以試看看。

    回覆刪除
  13. 可以請問一下,如果想讓文字置中,是要怎麼定義呢?TEXT-ALIGN: center;好像不能耶?謝謝。

    回覆刪除
  14. 那float: right;有試過嗎?

    回覆刪除
  15. 請問 繼續閱讀改右邊 我已經成功了
    但我想要把繼續閱讀改成"紅色"...
    請問要如何修改呢? 謝謝!!!

    回覆刪除
  16. 大概是
    .readmore a {
    color: #ff0000;
    }

    回覆刪除
  17. 「< span style='float:right;' >閱讀全文...< /span >」

    請問這是要修改哪啊....
    我找不到耶= =

    回覆刪除
  18. 你有用羊男的版本嗎?如果沒有,這篇就不適合你用。

    回覆刪除

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

Related Posts Plugin for WordPress, Blogger...