Blogger 側邊欄隱藏開關工具

喜歡版面簡潔的部落格站長，有不少會想使用單欄式版面，也就是沒有側邊欄的設計。然而側邊欄捨棄其實也是有點可惜，這個區塊的空間若好好運用，除了可以帶給讀者不少便利性，還可撥一部份空間擺放廣告獲得收益。

如果網站花一些心思設計的話，我想最佳解會是讓有需求的使用者各取所需，不想看到側邊欄的訪客可選擇關閉，需要側邊欄的時候又能立即展開這個區塊。

本篇提供一個簡單的 Blogger 側邊欄收合開關工具，還能記憶訪客的側邊欄開合狀態，將來再次拜訪網站時能保持隱藏或展開狀態。

此工具可相容於大部分的官方(非 RWD)範本，如遇到不相容的範本，建議有 CSS 基礎再進行修改。



(圖片出處: pexels.com)

一、側邊欄的功能性

在以前的年代我也比較喜歡單欄式版面，但現在我反而覺得沒有側邊欄的部落格，使用起來便利性比較差，例如不容易找到搜尋框、標籤分類工具、聯絡表單工具等等。

所謂「以前的年代」意指尺寸 17"、19"螢幕為主流的年代，當時的螢幕解析度主要是 1024x768 或 1280 x 1024，這樣的螢幕寬度讓部落格的呈現比較擁擠，有側邊欄的網站閱讀起來沒那麼舒適。

然而現在寬螢幕成為主流，在解析度至少 1920x1080 的情況下，沒有側邊欄的網站我覺得反而閱讀起來比較吃力，比較難只動眼球就看完一行文字，可能頭部要稍微擺動一下。

因此以往不受歡迎的側邊欄，現在反而有利於閱讀，而且一些功能性的小工具，反而有助於訪客尋找文章、閱讀延伸相關文章，增加網站的停留時間。

那麼對於不需要使用網站小工具的讀者，設計側邊欄開關工具，提供切換的選擇權，可以讓兩種不同類型的讀者都得到滿意。

二、準備動作

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head>這個字串，找到後在此字串的前一行，插入以下程式碼：

<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 熟悉可自行修改參數。

三、安裝主程式

接著請搜尋 <body這個字串，找到此行後在下一行，插入以下程式碼：

<!--側邊欄切換-->
<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 基礎再進行修改。