Element XD lab
哥教的不是CG,是偷雞
快速導引

【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
技術提供:Blogger.

聯絡


聯絡表單

名稱

以電子郵件傳送

訊息

© thephilko.com All Rights Reserved