喜歡版面簡潔的部落格站長，有不少會想使用單欄式版面，也就是沒有側邊欄的設計。然而側邊欄捨棄其實也是有點可惜，這個區塊的空間若好好運用，除了可以帶給讀者不少便利性，還可撥一部份空間擺放廣告獲得收益。如果網站花一些心思設計的話，我想最佳解會是讓有需求的使用者各取所需，不想看到側邊欄的訪客可選擇關閉，需要側邊欄的時候又能立即展開這個區塊。
本篇提供一個簡單的 Blogger 側邊欄收合開關工具，還能記憶訪客的側邊欄開合狀態，將來再次拜訪網站時能保持隱藏或展開狀態。
此工具可相容於大部分的官方(非 RWD)範本，如遇到不相容的範本，建議有 CSS 基礎再進行修改。
(圖片出處: pexels.com)
一、側邊欄的功能性
在以前的年代我也比較喜歡單欄式版面，但現在我反而覺得沒有側邊欄的部落格，使用起來便利性比較差，例如不容易找到搜尋框、標籤分類工具、聯絡表單工具等等。
所謂「以前的年代」意指尺寸 17"、19" 螢幕為主流的年代，當時的螢幕解析度主要是 1024x768 或 1280 x 1024，這樣的螢幕寬度讓部落格的呈現比較擁擠，有側邊欄的網站閱讀起來沒那麼舒適。
然而現在寬螢幕成為主流，在解析度至少 1920x1080 的情況下，沒有側邊欄的網站我覺得反而閱讀起來比較吃力，比較難只動眼球就看完一行文字，可能頭部要稍微擺動一下。
因此以往不受歡迎的側邊欄，現在反而有利於閱讀，而且一些功能性的小工具，反而有助於訪客尋找文章、閱讀延伸相關文章，增加網站的停留時間。
那麼對於不需要使用網站小工具的讀者，設計側邊欄開關工具，提供切換的選擇權，可以讓兩種不同類型的讀者都得到滿意。
二、準備動作
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*側邊欄切換*/
.fauxcolumn-right-outer .fauxcolumn-inner {border-left: 0;}
.sidebar_switch{width: 40px; height: 40px; position: fixed; right: 10px; bottom: 10px; border-radius: 50%; background: #eee; line-height: 40px; text-align: center; font-size: 16px; color: #5F6368; cursor: pointer; z-index: 10;}
</style>第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
其餘的部分，如果對 CSS 熟悉可自行修改參數。
三、安裝主程式
接著請搜尋
<!--側邊欄切換-->
<div class="sidebar_switch" title="側邊欄切換"></div>
<script>
//<![CDATA[
(function() {
var rightArrowIcon = "＞", // 右箭頭圖示
leftArrowIcon = "＜", // 左箭頭圖示
sidebarStatus = JSON.parse(localStorage.sidebarStatus || true),
sidebarWidth = localStorage.sidebarWidth,
$sidebar_switch = $(".sidebar_switch"),
isClick = 1;
localStorage.sidebarStatus=sidebarStatus;if(sidebarWidth){sidebarSwitch(sidebarStatus)}if(!sidebarWidth){$(function(){localStorage.sidebarWidth=$(".fauxcolumn-right-outer").width();sidebarWidth=localStorage.sidebarWidth;sidebarSwitch(sidebarStatus)})}$sidebar_switch.click(function(){sidebarSwitch(!JSON.parse(localStorage.sidebarStatus),isClick)});function sidebarSwitch(a,c){var b=$("#sidebarCSS");if(!sidebarWidth){return}if(!b.length){$("head").append("<style id='sidebarCSS'></style>");b=$("#sidebarCSS")}if(a){$sidebar_switch.html(rightArrowIcon);b.html(".columns{padding-right:"+sidebarWidth+"px!important;}.column-right-outer{display:block}");if(c){localStorage.sidebarStatus=true}}else{$sidebar_switch.html(leftArrowIcon);b.html(".columns{padding-right:0!important;}.column-right-outer{display:none}");if(c){localStorage.sidebarStatus=false}}};
})();
//]]>
</script>
<!-- Designed by WFU BLOG -->請參考註釋，rightArrowIcon 與 leftArrowIcon 可改為自訂的圖示。
需要注意的是，使用官方 RWD 範本請勿安裝此工具。
大部分的官方(非 RWD)範本應可套用，但我沒全部測試，如遇到不相容的範本，建議有 CSS 基礎再進行修改。
更多 Blogger 側邊欄工具相關文章：
沒有留言:
張貼留言注意事項：
◎ 勾選「通知我」可收到後續回覆的mail！
◎ 請在相關文章留言，與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器，否則無法登入 Google 帳號留言(只能匿名留言)！
◎ 提問若無法提供足夠的資訊供判斷，可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢，建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger 行動版範本修改技巧 」，或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站，請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本，請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改！
◎ 若留言要輸入語法，"<"、">"這兩個符號請用其他符號代替，否則語法會消失！
◎ 為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。
◎ 本站「已關閉自刪留言功能」。