Blogspot 文章文字 一鍵調整大小

以前的 hack 多是叫做"隱藏側邊欄", 其實它的主要作用, 是把文章空間得到最大化.
這次用了按鈕方式控制, 加入 cookie 記下最後變換狀態, 在瀏覽器進程內, 自動跟隨.

控制按鈕
介面上有 2 組, 共有 4 個按鈕,
[A+][A-] 控制文章字體大小, [A] 是大小還原.
[«»] 文章空間擴大控制, 同時側邊欄便會自動隱藏.

相關的程式碼需要寫入後台, HTML 編輯介面 (請先為範本備份),
(注意:所有後台的修改, 以Blogspot標準範本為例子)
用Search找到第一個 <div class='post-outer'> (第二個是為Mobile所用),
把這段程式碼, 放在它之後, 作用是為每篇文章的右上角, 自動加入控制按鈕.

<!-- Start 一鍵調整大小 (放在第一個 class='post-outer' 之後) -->
<div align='right' style='margin-top:-35px;'><h2>
<a href='http://freetongdiy.blogspot.hk/2014/12/blogspot.html' target='_blank' title='Blogspot 文章文字 一鍵調整大小 程式設計：FreeTong'><img src='https://www.google.com/images/icons/product/blogger-16.png'/></a>
<button onclick='resizeText(-1)' style='color: black;'><b>A-</b></button>
<button onclick='resizeText(0)' style='color: black;'><b>A</b></button>
<button onclick='resizeText(1)' style='color: black;'><b>A+</b></button>
|
<button onclick='sidebarToggle()' style='color: black;'><b>«»;</b></button>
</h2></div>
<!-- End 一鍵調整大小 (放在第一個 class='post-outer' 之後) -->

加 ID
這次用了一個比較少用的方法, "加 ID".
因為有了 ID, 用 JS 控制會比較容易.

進入後台, HTML 編輯介面,
用Search找到 class='column-center-outer' 這一句(全篇只有一句),
由 <div class='column-center-outer'>
加入ID成為 <div class='column-center-outer' id='myPosts'>

還有2句
<div class='column-left-outer' >
<div class='column-right-outer' >
需要加入ID
<div class='column-left-outer' id='myLeft'>
<div class='column-right-outer' id='myRight'>

這3個ID, 'myPosts''myLeft''myRight' 便是中左右3欄的對應控制位置.

找到 Blog 裡, 左-中-右 三欄的寬度
因應每 Blog 的設定不是相同, 所以在主程式裡, 需要自行寫入 左-中-右 三欄的寬度.
當側邊欄被隱藏時, 文章可以擴大至合理大小.
為了得到各項數據, 可以利用 Chorm 瀏覽器內置的 Developer Tools,
簡單的標示選擇了文章日期, 用滑鼠右鍵點下 "檢查元素"...
在"日期"對上位置, 可以找到3個 class項, center-outer;left-outer;right-outer.

點下它們, 網頁裡對應的位置, 便會顯示它們的寬度大小, 這個例子裡, 左邊是360px, 中間是490px, 右邊是180px.
(把這些數字寫到主程式裡. 如果是2欄結構, 沒有的便是 0px)

主程式
進入後台, HTML 編輯介面, 用Search找到 </body>,
把整段程式碼放在它之前.

注意當中3個數值, 需要根據blog裡, 左-中-右 三欄的寬度, 自行修正寫入.
myLeftWidth ; myRightWidth ; myPostsWidth (只需寫入數字, 沒有的欄改寫為 0)

<!-- Start 一鍵調整大小 (放在 </body> 之前) -->
<!-- class='column-center-outer' id='myPosts' -->
<!-- class='column-left-outer' id='myLeft' -->
<!-- class='column-right-outer'  id='myRight' -->
<script>
//<![CDATA[
var myLeftWidth = 360; //左側邊欄,因應不同範本,自行輸入寬度
var myRightWidth = 180; //右側邊欄,因應不同範本,自行輸入寬度
var myPostsWidth = 490; //文章 post,因應不同範本,自行輸入寬度

setTimeout('myPosts.style.fontSize = get_Cookie("rsText")', 0);
setTimeout('sidebarOff(get_Cookie("sbOnOff"))', 0);

function sidebarOff(OnOff) {
  if (OnOff == "Off") {
    myLeft.style.display = "none";
    myRight.style.display = "none";
    myPosts.style.marginLeft = -myLeftWidth+"px";
    myPosts.style.width = (myPostsWidth+myLeftWidth+myRightWidth)+"px";
  } else {
    myLeft.style.display = "block";
    myRight.style.display = "block";
    myPosts.style.marginLeft = "0";
    myPosts.style.width = "100%";
  }
  set_Cookie("sbOnOff", OnOff);
}

function resizeText(multiplier) {
  if (myPosts.style.fontSize == "" || multiplier == 0) {
    myPosts.style.fontSize = "1.0em";
  }
  myPosts.style.fontSize = parseFloat(myPosts.style.fontSize) + (multiplier * 0.2) + "em";
  set_Cookie("rsText", myPosts.style.fontSize);
}

function set_Cookie(name, value) {
  document.cookie = name + "=" + value + "; doBlog1=" + location.hostname + "; path=/;"
}

function get_Cookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function sidebarToggle() {
  if (get_Cookie("sbOnOff") != "Off"){
    sidebarOff("Off");
  }else{
    sidebarOff("On");
  }
}

//]]>
</script>
<!-- Start 一鍵調整大小 (放在 </body> 之前) -->