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

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

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

寫在前面

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

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

修改前的板型	修改後的板型(是否覺得不太一樣)

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 部落格技巧總整理