Blogger 版面配置切割任意欄位的技巧﹍方便安裝小工具＠WFU ... | blogger版面教學
Blogger後台的「版面配置」功能相當方便，可以讓我們在各種位置新增小工具。
但如果你想要任意切割版面，在指定的地方產生小工具，那麼一定要看本篇 ... 讓Blogger 首頁每篇文章都能顯示日期 · [教學]Blogger 範本﹍(3) 文章及 ...網站導覽如何使用本站Blogger新手指引本站的Hack及工具熱門文章一覽文章列表+讚統計BLOGGER小技巧小工具行動版官方工具留言相關Blogger相關Blogger筆記Blogger範本Blogger語法GOOGLEGoogle試算表Chrome套件GoogleDriveGoogle搜尋GoogleAdsenseGoogleAnalyticsAppsScriptGoogle相關部落格部落格經營搬家SEO社交分享按鈕網站工具網頁效能部落格廣告著作權保護網頁設計字型RWDBootstrapjQuery工具CSS技巧Javascript技巧網頁開發工具圖片展示工具網路雲端FacebookLineDropboxEvernote資訊安全免費空間會員中心會員資訊會員限定文章會員加值文章點數使用明細會員公告會員討論區關於會員系統關於/諮詢諮詢／服務項目架設網站流程架站作品關於本站版權聲明贊助管道留言板2017年6月4日Blogger版面配置切割任意欄位的技巧﹍方便安裝小工具WayneFu電腦-Blogger-Hack-Blogger語法,電腦-Blogger-Blogger範本0A+色a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top}最近進行WFUBLOG改版，需要在新版型上切出一些欄位，來安裝小工具。
如果使用官方範本，那麼這是很簡單的事，後台就有各種的欄位樣式可以選擇，看要將區塊切成2等分或3等分都行。
如果熟悉CSS的話，自己切版也很容易，而缺點就是切出來的區塊無法安裝小工具，只能將所有程式碼塞在範本中，造成日後管理的麻煩。
那麼本篇就來紀錄如何Hack範本，達到以上的需求。
一、官方範本切割欄位後台主題→自訂→版面配置，可看到下圖畫面：這裡可以選擇版面的切割方式，例如選擇紅框處，就能將頁尾切割成等比例的三個欄位，各自都能新增小工具。
二、自己切版的缺點使用CSS我們自己也可切割版面，例如要將某個區塊切成3等分的欄位，只要設定width:33.3%，然後看要不要加上float:left。
但這樣的方式，日後想要調整內容、或是新增外掛時，都得進入範本中編輯，其實沒有那麼直覺、方便。
以WFUBLOG目前的頁尾為例，長得像這樣：注意到紅框處的"編輯圖示"按鈕了嗎？這三個區塊是使用官方版面配置功能產生的，所以不用到後台，在頁面上就能直接編輯小工具，對於日後管理、調整清單內容非常的方便。
上面是這個頁尾3等份欄位，在後台版面配置的示意圖。
官方版面配置的功能是很方便沒錯，但問題來了：如果我想切成3等分的區塊，不是在頁尾，要怎麼做呢？我沒有要切成3等分，只想產生一個區塊能自行新增小工具，又要怎麼做呢？三、製作滿版欄位1.提醒事項本文接下來的操作都很危險，建議非常熟悉修改Blogger的讀者再進行。
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
2.100%寬度欄位在網頁上切割出一個區塊，佔用100%寬度，且能增加官方小工具，這件事比較簡單一些。
在範本中自訂的位置，新增以下程式碼即可：
但如果你想要任意切割版面，在指定的地方產生小工具，那麼一定要看本篇 ... 讓Blogger 首頁每篇文章都能顯示日期 · [教學]Blogger 範本﹍(3) 文章及 ...網站導覽如何使用本站Blogger新手指引本站的Hack及工具熱門文章一覽文章列表+讚統計BLOGGER小技巧小工具行動版官方工具留言相關Blogger相關Blogger筆記Blogger範本Blogger語法GOOGLEGoogle試算表Chrome套件GoogleDriveGoogle搜尋GoogleAdsenseGoogleAnalyticsAppsScriptGoogle相關部落格部落格經營搬家SEO社交分享按鈕網站工具網頁效能部落格廣告著作權保護網頁設計字型RWDBootstrapjQuery工具CSS技巧Javascript技巧網頁開發工具圖片展示工具網路雲端FacebookLineDropboxEvernote資訊安全免費空間會員中心會員資訊會員限定文章會員加值文章點數使用明細會員公告會員討論區關於會員系統關於/諮詢諮詢／服務項目架設網站流程架站作品關於本站版權聲明贊助管道留言板2017年6月4日Blogger版面配置切割任意欄位的技巧﹍方便安裝小工具WayneFu電腦-Blogger-Hack-Blogger語法,電腦-Blogger-Blogger範本0A+色a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top}最近進行WFUBLOG改版，需要在新版型上切出一些欄位，來安裝小工具。
如果使用官方範本，那麼這是很簡單的事，後台就有各種的欄位樣式可以選擇，看要將區塊切成2等分或3等分都行。
如果熟悉CSS的話，自己切版也很容易，而缺點就是切出來的區塊無法安裝小工具，只能將所有程式碼塞在範本中，造成日後管理的麻煩。
那麼本篇就來紀錄如何Hack範本，達到以上的需求。
一、官方範本切割欄位後台主題→自訂→版面配置，可看到下圖畫面：這裡可以選擇版面的切割方式，例如選擇紅框處，就能將頁尾切割成等比例的三個欄位，各自都能新增小工具。
二、自己切版的缺點使用CSS我們自己也可切割版面，例如要將某個區塊切成3等分的欄位，只要設定width:33.3%，然後看要不要加上float:left。
但這樣的方式，日後想要調整內容、或是新增外掛時，都得進入範本中編輯，其實沒有那麼直覺、方便。
以WFUBLOG目前的頁尾為例，長得像這樣：注意到紅框處的"編輯圖示"按鈕了嗎？這三個區塊是使用官方版面配置功能產生的，所以不用到後台，在頁面上就能直接編輯小工具，對於日後管理、調整清單內容非常的方便。
上面是這個頁尾3等份欄位，在後台版面配置的示意圖。
官方版面配置的功能是很方便沒錯，但問題來了：如果我想切成3等分的區塊，不是在頁尾，要怎麼做呢？我沒有要切成3等分，只想產生一個區塊能自行新增小工具，又要怎麼做呢？三、製作滿版欄位1.提醒事項本文接下來的操作都很危險，建議非常熟悉修改Blogger的讀者再進行。
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
2.100%寬度欄位在網頁上切割出一個區塊，佔用100%寬度，且能增加官方小工具，這件事比較簡單一些。
在範本中自訂的位置，新增以下程式碼即可：