9/15/2018

Blogger 側邊欄隱藏開關工具

Blogger 側邊欄隱藏開關工具

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

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

本篇提供一個簡單的 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 基礎再進行修改。



更多 Blogger 側邊欄工具相關文章:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP