2012年3月31日 星期六

修改Blog網頁語法的好方法

 

我們都不是美術背景出生

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

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

可以直接套用

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

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

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

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

關於第1的部分

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

雖然可以套用

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

只能直接修改範本語法

 

關於第2的部分

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

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

 

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

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

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

既然最後都要修改語法

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

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

 

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

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

2012-03-31_075623

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前台,重新整理網頁,確認達到我們要的效果

 

Related Posts with Thumbnails
by TemplatesForYou-TFY
SoSuechtig