2015年2月5日 星期四

blogger之blogspot 繼續閱讀 樣式修改方式 part1

blogger之blogspot部落格的 more 閱讀更多 閱讀全文 繼續閱讀 調整顯示位置

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

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

more就是閱讀標示,一般會將文章分成2部份,more之前以簡介為主,more之後才是內文,這樣方便訪客瀏覽,及點擊要閱讀的文章進入觀看。



早期沒more這東西,造成一連入blog都落落長 = = ,後來才加了 more 繼續閱讀 這個功能,算是很重要的,所以位置要用好,像下圖是預設值,繼續閱讀的超連結都跟上行黏在一起了,十分不好。



調整如下圖那樣較佳:



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



HTML模式,只要加入<!--more-->,這串代碼即可,如圖:



繼續閱讀,這邊提供2種修改方式,一種是,到範本的HTML模式下修改,一種是,在範本設計工具的進階內,新增CSS代碼,比較推薦後者,較為方便。

範本的HTML模式修改方式:

Ⅰ、範本 → 編輯HTML



Ⅱ、由於不能用瀏覽器查找jump-link字串,只能copy代碼後,貼到notepad++之類的文字編輯軟體上,在查找jump-link字串,另外使用notepad++之類的文字編輯軟體,有返回上一步的功能,不用擔心不小心改錯,後續處理麻煩。

Ⅲ、滑鼠移至代碼框內,滑鼠右鍵全選,滑鼠右鍵複製,或快鍵ctrl+a全選及ctrl+c複製



notepad++開個新文件,然後貼上代碼,並存成html格式,這樣才會有顏色區分



Ⅳ、在搜索jump-link這個字串,看一下它的行數,每個風格jump-link都不同位置



Ⅴ、回到範本的HTML,在對應的行數下,應該可看見class='jump-link'這串

現在的HTML編輯框框,會略縮代碼,如看不見行數,要點擊下拉小三角展開



Ⅵ、字體大小為16px及上下間隔25px樣式,所以此處將class='jump-link'替換成

style='margin-top:25px; margin-bottom:25px; font-size:16px;'

如果想要靠右,可加上text-align:right;,然後儲存範本



Ⅶ、完成後如下圖



後續文章,請查看 → blogspot 繼續閱讀 樣式修改方式 part2 【視頻解說】



對上述圖文教學,還不太明白的話,請至下方連結,查看youtube視頻解說。

此篇教學之youtube視頻解說:https://www.youtu.be/LwH_8Aglfjk


謝謝大家,抽空觀看,files備份檔名:blogspotguides 001

沒有留言:

張貼留言