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的最新回應功能
沒有留言:
張貼留言