在此記下網誌設定的相關資料備忘!
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/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)
11)參考 http://www.wfublog.com/2012/05/lazy-loadblogger.html 成功安裝 圖片延遲載入外掛, 待開始備份weebly文章後即能看出是否具效益?
12)參考 http://www.wfublog.com/2012/07/colorful-underline.html 使用自訂底線(圖已上傳至自己的google driver),
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
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 系統時參考:
---------------
<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;">
 <span class="Menubox_over" id='one1' onclick='setTab("one",1,3)' title='顯示 1st 工
具'>搜尋本站</span>
<span class="Menubox_out" id='one2' onclick='setTab("one",2,3)' title='顯示 2nd 工具'>備用
1</span>
<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;">
 <span class="Menubox_over" id='one4' onclick='setTab2("one",4,6)' title='顯示G+徽
章'>G+徽章</span>
<span class="Menubox_out" id='one5' onclick='setTab2("one",5,6)' title='著作人'>著作人
</span>
<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 置於「網頁」導覽列, 成功的讓行動裝置亦能使用.
--------------------------
<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+'. 篇';
if (nIndex > nPostStartIndex)
sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts"><<</a> ';
if (bOld)
sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">>></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 部落格且可成功在行動版裝置顯示行動廣告.
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
沒有留言:
張貼留言