公佈欄

2014年5月8日 星期四

weebly 備份工程

擔心weebly不穩定或要收費, 先來個未雨綢繆, 用google blogspot同步我的網誌!

在此記下網誌設定的相關資料備忘!

1)申請同帳號的新網誌 9ihualien.blogspot.com
2)下載安裝 windows live writer  註冊 9ihualien時, 帳號:abbe08@gmail.com. 密碼需至google 資訊主頁/我的帳戶/已連結的應用程式和網站/管理應用程式專用密碼. 重新登入後, 新增一暫用密碼, 回 live writer輸入該密碼即可
3)windows live writer自動上傳的相片會存到google plus 的「windows live writer」相簿內.
4)新增FB滑動側欄成功! 參考:http://cookiemix.blogspot.tw/2013/09/pixnet-blogger.html
5)參考底下文章, 成功設定標頭圖片輪播功能, 圖片大小取 960 x 165大小並上傳至g+相簿. 複製圖片URL時, 記得將w與h改為960, 165
http://www.wfublog.com/2013/10/blogger-random-banner.html (隨機顯示部落格標頭圖片)
6)隱藏上方的導覽列, 新版可經由版面配置中導覽列的編輯功能, 關閉之.
7)參考 http://www.wfublog.com/2014/02/blogger-drop-down-menu-easy-installation.html 安裝導覽列選單功能, 但沒能成功. 提問中... 放棄, 改只放網頁小工具.
參考 http://www.wfublog.com/2012/10/chrome-developer-tool.html 學會利用開發工具暫時性修改HTML值觀察實際改變, 滿意後再依測試所得數據更改範本/HTML內的值. ※有些CODE被隱藏需注意是否得展開呈現. 方能被搜尋到. 一併放棄固定導覽列的功能
8)新增網頁 - 文章列表(採日期+按讚數排列) 參考:http://www.wfublog.com/2014/03/blogger-toc-date-like-sonic.html
9)參考 http://www.wfublog.com/2012/11/bulletin-board.html 完成首頁公佈欄, 其餘頁面會自動收縮.
10)參考 http://www.wfublog.com/2013/11/traditional-simplified-chinese-switch-cross-browswers.html 完成簡繁轉換功能, 且成功放置在公佈欄的第四列右側, 後面有英、日、簡轉換. 因此取消此處的設定.
11)參考 http://www.wfublog.com/2012/05/lazy-loadblogger.html 成功安裝 圖片延遲載入外掛, 待開始備份weebly文章後即能看出是否具效益?
12)參考 http://www.wfublog.com/2012/07/colorful-underline.html 使用自訂底線(圖已上傳至自己的google driver),藍色用b1, 綠色用g1, 原文中紅色底線用 r. 為一致改為 r1, 且增橘色(o1), 與黃色(y1).
13)參考 http://www.wfublog.com/2014/02/font-family-chinese-cross-platform.html 完成標題及內文字體的修改.
14)參考 http://www.wfublog.com/2013/07/blogger-post-page-views-update.html 與香港的 http://www.koosan.pw/2013/10/add-statistics-pageviews-to-blogger.html (非常有用!) 完成單篇文章瀏覽計數功能, 但無法顯示在標題右方, 目前先放在內文右側.
2014/06/17發覺7天前至目前的文章沒有顯示瀏覽計數, 重看一遍文章後, 發現存在雲端硬碟/weebly備份資料夾內的 GA to 試算表 9ihualien 表單檔案內的SCRIPT觸發器消失無蹤. 重新加入每小時觸發一次的功能. 並先用GET DATA取得數據. 可得到最新的文章瀏覽數了.

15)參考 http://www.wfublog.com/2013/03/blogger-google-custom-search.html 用自訂的 google 搜尋引擎取代預設的.
16)參考 http://www.wfublog.com/2013/01/multi-tree-label-update.html 完成多層次標籤文章分類功能.暫訂的大分類為:遊記、藝文、故事、液晶維修. 改為:科技、藝文、生活、教育.
17)參考 http://www.wfublog.com/2013/05/google-translate-flag-link.html 增加翻譯為英、日、簡體功能, 置於公佈欄右側
18)參考 http://www.wfublog.com/2012/07/blogger-tabbed-sidebar.html 在側邊欄成功加入 TAB 多標籤置放 自訂 HTML/JAVA 小工具程式碼功能, 並成功隱藏小工具標題.
19)參考 http://www.wfublog.com/2012/08/blogger-tabbed-sidebar-official-tool.html 在側邊欄成功加入第二套 TAB 多標籤置放 google 內建小工具 功能.
其中,第二套的程序經摸索後, 列在下方. 供日後有需要時, 需再增加第三、第四套 TAB 系統時參考:
---------------
【第一套多TAB系統程式碼】適用使用自訂 html/java 程式碼
<style type='text/css'>
.Menubox_over {
color: #333;
font: bold 14px arial;
border-top: 1px solid #777;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 3px solid #fffff5;
border-bottom: 2px solid #fffff5\9;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding: 2px 5px 1px 5px;
cursor: pointer;
background-color: #fffff5;
}

