[原創] blogger 部落格之 more 閱讀更多,樣式修改大全.

more 就是設定文章分段,才不會在首頁或分頁查看時,顯示長長一整排全文,拖泥帶水,大部份免費的部落格,都有摘要功能,或是可設定顯示摘要,不顯示全文,而好像是今年2010年,blogger也加入了此功能。

當然也有不少摘要功能的修改方式,javascript css什麼修改法都有...暈,看了就懶的改,這時blogger出了個more的功能,真是我們這些使用者的福音。
more 就是設定文章分段,才不會在首頁或分頁查看時,顯示長長一整排全文,拖泥帶水,大部份免費的部落格,都有摘要功能,或是可設定顯示摘要,不顯示全文,而好像是今年2010年,blogger也加入了此功能。

當然也有不少摘要功能的修改方式,javascript css什麼修改法都有...暈,看了就懶的改,這時blogger出了個more的功能,真是我們這些使用者的福音。

使用方式大家都知道,撰寫模式下,點插入繼續閱讀,如圖:

bloggerxd001.gif

HTML模式,只要加入<!--more-->即可。

話不多說,進入主題,覺得 閱讀更多 » 看不順眼,不然就是沒加換行鍵時會黏在段落後面,加了換行時,在閱讀全文時又多一行換行,而且又和下面時間那些貼太近,或是覺得小小的不顯眼,快看不到 閱讀更多 » 了。

那麼就給它修改一下,首先到後台,

設計->修改 HTML->展開小裝置範本(打勾)

bloggerxd002.gif

搜索 jump-link ,後將 <data:post.jumpText/>

bloggerxd003.gif

取代為你想要的字串,如本站是:

<font size='3'><br/>...瀏覽全文→<br/></font>

bloggerxd004.gif

自行copy那去用吧,size數字我這裡是設3剛好,也可以設4或5大些,或2在小點,前後br是換行,才不會上下黏在一起,如下圖:

bloggerxd009.gif

------------------

或是可以去『範本設計工具』那新增CSS,如加入一個jump-link-2樣式,加好後,記得點右上套用至網誌。

bloggerxd005.gif

代碼如下:

.jump-link-2{
margin: 25px 0 25px 0;
padding: 0 0 0 0;
}
.jump-link-2 a{
color: #999999;text-decoration:none;
border: #999999 1px solid;
padding: 4px 4px 4px 4px;
font-size: 16px;
}
.jump-link-2 a:hover{
color:#009933;
border: #FF9900 1px solid;
}

在回去修改DIV的class為jump-link-2,這時font及br標籤可以取消,因為被CSS取代了,如圖:

bloggerxd006.gif

修改後效果:

bloggerxd007.gif

滑鼠移進去效果:

bloggerxd008.gif

ps

發表留言

秘密留言

五花八門

 

 

 

友站連結
Welcome
您可以分享文章超連結
,但請不要複製或轉載
文章內容,阿里阿度。
多彩多姿

 

類別
訪客計數器