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模式修改方式

1、範本 → 編輯HTML




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

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




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




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




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

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




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

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

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




7、完成後如下圖




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


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

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

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

Blogspot Continue reading Style modification

沒有留言:

張貼留言

留言後,需等待,站長的審核,才會公開,請勿重複留言,謝謝