.Menubox_out {
color: #333;
font: bold 14px arial;
border-top: 1px solid #777;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
border-bottom: 0px solid #777\9;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 2px;
padding-bottom: 0px\9;
cursor: pointer;
background-color: #ddd;
}
</style>

<div style="margin-top: 5px; border-bottom: 2px solid #777;">
&#12288;<span class="Menubox_over" id='one1' onclick='setTab("one",1,3)'  title='顯示 1st 工

具'>搜尋本站</span>&nbsp;
<span class="Menubox_out" id='one2' onclick='setTab("one",2,3)' title='顯示 2nd 工具'>備用

1</span>&nbsp;
<span class="Menubox_out" id='one3' onclick='setTab("one",3,3)' title='顯示 3rd 工具'>備用

2</span>
</div><p/>

<div id='con_one_1'>
<script>
  (function() {
    var cx = '004884922978561393142:t236ogv9ci8';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
</div>

<div id='con_one_2' style='display:none'>
第二個 HTML 小工具內容(需為自訂HTML/JAVA)
</div>

<div id='con_one_3' style='display:none'>
第三個 HTML 小工具內容(需為自訂HTML/JAVA)
</div>

<script>
function setTab(name,cursel,n){
  for(var i=1; i<=n; i++){
    var menu = document.getElementById(name + i);
    var con = document.getElementById("con_" + name + "_" + i);
    menu.className = (i == cursel) ? "Menubox_over" : "Menubox_out";
    con.style.display = (i == cursel) ? "block" : "none";
  }
}
</script></p>

-----------------------------------------
【第二套多TAB系統程式碼】 適用使用 google 內建小工具, 非自訂 html/java 程式碼
<div style="margin-top: 5px; border-bottom: 2px solid #777;">
&#12288;<span class="Menubox_over" id='one4' onclick='setTab2("one",4,6)'  title='顯示G+徽

章'>G+徽章</span>&nbsp;
<span class="Menubox_out" id='one5' onclick='setTab2("one",5,6)' title='著作人'>著作人

</span>&nbsp;
<span class="Menubox_out" id='one6' onclick='setTab2("one",6,6)' title='G+'>G+</span>
</div><p/>

<div id='con_one_4'>
第四個 HTML 小工具內容
</div>

<div id='con_one_5' style='display:none'>
第五個 HTML 小工具內容
</div>

<div id='con_one_6' style='display:none'>
第六個 HTML 小工具內容
</div>

<script>
function setTab2(name,cursel,n){
  for(var i=4; i<=n; i++){
    var menu = document.getElementById(name + i);
    var con = document.getElementById("con_" + name + "_" + i);
    menu.className = (i == cursel) ? "Menubox_over" : "Menubox_out";
    con.style.display = (i == cursel) ? "block" : "none";
  }
}
(function() {
  var a = document.getElementById("PlusBadge1"),
      b = document.getElementById("Profile1"),
      c = document.getElementById("PlusOne1"),
      x = document.getElementById("con_one_4"),
      y = document.getElementById("con_one_5"),
      z = document.getElementById("con_one_6");

  x.innerHTML = a.innerHTML;
  y.innerHTML = b.innerHTML;
  z.innerHTML = c.innerHTML;

  a.parentNode.removeChild(a);
  b.parentNode.removeChild(b);
  c.parentNode.removeChild(c);
} )();
</script></p>
---------------

20)參考 http://www.wfublog.com/2012/09/related-post-thumbnail.html 完成在文章末增加相關文章的推薦圖文連結.
21)隔日清晨起床改進推薦相關文章沒有出現圖片問題, 原來是複製原 weebly 網頁圖片會以 URL 複製過來, 而非上傳圖片至 google 帳號的相片庫. 改為自PC上傳圖片後, 就能自動取得圖片, 而且呈現在右側邊欄的最新文章亦能呈現圖片, 很棒!
22)2014/05/11預計:最上方首頁....功能表能有標籤或最近文章功能. 在手機上試看看能不能有效呈現(版主的回覆看不懂!)
23)2014/05/11一直無法 debug 導覽列的錯誤 , 但參考 http://01mistery.blogspot.com/2010/01/blogger-pages.html 方法成功加入自己的超連結在「網頁」導覽列上.
24)參考 http://www.wfublog.com/2012/07/recent-post-thumbnail.html 及 原創作者 http://abintech.twidv.com/2008/01/blog-post.html 兩篇文章, 成功完成側欄的「最新文章」功能. 因為始終無法按第一則參考網頁內容成功完成. 是結合與原作者的程序編修後成功的.因此特別將成功的 CODE 記錄於下. (另外也將 CODE 置於「網頁」導覽列, 成功的讓行動裝置亦能使用.
--------------------------
<div id="newPosts">
  <noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
var nPostStartIndex = 1;
var nPostShow = 10;

