【Blogger】以CSS方式隱藏小工具標題

圖說：偽裝網，可以將一台戰鬥機隱藏起來，拿掉之後又會出現


我們在調整Blogger的外觀時，常常需要增加許多小工具，尤其是許多小工具都是以HTML/JavaScript來安裝，數量一多管理起來會稍微麻煩。

比方說小工具本身已經帶了標題，我們再打了標題就很多餘，在寸土寸金的畫面上多佔了一行，傳遞著重複的資訊。

有沒有什麼方法，是可以挑選部分小工具來隱藏標題的呢？



如下圖，本站左側的Facebook推薦框，本身已經有個標題叫做「推薦」，多取一個名稱叫做「大家推薦的文章」其實很沒意義。

那乾脆不要取名稱好了，這樣會更簡潔嗎？前台看起來也許會，但是後台看起來可能是個悲劇。

像下圖這樣，不取標題名稱的情況下，想要編輯某個小工具，能知道哪個是哪個嗎？

我自己模擬的使用者需求，是後台都要幫小工具取名稱以便管理檢視，但是在前台為了版面視覺需求，可以挑選部分小工具隱藏標題。

試著爬了一些文章，都是叫人到範本裡面刪除相關的Title代碼，先不論要在茫茫大海中上下滾動，或者還要花精神知道關鍵字以便搜尋，光是刪除代碼這個動作，就隱含無法復原的意思。


當然還可以靠「將迷你組件範本回復為預設值」的功能，但可能會連帶影響其他修改的代碼。

終於發現有人用增加CSS代碼的方式滿足這個需求，這是我目前覺得彈性比較高的，使用方便，復原也快，直接舉例說明：


左圖表示幫小工具取個標題名稱，然後在中間圖的版面配置就出現這一個名稱，在預設情況下，右圖的前台就會顯現一樣的標題名稱。

假設我們需要的，就是上面三個小工具標題在前台不顯現，後台一樣看得到以便管理，這時只要到範本裡，搜尋
]]></b:skin>

在這串代碼之前（屬於CSS集中管理的地區）加入以下代碼
/* 隱藏小工具標題
----------------------------------------------- */

#FollowByEmail1 h2{
display: none;
} 
#Subscribe1 h2{
display: none;
} 
#Label1 h2{
display: none;
} 


代碼示意圖

其中
#FollowByEmail1 
#Subscribe1
#Label1
是這三個小工具的名稱，從下拉式選單就可以看到，請自行修改為你的小工具名稱，當然HTML(加編號)也是沒問題的。





存檔之後將如下圖示意，左邊與中間兩圖的結構不變，而在右圖的前台檢視，標題消失了

這個方法的好處就是，隨時更改小工具名稱就生效，反悔還回得去，算是一個還不錯的方法。


完工～


本篇參考文章
How To Hide Widget Title In Blogger