2009年8月6日 星期四

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

https://blogger-script-study.blogspot.com/2009/08/change-sidebar-text-to-background.html

總覺得原來 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 則留言:

Ryan 提到...

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

工作熊 提到...

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