function showRecentPosts(nIndex) {
  if (!nIndex)
    nIndex = nPostStartIndex;
  var sFeedURL = '/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
  var script = document.createElement('script');
  document.getElementById('newPosts').innerHTML = '載入中 <blink>...</blink>';
  script.setAttribute('src', sFeedURL);
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

function generatePosts(json) {
  function compareentry(a,b) {
    order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace

(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
    return 0-order;
  }

  var sHTML = '<ul>';
  var sortentry = json.feed.entry.sort(compareentry);
  var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
  var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
  for (var i = 0, Post; Post = sortentry[i]; i++) {
    if (i >= nPostShow)
      break;
    var title = Post.title.$t;

    var pic;
    if (Post.media$thumbnail){
      pic = Post.media$thumbnail.url;
      pic = pic.replace("s72-c","s216");
    }
    else {pic = "http://3.bp.blogspot.com/-8cd44G39Nbo/UA1_zN67aRI/AAAAAAAADc0/l55W6lc8VIo/s1600/no-image.jpg"}

    var j = 0;
    while (j < Post.link.length && Post.link[j].rel != "alternate")
      j++;
    var link = Post.link[j].href;
    var timestamp=Post.published.$t.substr(0,10);

    // 原abin    sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> - '+timestamp+'</span></li>';

    sHTML += '<li><a href="'+ link +'" style="float:left; width:110px; margin-right: 10px;"><img src="'+ pic +'" style="width: 108px; border: 1px dotted

lavender; box-shadow: 2px 2px 2px #d6d6d6; padding: 0px; "/></a><div><b><a href="'+ link +'">'+ title +'</a></b></div><div style="clear: both;"/></li>';

  }
  sHTML += '</ul>';
  sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
  document.getElementById('newPosts').innerHTML = sHTML;
}

function generatePostLink(nFetch, nIndex, nTotalPost) {
  var bOld = (nFetch > nPostShow);
  if (bOld) nFetch = nPostShow;
  var sResult = '<p align="right">最新 '+nIndex+'-'+(nIndex+nFetch-1)+', 共: '+nTotalPost+'.&nbsp;&nbsp;篇';
  if (nIndex > nPostStartIndex)
    sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts">&lt;&lt;</a>&nbsp;&nbsp;';
  if (bOld)
    sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">&gt;&gt;</a>';
  sResult += '</p>';
  return sResult;
}
</script>

<script language="javascript">showRecentPosts();</script>

--------------------------

25)參考 http://www.wfublog.com/2012/07/popular-post-thumbnail.html 完成側欄 熱門文章 的功能. 但因採用 google 內建的 熱門文章小工具, 因此無法置於「網頁」導覽列中.

26)研究分頁. 標籤. 置入「網頁」導覽列的可能性.

27) 編輯自己的缺圖檔圖片. 供使用. (2014/5/11 完成) google driver 圖檔URL : https://googledrive.com/host/0BzwTWZZPM4eeU3lTcE1YN3QwWHM/no_pic.jpg

28)參考 http://www.pilipress.com/2013/08/blogspot-tw-to-blogspot-com.html 在<head>下增加 script 可成功讓blogspot.com 不會自動轉成 blogspot.tw(或其它國家代碼)

29)參考 http://www.pilipress.com/2013/11/blogger-sitemap-all-links.html 提交 1000個 URL 到GOOGLE與BING 2大搜尋引擎中.

30)參考 http://www.wfublog.com/2014/03/blogger-toc-label-like-sonic.html 成功的在含行動版在內的「網頁」導覽列之中增加 按標籤分類的文章列表功能

31)參考  http://www.wfublog.com/2014/04/blogger-mobile-template-custom-tips.html?showComment=1400054039439#c2553281680637774032 終於讓行動版網頁也如網頁版般, 能在最上方呈現「網頁導覽列」, 且加碼於最下方增加標籤小工具, 讓行動版網頁更人性化. 此外最上的標頭圖片亦能隨機呈現, 增加了多樣性.

32)一直覺得手機用的行動網頁版怪怪的, 原來是圖片很小.....找了半天, 又去問人...最後終於自己找到解答了. 將原本為避免破壞PC版網頁版面而縮小圖片大小的語法 height="480" width="640" 改為 width="100%" 後, 就能兼顧 PC 版與行動版網頁的圖片大小了. 目前在6.1吋及4吋手機上都能自動將圖片展開為手機螢幕寬度了. ^^ 只是針對已PO的84張圖片又要逐一修改, 真的是浩大的工程啊!

33)網站自 weebly 備份至 blogspot 於 2014/5/20 完成.

34)成功申請到 google adsense 廣告帳戶, 並已應用於 callouttw 部落格且可成功在行動版裝置顯示行動廣告. 小工具上加入於資訊主頁/我的廣告中新增的廣告script. 置於標頭, 且在script中加入 : mobile='yes'

35)成功放置 google adsense廣告於 weebly上, 但有無收益還得繼續觀察. 怕廣告嚴重影響網頁載入效率, 參考 http://www.wfublog.com/2012/09/bloggerads-jam.html 更改廣告程式碼.

36)成功申請到 BloggerAds, 且已放置廣告到 callouttw 與 9ihualien中, 但似乎無法顯示於行動裝置上.

37)20140923 取消BLOGGERADS的廣告提高載入網頁效率. FB滑動側欄粉絲團改為 9ihualien 任拔包車旅遊 http://www.facebook.com/9ihualien