FreeTong DIY: 2014

2014年12月29日

Moto X 2nd 試一試, lollipop 的4個隱藏功能

lollipop 本身有 4 個隱藏功能, 它們全都可以一一被啟動出來.
2 個由手機裡, 一些特別步驟開啟. 另外 2 個由專門 Apps 叫用...

lollipop 遊戲
開發人員選項
Battery Percent
Unlimited Screen Recorder

https://play.google.com/store/apps/details?id=de.kroegerama.android4batpercent
https://play.google.com/store/apps/details?id=org.mistygames.screenrecord

影片裡有更詳盡解說...

2014年12月22日

Moto X 2nd 試一試, 皮革保護

我的 Moto X 2nd 是皮革版本, 而皮革是需要保養,

這個可以使用市場上, 大部分的皮革保護劑, 有水質, 有油性.
我這次用的是一種動物性油脂, 它的好處是透明, 可以用在不同顏色的皮革上.
步驟及方法都非常簡單, 一同做做看看...

2014年12月20日

Moto X 2nd 試一試, Android™ 5.0 Lollipop 系統更新

UK 版的 Moto X 2nd 有更新推送, Android™ 5.0 Lollipop "波板糖" 的系統更新.

先看看網上介紹的更新內容...
Moto X (第 2 代) - Android™ 5.0 Lollipop
https://motorola-global-chn.custhelp.com/app/answers/detail/a_id/103387

系統更新到 Android 5, 大約需時 10 多分鐘

Lollipop 的整個介面, 跟 4.4 時代, 風格完全不同

更多資料請觀看影片介紹

2014年12月15日

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> 之前) -->

Moto X 2nd 試一試, 感應器與測試Apps

Moto X 2nd 機面多了 3 個感應器, 增加了一些分隔空操控的功能.
再加上原有的前鏡頭; 水平儀, 便有了"觀看屏幕時保持開啟"及"晃動快速拍攝"

[設定]> [Moto]> [智慧手勢]

[設定]> [顯示]> [即時反應顯示器]

[音量下鍵]+[開關鍵] 來開機, 可進入 fastboot 模式, 選取 [BP Tools].
完全 boot 機後, 可得到 CQATest Apps.

QuickShortcutMaker(創建捷徑)
https://play.google.com/store/apps/details?id=com.sika524.android.quickshortcut
可以找到隱藏 Apps, 關於 CPU 的 Qualcomm Setting

更多資料請觀看影片介紹

2014年12月11日

Moto X 2nd 試一試, 開箱篇

"大家好, 我喺 FreeTong DIY Blogger ...." 我通常用這個開場白, 為影片的傍白.
當我得到這部手機時, 準備做一些使用感的貼文時, 我病了, 喉嚨發炎, 所以一星期後才出文發佈. (但是一星期的使用經驗, 使我更了解 Moto X 2nd 的特性)

這次的 Moto X 2nd 試一試, 會是以影片為主, 相片文字為副.

Moto X (2nd Gen) : XT1092 (英規版本)
CPU : Qualcomm Snapdragon801 2.5GHz Quad-core
RAM : 2GB
Screen size : 5.2inches
Screen resolution : 1920x1080
Pixel density : 423PPI
Screen type : OLED (Active, Color, Backlit)
Camera : 13 megapixels
Secondary camera : 2 megapixels
Internal memory : 16 GB
Battery type : Li-ion (2300 mAh capacity)
WiFi : 802.11 ac, b, g, n (2.4, 5 GHz)
Bands :
GSM/GPRS/EDGE (850, 900, 1800, 1900 MHz)
UMTS/HSPA+ (850, 900, 1800, 1900, 2100 MHz)
4G LTE (1, 3, 7, 8, 20)

皮背, 手或感不錯. 一個大大的 M 標記 (以前的猜想它是一個開關, 其實不是, 只是一個 logo).
鏡頭閃光燈看似是環形, 其實只有左右兩點.

跟機配件有一個香港合用的13A插頭充電器, 它有 2 個各支援 1150mA 的 USB 充電口.
一條 USB 充電數據線. 一支 SIM 卡插座的開蓋插針工具.

3 片簡單說明書

更多資料請觀看影片介紹

2014年11月22日

Blogspot 文章間格排版 (網友提議試制版本)

