Blogger 模板 CSS 完全攻略：免費打造獨特風格！(含清新綠現代風範例 + 10 款風格下載)
想讓您的 Blogger 部落格在眾多網站中脫穎而出，擁有獨一無二的風格嗎？關鍵就在於 CSS！但別擔心，CSS 並沒有想像中那麼可怕。這篇文章將用最簡單的方式，一步步教您如何將 CSS 放入 Blogger 模板，並提供「清新綠現代風」CSS 樣式範例，以及 10 款免費 CSS 風格下載，讓您輕鬆打造專業又美觀的部落格！
1. 如何把 CSS 放入 Blogger 模板？
就像把化妝品放進您的化妝包一樣，CSS 也有它專屬的收納空間，那就是 Blogger 的模板！
- 進入 Blogger 後台： 登入您的 Blogger 帳戶，進入部落格後台。
- 找到「主題」： 在左側選單中，點擊「主題」。
- 編輯 HTML： 點擊「自訂」按鈕旁邊的下拉箭頭，選擇「編輯 HTML」。
-
找到 <b:skin><![CDATA[ ... ]]></b:skin>： 這就是 Blogger 模板放置 CSS 的地方！
重要提示：在修改模板之前，強烈建議您先點擊右上角的「...」圖示，選擇「備份」，將目前的模板下載備份。如果不小心改壞了，還可以還原！
- 貼上 CSS 程式碼： 將您的 CSS 程式碼複製並貼到 `<b:skin><![CDATA[` 和 `]]></b:skin>` 之間。
- 儲存模板： 點擊右上角的「儲存」按鈕。
2. 「清新綠現代風」CSS 樣式範例
光說不練假把戲！我們直接來看一組可以讓您的部落格煥然一新的 CSS 程式碼，我們稱它為「清新綠現代風」：
/* 清新綠現代風 (Modern Green) CSS 樣式 */
body {
font-family: 'Noto Sans TC', sans-serif;
line-height: 1.7;
color: #333;
background-color: #fff;
margin: 0;
}
h1, h2, h3 {
color: #343a40;
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
text-align: left;
}
h2 {
margin-top: 2rem;
border-bottom: none;
padding-bottom: 0.5rem;
font-size: 1.5em;
}
h3{
margin-top: 1.5rem;
font-size: 1.25rem;
}
p {
font-size: 1rem;
margin-bottom: 1em;
}
ol {
list-style-type: decimal;
margin-left: 20px;
margin-bottom: 1em;
}
ul{
list-style-type: none; /* 移除清單符號 */
margin-left: 0; /* 移除縮排 */
padding-left: 0; /* 移除內邊距 */
margin-bottom: 1em;
}
ul li{
margin-bottom: 0.5em; /* 增加行距 */
}
ul li::before {
content: "\2022"; /* 項目符號 */
color: #28a745; /* 綠色 */
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.code-block {
background-color: #f8f9fa;
border: none;
padding: 1rem;
overflow-x: auto;
margin-bottom: 1rem;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95em;
border-radius: 5px;
}
把這段程式碼複製到您的 Blogger 模板 (依照上面步驟)，您的部落格就會立刻變得不一樣！
3. 更多免費 CSS 樣式
想要更多風格？這裡提供 10 款免費的 Blogger CSS 樣式，讓您的部落格更加獨特：