11 7月 2011

CSS + Blogger + Font


想寫好Blog, 連網頁語法都不通, 豈不矛盾?
所以近來閱讀 Jon Duckett 的 "Beginning HTML, XHTML, CSS, and JavaScript",

看完CSS前面章節, 該為我的小Blog做一點改變,從標題開始吧..
加上之前玩過一個有趣的Google API: Google Web Fonts.

試著結合卻發現有幾個題外Issue:



Blogger有其特殊的"Blogger's skin language, 所以必須搞懂blogger template
and template variable如何新增?
<b:skin><![CDATA[

<Variable name="googlefont" description="Google API Font" type="font"
default="normal normal 24px 'Love Ya Like A Sister', Tahoma, Helvetica, FreeSans, sans-serif"
value="normal normal 12px 'Love Ya Like A Sister'"/>

#Header1 h1 {
font: $googlefont, Verdana;
font-size: 36px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}

]]>

Blogger裡要到哪邊新增Font API的外部連結?
答案是:
>From Google Web Fonts Copy the first snippet of code and paste it
directly below <head> in your templates html. ~LINK

花了一個下午研究要怎麼link, 一直發生錯誤, 跟Blogger的HTML Editor耗到眼睛快花掉,
最後還是靠著上述的網頁給了最終答案:
Note 1 - You must add a forward slash (/) to the end of the code as shown in the video.

Note 2 - XML error message: The reference to entity "v1" must end with the ';' delimiter.
- If there is more than one version of the font you want to use it will be defined by the
tag &v1 or &v2 etc..

This will not be accepted in your template so we simply change the & symbol in front of v1 to the following :
&+amp; (因顯示關係, 手動加了一個+號)

雖然花了很多時間弄懂一些因為網頁語法基礎不夠穩固的bug, 但也從中學到一些延伸的研究方向:
可以用goole site作為hosting site of CSS and JavaScript:
"Hotlinking of CSS, Javascript, Text, Zipped files is allowed"

應該要找時間研究如何專業的貼上程式碼...

以及一些好網站:
"The Blogger Guide"
"Elated"
"Spice Up Your Blog"

CSS is so funny...

沒有留言:

張貼留言