我一直有改造"文章排版"的貼文, 而早日有網友出一種我沒有想過的排版方式,
有趣, 用了大半天的時間, 得出這個有點像樣子的結果. "文章間格排版"

要求是一行 3 格, code 方面需要修改後台 HTML (原Blogspot範本)

    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == "false"'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class="date-outer"&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
<b:if cond='data:blog.pageType == "item"'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class="date-posts"&gt;
        </b:if>
        <!-- <div class='post-outer'> -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
<!-- 更換的原本句子 <b:include data='post' name='post'/> -->
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<div style='float:left; padding:2px 2px 2px 2px; margin:2px; width:165px; height:300px; overflow-x:hidden; overflow-y:auto; border-style:groove;'>
<a expr:href='data:post.url'>
<script>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s140-c");// 設定圖片大小, e.g. S350
     document.write("<img src='"+ pic +"' style='display:block; margin:auto;'/>"); 
    })()
</script>
</a>
  <div class='post-title' style='margin-top:2px;'><a expr:href='data:post.url'><b><data:post.title/></b></a></div>
  <div style='margin-top:4px;'>  <data:post.snippet/></div>
<div class='jump-link' style='margin-top:2px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div></div>
</b:if></b:if>
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->
        <b:if cond='data:blog.pageType == "static_page"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <!-- </div> -->
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop><div style='clear:left;'/>

修改擇要...
原範本中由  開始, 直到</b:loop>結束, 有多處修改.

第 02-04 行, "日期"顯示加入 if 語法, 它只會在單頁時列出
第 06 行, post-outer 會影響排版, 所以用 Remark 標記, 不以執行. 或刪除也可以
第 33 行, post-outer 的結束 </div>, 用 Remark 標記, 不以執行. 或刪除也可以
第 07-31 行, "間格排版"的主要語法
第 15 行, width:165px; height:300px; 因應不同的範本, 得以自行修正
第 20 行, 設定圖片大小, 同樣是因應不同的範本, 得以自行修正
第 35 行, 在原本</b:loop>之後加入<div style='clear:left;'/>, 清除"間格排版"格式

2014年11月8日

Blogspot 文章數字分頁

Blogspot Page Navigation 不是個新東西, 多個網站或是網誌都有相關語法介紹,
它有著多個不同版本, 華麗的, 簡樸的...
重點是極多都不可以在今天 Blogspot 裡頭正常使用.

直到找得這個網誌...
http://mkhere.blogspot.hk/2009/11/blogger-pagination.html

網主《姆奈》MKnight 在2009 的介紹, 得知這個語法開始時, 是由一名台灣網主 Mr.J 在2007年所開發,
再經各大網站轉發公開, 當中加入了不小功能改善, 或是外觀變化.
可惜改變後的語法跟現時 blogspot 範本出現了不相容, 非常多問題發生, 而且語法多次修改後變得不好理解, 修正困難.

但是 MKnight 網綕上的, 正常可用. 相信是原 Mr.J 所寫第一手版本, 經 MKnight 改進後的第二手版本.
參考內容少了華麗包裝, 比較簡單容易了解. 同時得到網主答允, 轉發推介, 再加上我個人對它的一些修正及改進, 介紹它的第三手版本.

Blogspot 文章數字分頁

全段語法只要把下面 code 全部複製到 HTML/Javascript 小工具的內容裡,
無需在"標題"加入文字.
按下[儲存], 重新啟用網誌即可.
(極度建議把小工具放到"版面配置"最下方位置. 因為語法中會修改網頁的 HTML, 所以放到最底下. 網頁完成載入後, 一一自動對應修改.)

<!-- Start Page Navigation -->
<style type="text/css">
.showpageArea {margin:5px 0 20px 0;}
.showpageNum A{margin:0 4px 0 4px;text-decoration: none;}
.showpagePoint {background: #191919;margin:0 3px;padding:2px 5px;text-decoration: none;
  -webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;
  -moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;
  -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
  -moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px}
