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;，然後儲存範本

７、完成後如下圖

返回目錄 → ( 部落格 Blog 修改 ) 之相關文章，連結總整理


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

視頻解說之第一部分 https://www.youtube.com/watch?v=m6mU8gyRRV0

謝謝大家，抽空觀看，files備份檔名 unclassified01008

Blogspot Continue reading Style modification