修改Blog網頁語法的好方法

 

我們都不是美術背景出生

所以設計美觀的網站會是一大挑戰

還好網路上有一堆厲害的美術設計師提供免費或付費的Blogger版型

可以直接套用

大大加快我們網站成型的速度

不過套用別人版型有兩個小缺點：

1. 會跟別人撞板，就跟撞衫一樣，不過如果你不介意的話就沒關係了

2. 因為版型大部分是外國人設計的，所以會顯示外國文字

關於第1的部分

大部分的版型跟新版Blogger的版型是不一樣的

雖然可以套用

不過卻沒辦法使用Blogger後台「範本/自訂」的功能

只能直接修改範本語法

 

關於第2的部分

大部分可以在「版面配置」的小工具中直接把小工具的標題改成中文

少部分必須直接在版型的語法上進行調整

 

大家可以發現，不管是第1或是第2種情況

如果想對版型做最大自由的修改

都會回歸到對範本語法的調整

既然最後都要修改語法

有沒有什麼好用的工具或方法可以讓我們更快找到要修改的地方呢

有的，答案就是利用google的Chrome瀏覽器

 

1. 首先進到自己blog的前台

2. 按「Ctrl + Shift + j」進到Javascript控制台

A：網頁結果，修改後的效果可以立即顯現

同時也是學習HTML、CSS語法的好工具

輕鬆修改馬上知道這個語法的功用

B：功能選單

C：目前網頁語法

D：選定HTML語法的CSS設定

E：主控台，所有javascript執行的狀態或錯誤都會在這邊呈現

 

 

1. 首先點選下方的放大鏡圖示

2. 移到A區，對想修改的區域點一下

3. C區就會顯示該區域所使用的HTML語法

而D區會顯示該HTML語法搭配的CSS設定

4. 在C區或D區點兩下就可以直接修改語法設定

確定之後就可以按Enter

此時修改後的效果就會在A區出現

5. 如果修改可以達到我們的期望

就可以把該HTML或CSS的語法複製起來

6. 到Blogger後台，點「範本/修改HTML/繼續」

7. 打勾「展開小裝置範本」

8. 點一下網頁語法的區域，再按Ctrl + F開啟搜尋功能

9. 貼上剛剛複製的語法，按Enter，就有機會找到剛剛修改的區域

10. 修改後按「預覽」看看效果是不是跟我們在Javascript控制台

看到的效果一樣

11. 如果一致的話可以點選「儲存範本」

12. 回到Blogger前台，重新整理網頁，確認達到我們要的效果