</style>
<script type="text/javascript">
function showpageCount(json) {
var postNum=1;
var thisUrl = location.href;
var htmlMap = new Array();
var htmlPoint = 1;
var isFirstPage = thisUrl.match(/\.blogspot\.(\w+)\/$/);
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated-max")!=-1;
var lablePage = thisUrl.indexOf("/search/label/");
var thisLable = lablePage !=-1 ? thisUrl.substr(lablePage+14,thisUrl.length) : ""; 
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var fFlag = 0;
var eFlag = 0;
var labelCount = 0;
var html= '<span class="showpageArea">';
var upPageHtml ='';
var downPageHtml ='';
//以下是可以自行設定資料 (開始)
var pageCount=8; //每頁筆數
var displayPageNum=4; //顯示幾個分頁
var firstPageWord = '1'; //顯示第一頁的文字
var upPageWord ='« Previous'; //顯示上一頁的文字
var downPageWord ='Next »'; //顯示下一頁的文字
var myHome = '«« Home'; //顯示首頁的文字
//以上是可以自行設定資料 (結束)
lb1 = document.getElementById("Label1");
if (lb1){
a = lb1.getElementsByTagName("a");
for (i=0; i<a.length; i++) {a[i].href += '?max-results='+pageCount;}
}
ptlbs = document.getElementsByClassName("post-labels");
for (j=0; j<ptlbs.length; j++) {
if (ptlbs){
a = ptlbs[j].getElementsByTagName("a");
for (i=0; i<a.length; i++) {a[i].href += '?max-results='+pageCount;}
}}
for(var i=0, post; post = json.feed.entry[i]; i++) {
var date2 = post.published.$t;
timestamp = encodeURIComponent(date2.substring(0,19)+date2.substring(23,date2.length));
var lablePage = '';
var category ='';
if(isLablePage){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
category = encodeURIComponent(post_category.term);
if(encodeURIComponent(post_category.term)==thisLable){ 
if(labelCount==0 || (labelCount % pageCount ==(pageCount-1))){
if(labelCount==0 || thisUrl.indexOf(timestamp)!=-1 ){
htmlPoint = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
}
labelCount++; 
}}
}//end if(post.category){
}else{
if(i==0 || (i % pageCount ==(pageCount-1))){
if(i==0 || thisUrl.indexOf(timestamp)!=-1 ){
htmlPoint = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}}}
for(var p =0;p< htmlMap.length;p++){
if(p>=(htmlPoint-displayPageNum-1) && p<(htmlPoint+displayPageNum)){
if(fFlag ==0 && p == htmlPoint-2){
if(htmlPoint==2){
if(!isLablePage){
upPageHtml = '<span class="showpageNum"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(eFlag ==0 && p == htmlPoint){
downPageHtml = '<span class="showpageNum"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
if(p==(htmlPoint-1)){
html += '<span class="showpagePoint"><u>'+htmlPoint+'</u></span>';
}else{
if(p==0){
if(!isLablePage){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}}
}//end if(p>=(htmlPoint-displayPageNum-1) && p<(htmlPoint+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(htmlPoint>displayPageNum+1){
if(!isLablePage){
html = upPageHtml+' <span class="showpageNum"><a href="/">'+ firstPageWord +' </a></span>... '+html +' ';
}else{
html = upPageHtml+' <span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'+ firstPageWord //+' </a></span>... '+html +' ';
}}
if(htmlPoint>1 && htmlPoint<=displayPageNum+1){
html = upPageHtml+' <span class="showpageNum"></span>'+html +' ';
}
if(htmlPoint<(postNum-displayPageNum-1)){
html += '<span class="showpageNum">... <a href="'+htmlMap[htmlMap.length-1]+'"> '+(postNum-1)+'</a></span>';
html += downPageHtml;
}
if(htmlPoint<(postNum-1) && htmlPoint>=(postNum-displayPageNum-1)){
html += downPageHtml;
}
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = '<span class="showpagePoint"><a href="/" style="text-decoration: none">'+myHome+'</a></span>'+'  '
blogPager.innerHTML += html+'<a href="http://freetongdiy.blogspot.hk/2014/11/blogspot.html"><img src="https://www.google.com/images/icons/product/blogger-16.png" align="right"/></a>';
}}}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=9999" type="text/javascript"></script>
<!-- End Page Navigation -->

可以正確得到效果, 首先需要決定每頁所顯示的文章數量,
[設計]> [設定]> [文章和留言]> [顯示最多]> [主頁上的文章]
如果是 8 篇, 就輸入 [8],
而語法中第 30行, "pageCount" 也改成 8.

在"數字分頁"顯示時, 個人覺得需要一個"一鍵回到首頁"的按鈕.
語法中第 35 行, "var myHome =" 自選"首頁"名稱
語法中第 138 行, "blogPager.innerHTML =" 加入這個功能

除了首頁可以得到"數字分頁"效果, 標籤(Labels)都是可以.
可惜的是它原先預設是顯示20篇, 跟"pageCount"不相符, 語法中便會出現計算錯誤.
前人多是介紹在後台的 HTML 入手, 在合適位置上加上 "?max-results="指令. 一旦修改後台, 容易出錯, 所以我在語法裡頭加入2段程式, 自動加上標籤時最多顯示篇章功能. 那麼使不需要接觸後台了.
語法中第 37~41 行, "Label1" widget 裡的標籤
語法中第 42~47 行, "post-labels" 網誌裡的標籤

網誌裡還2個, 會顯示多篇幅的工具, "搜索" & "文章封存",
這2個都是不好處理的, 再加上單頁顯示時, 根本不需頁數字分頁,
所以 "搜索"; "文章封存"; "單篇文章" 都是用回原本的分頁模式.

2014年11月1日

網誌因應瀏覽器; 自動修正排版位置

Blogger 的標準範本, 是一個固定的版面.
以我所用的那個為例, 整個寬度是 960px, 而右邊的 widget 行是 310px, 固定在瀏覽器中間. 不論你如何改變瀏覽器的大小, 它也是不會改變.

這個相信有它的原因, 一旦改變, 所有的圖片位置, 或是文字排版, 都有可能完全走位.
但是我想改變, 因為我用了上次介紹的 "圖片自動空間調整" 方法.

如果是用"標準範本", 又是 2 行架構, 一行網誌, 一行 widget.
只要到後台 HTML, 簡單的修改 3 句, 大功告成.

[設計]> [範本]> [HTML]>
找到 "template-skin" 把內容打開,
把 content.width 的預設值由 ~~960px~~ 改成 100% ;
把 main.column.right.width 的預設值由 ~~310px~~ 改成 40% ;
把 padding-righ 的預設值由 ~~$(main.column.right.width)~~ 改成 30% ;
存檔完成.

影片看看成果

2014年10月25日

Blogspot 圖片自動空間調整

當貼上圖片時, 有沒有試過, 圖片超大而超越範圍呢.

原來標準的 blogger 範本, "網誌文章"寬度是 650px,
但是, 在編輯圖片大小時, 可選擇的幾個參數, 不是過小, 就是過大.

小 width="200"
中 width="320"
大 width="400"
較大 width="640" (因為範本裡, img 都會被 CSS 加上一定的四邊空間, 結果是超越範圍)
原大 ~ (沒有設定 width, 即是 img 的寬度是多少, 就是多少)

其實有 2 個方法可以解決這個問題,
方法1~ [設計]> [範本]> [自訂]> [調整寬度]> (把"寬度"加大)
方法2~ 個人推薦的方法

只需加入一句 CSS 語法, img 便會完全的自動調整, 不會過大的超越範圍.
[設計]> [範本]> [自訂]> [進階]> [新增 CSS]>

.post-body img {max-width: 98%; height: auto}

2014年10月24日

WIDGET 展開/隱藏按鈕再度加強 V3版

Widget 展開/隱藏後掛入方式, 之前設計了 2 個版本,
當中有一個問題, 一直沒有好好的解決,
把一些"小工具"展開或是隱藏之後, 一旦跳到其他位置, e.g. 首頁; 內文; 標籤 ...
Widget 展開模式又會回到預設值. 又以"網誌封存"最不方便.

這次設計的第 3 版, 可以保留最後的展開/隱藏狀態,
而且把用戶自行設定的部分, 用比較簡單的方法設定.
介面上設計成 radio (單選), 或是 checkbox (多選)的共存模式, 簡單方便.

Widget 的位置安排

建議把本程式放在, 需要控制的其他小工具之上.
當操控的時候, 不會因為 widget 隱藏的同時, 本程式跳到另一個位置.

(簡易安裝方式, 按圖了解 )

程式碼用簡易方式安裝, 不用修改後台範本.

<!-- /* Widget 展開隱藏 按鈕 V3.0 */ -->
<script>
  var Widget_ID = ["BlogArchive1", "HTML2", "HTML1", "Followers1"];
  var Widget_name = ["<網誌封存>", "<最近留言>", "<各路來賓>", "<追蹤者>"];
  var start_state = "false|true|true|true|"
  var delay_time = 0
</script> 
<script src="https://googledrive.com/host/0B9w7kASMsnuxVk1KZE5mMUh3NlE/widget_onoff_V3.js"/></script>

介紹中用了 4 個 widget 控制, 當然這個跟你的網誌一定不相同,
所以, 你需要決定及設計, 你所需要的.

程式的第 3 行,
widget_ID 就是後台裡, widget 的唯一名稱, 只要跟程式碼的方式寫上, 2 個; 3 個或是 4 個都不是問題. 基本把名稱放在 " " 裡頭便可以. 程式結構不要修改. (往下有找出 ID 的方法)

第 4 行, 是 widget_name, 對應上一行的 ID, 一對一的顯示名字.
第 5 行, 是顯示/隱藏的預設值, 對應 ID 一對一的, false= 隱藏, true=顯示. 分格號是 | .
第 6 行, (22-Nov-2014 更新) 看似 0 秒都可以, 快速地馬上執行.
是延遲執行參數, 因為程式比其他 widget 更早載入, 所以需要時間等待其他widget載入後, 才作出處理. 1000 即是 1 秒鐘時間, 如果你的網誌比較複雜, 可能需要更長時間延遲, e.g. 1500

最簡單的方法, 找出 Widget ID

利用 Chorm 瀏覽器內置的 Developer Tools,
簡單的標示選擇了 widget 名稱, 用滑鼠右鍵點下 "檢查元素",
它會彈出 Developer Tools, 在 widget 名字上列 id, 就是 Widget ID 名稱.

獅子山下

圖片來源: http://www.ntdtv.com/xtr/b5/2014/10/23/a1148381.html

2014年9月30日

黃絲帶

2014年9月28日

Blogspot 列表模式-文章標題;自定大小的首幅圖片;部分內文;閱讀更多

相片為主的 Blogger, 多是以飲食; 旅遊; 攝影... 等等. 大圖片正是他們的要求.
可是相片一多, 在 Blopspot 的首頁; 或是查詢結果時, 總是長長滿滿的一整頁.
好不容易, 才找到某個內容而切入主題網頁文章.

我之前也出過幾篇, 關於 "讓 Blogger 只顯示文章標題; 部分內文 &小圖片" 的文章,
它們有著不同的定位點. 但是, 都有一個相同的問題: ｢圖片太小了｣

可以顯示大圖片的方法是有的, 但是需要修改的地方過多, 不好理解.
找到了一個比較簡單, 跟以往一樣, 以標準的 Blogspot 的 Template(範本), 只是更換了 HTML 裡頭的一句...
<b:include data='post' name='post'/> 得出的效果算是不錯.

跟以往相比, 這一次的要求是...
~ 單一文章時, 全篇顯示. 其他的情況以"列表模式"顯示
~ 只顯示文章首幅圖片, 而且可以設定顯示大小.
~ 部分內文; 閱讀更多同樣保留了
~ 新增了留言; 標籤兩項資訊

圖片可以設定顯示大小,
主要是利用 Javascript 找出 thumbnailUrl 內容, 以 replace 的方式改變了圖片大小設定值.
簡單的講解一下, 原本"小圖"是以 s72-c 這個數值為顯示預設.
s72 = 72px ; -c = 正方型(長型圖片以切頭切尾方式, 只剪裁中間的部份)
所以只要把這個更換, e.g. s400 便可以得到 400px 的比例圖片.

因應大圖片顯示方式, 可以選擇兩個不同的排版文效果.

置中排版; 比例圖片
只需要修改第 15 行"s400"這組數值, 便可以更新圖片大小設定值. e.g."s600"

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(中間);部分內文;閱讀更多 start-->

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div>
<a expr:href='data:post.url' imageanchor='1'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s400"); // 設定圖片大小; s400 即是長邊是400px的比例圖片
      document.write("<img src='"+ pic +"' style='display:block; margin:auto;margin-top:10px;'/>");
    })()
 </script>
 </a>
 </div>
<div style='margin-top:10px;'><data:post.snippet/></div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
<!-- 留言數量 -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast !=   "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
 </b:if>

<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(中間);部分內文;閱讀更多 end-->

左右排版; 正方型圖片
只需要修改第 15 行"s200-c"這組數值, 便可以更新圖片大小設定值. e.g."s300-c"

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
 
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<div>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<div>
<a expr:href='data:post.url' imageanchor='1' style='clear:left; float:left; margin-right:10px;'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s200-c"); // 設定圖片大小; s200-c 即是200px正方型
      document.write("<img src='"+ pic +"' />");
    })()
</script>
</a>
<div style='margin-top:10px;'><data:post.snippet/></div>
<div style="clear:both"></div>
 </div>
<div style='clear:left; float:left; margin-right:10px; margin-top:10px;'>
<!-- 留言數量 -->
<span class='post-comment-link' >
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;' >
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </div>
 </b:if>
 
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->

現時本網誌所使用的結構, 左右排版; 大圖示.

<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
 
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<a expr:href='data:post.url' imageanchor='1' style='clear:left; float:left; margin-right:10px;'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s350");// 設定圖片大小, e.g. S350
     document.write("<img src='"+ pic +"'/>"); 
    })()
</script>
</a>
<div><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3><div>
<div style='margin-top:10px;'><data:post.snippet/></div>
<div style='clear:both'/></div>
<div style='clear:left; float:left; margin-right:10px; margin-top:10px;'>
<!-- 留言數量 -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </div>
 </b:if></b:if>
 
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->

需要修改 [範本](Template), 所以請先行備份, 以準備不時之需.
步驟為 [設計]> [範本]> [編輯HTML]>
在長長程式碼裡頭, 按下鍵盤上的 [Ctrl]+[F] , Search 欄位出現了.
尋找這一句, <b:include data='post' name='post'/> 全篇應該只有一句.
更換成為以上的分析流程...

有關 Toggle Visibility 功能

2014年9月14日

Google Cardboard (老翻版)

Google Cardboard 一件十分有趣的手機配件,
它在 Google I/O 2014 免費送給參與人仕的.

今日收到一份 Google Cardboard (老翻版)
基本是以原版設計, 但用上最差的物料, 左併右合而成.

包裝更是只得"一包"

二話不說, 馬上摺合成形, 一試手機上 3D 感受.

Cardboard 的網頁
https://cardboard.withgoogle.com/

YouTube 上的視頻簡介
https://www.youtube.com/results?search_query=google+cardboard

Cardboard Apps
https://play.google.com/store/apps/details?id=com.google.samples.apps.cardboarddemo

Chrome Experiments for Cardboard 更多網上 3D 效果
http://vr.chromeexperiments.com/

2014年9月11日

Moto X 試一試 (4.4.4 KitKat 更方便的改變)

Moto X 的更新文件寫了...
"Android 4.4.4 KitKat 此版本包含電源設定檔、數個穩定性、框架的準確度改善，以及包含 OpenSSL 更新的安全性修正。"

