Blogger 的使用者應該有許多人使用的是 Blogger-ext2!
但並非套用到所有版面所顯示出的按鈕排版都是使用者想要的。
一般來說使用者看到的按鈕應該會像是下圖:
(圖一)中間是 16x16圖示,周圍會留白 4px,然後有個 1px的邊框包起來。
但是以目前星塵所使用的 Template 來說,
直接套用之後,所顯示的模樣會像是以下這張圖:
(圖二)周圍沒有留白,也沒有邊框,所有圖示都黏在一起!!?
看了就覺得好像不太好點…
但可以透過動手增加一些 CSS 設定,就能自己調整留白和邊框。
像是調整後的網頁顯示如下所示:
(圖三)修改後,留白 1px,邊框 1px,就比黏在一起好多了!
以下就來說明大略該如何更改!
Start:
首先進入 Blogger 設定頁面,「版面配置」→「修改 HTML」,
可以看到目前的 Template。
Case One:
一般來說, Template 也許會有類似以下這段代碼
如果沒有,可以自己新增這段代碼來控制按鈕圖示的顯示方式:
.post img {
padding: 4px;
border: 1px solid #cccccc;
}
(中間代碼不一定完全相同)
以上面為例子,
這段設定會影響網頁中 class="post" 中的 <img> 標籤,
因此會影響到符合條件的所有圖片,
padding 留白 4px。
border 邊框 1px,solid 實線,顏色 cccccc。
也就是會顯示出如(圖一)的樣子。
Case Two:
但如果版面因為其他考量,
已經設定了 .post img {} ,且 padding 或 border 的設定不同,
使用者又不希望牽一髮而動全版面,
就要用到只影響書籤按鈕圖示的代碼。
需要另外加入以下這段代碼:
.bookmark_button img {
padding: 1px;
border: 1px solid #cccccc;
}
上述這段代碼會將書籤按鈕圖示,
padding 留白 1px。
border 邊框 1px,solid 實線,顏色 cccccc。
目前本站使用的 Template 並沒有設定 .post img { } ,
所以是採用自己加入
.post img {
padding: 2px;
border: 1px solid #cccccc;
}
的方式,也就是目前所看到的顯示樣子!
相關閱讀:
Blogger 版面 Template 更改
[教學] Google Analytics - 分析您網站的流量和資訊
Blogger的最新回應功能
沒有留言:
張貼留言