網頁

2014年12月15日

|

Blogspot 文章文字 一鍵調整大小

Views:
以前的 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> 之前) -->

2 則留言:

  1. {script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js">{/script{
    {script type="text/javascript">
    document.write("{style type=\"text/css\">#Gbbig,#GBl,#GBsmall{margin-right:10px;text-align:center;float:left;background-color : #FFF68F;color : #555555;border-color : #FFB90F;border-style : solid;border-width : 1px;padding-top : 4px;padding-left : 4px;padding-right : 4px;padding-bottom : 4px;width:40px;}#Gbbig:hover,#GBl:hover,#GBsmall:hover{width:50px;background-color:#F90;}{/style>{div id=\"Gbbig\">轉小{/div>{div id=\"GBl\">還原{/div>{div id=\"GBsmall\">加大{/div{");
    $(document).ready(function(){
    $("#Gbbig").click(function(){
    $(".post").animate({lineHeight:"-=1px"},0);
    $(".post").animate({fontSize:"-=2px"},100);
    });
    $("#GBl").click(function(){
    $(".post").animate({lineHeight:"1em"},0);
    $(".post").animate({fontSize:"16px"},100);
    });
    $("#GBsmall").click(function(){
    $(".post").animate({lineHeight:"+=2px"},0);
    $(".post").animate({fontSize:"+=2px"},100);
    });
    });
    {/script{



    回覆刪除

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