2009年8月6日 星期四

如何更改Blogger側邊欄的標題成為有背景的文字

總覺得原來 Blogger 板型的側邊欄標題文字不是很明顯，看過別人的板型後覺得如果能把文字標題加上背景反白顏色，似乎會有不錯的效果。底下就是為了實現這個理念而做的板修改。

寫在前面

  • 本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
  • 更改 Blogger 的板型(template)前，請記得每次先備份自己的 【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。

更改板型－側邊欄標題加上背景顏色 

修改前的板型 修改後的板型(是否覺得不太一樣)
Blogger-sidebar-title-background02 Blogger-sidebar-title-background05

1. 打開 Bolgger 板型之後，先找到 【/* Variable definitions】，然後新增兩組顏色常數定義。這是為了方便以後我們想要更改側邊欄標題顏色時，只要來這邊更改即可。

  • 第一組定義側邊欄的標題顏色 (常數名稱：sidebartitlecolor)，我在這裡將之設定為白色 (#FFFFFF)，因為我想要坐反底白字的效果。
  • 第二組定義側邊欄的標題背景顏色 (常數名稱：sidebartitlebgcolor)，我在這裡將之設定為暗綠色 (#B8A80D)的背景，因為我想要坐反底白字的效果。
  • 整體效果應該如下
    側邊欄標題顏色
▼原始板型內容
程式碼

/* Variable definitions
   ====================
   <Variable name="textcolor" description="Text Color"
             type="color" default="#000" value="#000000">

   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#f6f6f6" value="#f6f6f6">

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。
程式碼

/* Variable definitions
   ====================
   <Variable name="sidebartitlecolor" description="SideBar Title Color"
             type="color" default="#FFFFFF" value="#FFFFFF">

   <Variable name="sidebartitlebgcolor" description="SideBar Title Background Color"
             type="color" default="#B8A80D" value="#B8A80D">

   <Variable name="textcolor" description="Text Color"
             type="color" default="#000" value="#000000">

2. 再用搜尋功能找到【#sidebar h2】，然後定義側邊欄的標題所要採用的格式。

  • 側邊欄的標題採用 h2 (段落2)的格式。
  • 定義標題文字顏色採用常數 sidebartitlecolor 的顏色內容。 color:$sidebartitlecolor;
  • 定義標題文字背景採用常數 sidebartitlebgcolor 的顏色內容。 color:$sidebartitlebgcolor;
  • 定義標題文字的上邊填滿  3 個點的空白。padding-top:3px;
  • 定義標題文字的下邊填滿  3 個點的空白。padding- bottom:3px;
  • 定義標題文字的上邊填滿  20 個點的空白。padding-left:3px; 
▼原始板型內容
程式碼

#sidebar h2 {
  color:$sidebarcolor;
  margin:0px;
  padding:0px;
  font:$headerfont;
}

#sidebar .widget {

▼ 修改後的板型內容 (紅色為新增或修改的部份)，注意文字必須正確。
程式碼

#sidebar h2 {
  color:$sidebartitlecolor;
  background-color:$sidebartitlebgcolor;
  margin:0px;
  padding-top:3px;
  padding-bottom:3px;
  padding-left:20px;  /* 定義標題文字的上邊填滿  20 個點的空白 */
  font:$headerfont;
}

#sidebar .widget {

▼這是板型修改後的成果。 
Blogger-sidebar-title-background05

回到 Blogger 部落格技巧總整理

2 則留言:

  1. Ryan2009年11月3日 下午4:27

    你好
    我想請教這個改法是否能讓左右邊的側邊攔的顏色不同呢？有各自的顏色
    謝謝

    回覆刪除
  2. 工作熊2009年11月3日 晚上7:19

    Ryan;
    原則上可以，但前提是你必須找得到左側邊欄的的語法及右側邊欄的語法在哪裡，也就是需要個別設定。

    回覆刪除