大部分都是看不見, 只有日後的使用感受, 才會察覺得到.

看見的有...

可以顯示或是隱藏行動網路名稱

相機拍攝時可以開啟或是關閉快門音效

手機撥號器帶有新的 圖形配置及色彩 , 改善一致性與可用性

支援新 Apps "Motorola 提示"
https://play.google.com/store/apps/details?id=com.motorola.bodyguard

還有, 一網友在之前提問過...
"ching你好,我想請問moto x升級4.4.4係唔係冇左otg usb lan功能"

試驗做過了, 答案是可用 LAN 線上網.

2014年9月9日

Moto X 試一試 (更新 4.4.4 KitKat)

今天是"中秋節"翌日的公眾假期.
一早得來一個消息, 等了很久的 Moto X (加版XT1058), 正式啟動了更新.

版本是 212.44.26.en.CA
"同意"後, 選擇你的下載方式.

系統更新文件共有 141.7MB
"立即安裝"大約用上 10 分鐘時間.

自動關機後, 安裝系統更新.
再次 Boot 機, 我的有 207個文件進行最佳化.
(相信是用了 ART 模式的關係)

最終更新完成了. Android 版本 4.4.4

更新的內容, Moto 網上是這樣說明的...
https://motorola-global-chn.custhelp.com/app/answers/detail/a_id/100638

Moto X - Android™ 4.4.4, KitKat®
簡介

我們很高興在此發表 Motorola Moto X 的最新軟體更新。您可透過此升級為 Moto X 取得最新版的 Android 作業系統 (Android™ 4.4.4

KitKat®)，以及新功能、增強功能和錯誤修正。如需 Motorola 更新與維修的更多資訊，請造訪 www.motorola.com/mymotox。

附註：安裝此更新後，您便無法降級到舊版軟體。

增強功能

此 Moto X 軟體更新是供所有使用者使用。安裝軟體更新後，您將會看到數個增強功能和變更，包括：

Android™ 4.4.4 KitKat®
Android 4.4.4 KitKat 是最新版的 Android 平台。此版本包含電源設定檔、數個穩定性、框架的準確度改善，以及包含 OpenSSL 更新的安全性修正。

相機 - 改善圖片品質
改善相機圖片品質，包含更一致的曝光、更真實的閃光色彩、改良在低光源環境使用正面相機拍出來的相片品質。

相機 - 暫停視訊錄製
新增可利用取景器上便利的 [暫停/繼續] 按鈕暫停視訊錄製的功能。

更新手機撥號器
更新的手機撥號器具有全新的圖形配置及色彩，改善一致性與可用性。

可下載「Motorola 警示」應用程式
全新「Motorola 警示」應用程式可將內含您目前位置的提示定期傳送給您所選的聯絡人。現在可從 Google Play 商店下載。

2014年9月6日

文章嵌入程序碼 Codebock & Google Code Prettify 筆記篇

文章中加入程式碼, 很早之前已經有 Codeblock 這個 CSS 的小工具.
再加上 Google Code Prettify 為程式裡的文字上色. 可以講它是最簡單展示方法.

但是, Codeblock 一般都是灰色底, 算是用 Google Code Prettify 為文字上了色.
一旦句子超多, 它會變得不好閱讀.
所以, 我把它設定到, 有順列序號, 文字上色, 隔行背景上色, 更好的指示及了解.

先列出我使用的程式碼...
Codeblock 找不到最初開發的版本, 只好介紹我手上的.
Google Code Prettify 有它的網址, 有更多可選用變化, 可供參考.
https://code.google.com/p/google-code-prettify/

當中我有作出小量修改, 以合乎我的要求.
Codeblcok 裡, 我刪掉了 font-family & font-size 兩個指示, 以及把 background: #ffffff 全白色.
Code Prettify 除了用載入了它的 Script, 還加入了它的 Style CSS 支援程序.

<!-- CodeBlock Start -->
<style>
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
overflow:auto;
background: #ffffff url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:350px;
line-height: 1.2em;
}
</style>
<!-- CodeBlock End -->

<!-- https://code.google.com/p/google-code-prettify/ Start -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>
<!-- https://code.google.com/p/google-code-prettify/ End -->

只要把它全部貼到 Blog 裡頭,
打開 [版面配置]> [新增小工具]> [HTML/JavaScript]
不用寫入標題. 一按[儲存]已經完成.

編寫文章, 需要加上程式碼講解展示時.
只直接在[撰寫]裡貼上程式碼, 再轉到[HTML]模式, 人工加入 <pre>...</pre> 指令便可以.

Code Prettify 有多個參數, 可以得出不同的變化, 列出常用的, 方便日常使用.

單一 Codeblock 模式

<pre class="codeblock">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

加上 prettyprint 為文字上色

<pre class="codeblock prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

加入 linenums:1 列出序列號 (:1 即由1開始, 改為 :10 便由序列號10開始)

<pre class="codeblock prettyprint linenums:1">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

只是用 prettyprin, 得出一個簡單外框, 文字有上色效果

<pre class="prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
// end hiding contents from old browsers  -->
</script>
</pre>

用 <span class="nocode">...</span> 把全段或某一段包起, 便不會啟用上色功能

<pre class="prettyprint">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
<span class="nocode">document.write("Hello World!")</span>
// end hiding contents from old browsers  -->
</script>
</pre>

<pre class="prettyprint linenums">
<script type="text/javascript">
<!-- to hide script contents from old browsers
  document.write("Hello World!")
<span class="nocode">document.write("Hello World!")</span>
// end hiding contents from old browsers  -->
</script>
</pre>

載入 Google Code Prettify 可以加入不同的 Skin, 會有不同的版面結構.
http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian"></script>

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=doxy"></script>

2014年9月1日

New Blogger Template : FlatUI 更新手記

近日更新了 Blogspot 的 Template(範本), 名稱是 FlatUI
http://www.stylifyyourblog.com/2013/04/FlatUI-Responsive-Blogger-Template.html

整體佈局, 個人萛是喜歡, 只是小小的, 修改了一些字型及色彩.
它的 post 以單圖 + 文章片段表列方式展示. 第一眼, 已經選定了它.

可是, 圖片總是怪怪的, 是正方型 200x200, 圖像變形, 不成比例, 細小圖像也會放大到 200x200.
動手修改了它的 javascript, 控制圖片大小部分程式碼, 順手留下一個手記.
~ 加大圖像到 300x300, 按比例顯示.
~ 不足300的, 便以原圖大小顯示.

原本的 javascript 是這樣子(部分節錄),
預設圖片寬度及高度都是 200;
取得圖像數量, 放到變數 img 裡;
讀出第一個圖像, 並以預設值顯示. 即是寬度及高度都是 200, 正方型.

img_thumb_height = 200;
img_thumb_width = 200;
var img = div.getElementsByTagName("img");
if(img.length>=1)
{ 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
}

修改後的 javascript,
更改預設圖片寬度及高度是 300, 圖像比較大一點;
新增 2 個變數, img_width & img_height;
求出圖片寬度, 小於300便用回它原本的, 大過300便設定為300, 放到 img_width 裡;
求出圖片高度, 小於300便用回它原本的, 大過300便設定為300, 放到 img_height 裡;
如果原圖片的寬度 > 高度時...
即以 img_width 為準, 高度為 auto 顯示圖片;
否則, 便以 img_height 為準, 寬度為 auto 顯示圖片.

img_thumb_height = 300;
img_thumb_width = 300;
var img = div.getElementsByTagName("img");
if(img.length>=1)
{
if(img[0].width<img_thumb_width){img_width=img[0].width}else{img_width=img_thumb_width}
if(img[0].height<img_thumb_height){img_height=img[0].height}else{img_height=img_thumb_height}
if(img[0].width>img[0].height)
 {
 imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_width+'px" /></span>';
 } else {
 imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" height="'+img_height+'px" /></span>';
 }
}

2014年8月30日

請緊握扶手

在香港, 乘搭公共交通時, 常有提醒的廣播 [請緊握扶手]

而其中一公司的車上, 貼上一個非常清色的標示...

圖文並茂, 但是...
他的手是不是太過用力, 看似扶手也變型了. (留意尾指跟扶手的位置)

2014年8月17日

WhatsApp 跟我走，舊機換新機

Android 手機, 基本的個人資料, 及數據. 全部都是自動地雲端備份.
一旦轉換新手機, 只要相同的 login ID, 所有的便會自動還原.

可惜, 港人最用的 WhatsApp 不可以.

但是, 只要你完全符合以下幾點要求, WhatsApp 是可以跟隨我走.
1) 新舊手機系統, 同樣有 ICS 或以上. (不用root機)
2) 新舊手機跟 PC的驅動程式已經安裝好, 並且可以正常連上.
3) 新舊手機安裝 Apps "ASTRO"
https://play.google.com/store/apps/details?id=com.metago.astro&hl=zh-TW
4) 新舊手機安裝 Apps "Helium"
https://play.google.com/store/apps/details?id=com.koushikdutta.backup&hl=zh-TW
5) 安裝 Helium 電腦版
http://www.clockworkmod.com/carbon

WhatsApp 是由 2 個空間結合而成,
主程式以及對話數據, 另一個是多媒體在SD上的圖片&影片.
所以要完全地轉到新機, 2 個空間也要複製.

開工 !
在新手機裡, WhatsApp 不需要先行安裝, 最後會自動還原.
先停止手機上的數據服務, 免了在過程中, 有訊息更新.

現在由舊手機開始...
打開 Helium, 它會先行確立打開"USB 偵錯".
還有一點, USB連線方式一般為 MTP (但有一些裝置是用 PTP的),
Helium 會自動為你選擇合適方法.