2009年9月25日
Blogger 10週年慶（五）：Show your face!
2009年9月24日
Blogger 10週年慶（四）：You Might As Well Jump!
Blogger 10週年慶（三）：There's an app for that!
BlogPress Lite: Blogger十周年生日快乐
There's an app for that!
Blogger 10週年慶（二）：Share from Nav Bar
Blogger 10週年慶（一）：Label Cloud
2009年5月19日
微軟開放Windows 7 RC下載
懶人繼續閱讀（v2.x）無腦安裝上線
在該頁面上選擇「繼續閱讀懶人加強版」的標籤
參考文章：
[BLOGGER]繼續閱讀懶人加強版 最新版本 v2.2.1(2009.5.8)
[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]安裝教學
[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]參數設定說明
[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]常見問題Q&A
2009年5月17日
Ubuntu 9.04正式推出
Ubuntu 9.04下載點：選擇欲下載的版本、下載點及32bit或64bit之後，按下開始下載。
安裝的方法，在這就不多說，網路上很多人有教，如果有裝過之前的版本，應該是沒有問題。另外之前的懶人包–Lazybuntu，在Ubuntu 9.04版之後改名為Lazyscripts，日前已釋出了Lazyscripts 0.1 RC2，建議一定要下載來用，可以省去不少麻煩。
就我個人對於Ubuntu 9.04的感覺而言，只有一個『快』來形容，從安裝到更新完成（包括使用Lazyscripts）大約只花半個小時，比起安裝windows來說算是非常快的了；開機也是飛快，因該是Ext4的關係，我想比較麻煩的反而是之後的調校吧。
話說Windows 7 RC也開放下載了，現在手邊正好有5/7釋出的7127版，或許也可以來試著裝看看。
相關網站：
2008年7月7日
來試試新玩意之六，Blogger in Draft：Import/Export
要使用Import/Export的功能，和其他新的測試功能一樣，一定要先登入draft.blogger.com，你也可以在登入draft.blogger.com後，在控制主頁右上角將「讓Blogger 測試區成為我預設的資訊主頁。」選取，往後不論登入draft.blogger.com或www.blogger.com都直接進到draft.blogger.com。
當登入draft.blogger.com後，在想要匯出的Blog上選擇「設定」，之後會在「基本」的頁面中看到一個「網誌工具」，其中有三個選項–匯入網誌、匯出網誌、刪除網誌，點選「匯出網誌」後，會跳到另一個頁面，再點選一次「匯出網誌」，Blogger.com會將該Blog的文章（包含未發佈的草稿）和意見整合為一個XML檔，讓你儲存在硬碟上，這樣備份就完成了，和之前用FTP備份相比，簡單多了。
而Import的功能，在想要匯入的Blog中，點選「設定」，在「基本」的頁面中的「網誌工具」，點選「匯入網誌」，如下圖：
接著選擇之前Export時所儲存的XML檔案，並輸入驗證碼，如果你打算將所有匯入的文章立即發佈，在這可以直接選取「自動發佈所有匯入的文章」，如果不是，就不要選取，下面再介紹手動選取發佈文章的方式：
當你對於所匯入的文章，並不想全部發佈時，當文章匯入完成後，除了有「發佈所有匯入的文章」的連結選項之外，也可以個別選擇想要發佈的文章，接著再點擊「發佈已選取」。
Import/Export除了備份之外，也可以將二個或二個以上的Blog合併為一個，或是將Blog搬移到另一個帳號，當然這只是針對文章和意見，對於整個Blogger的範本是不會有任何的變動。
2008年6月29日
來試試新玩意之五，Blogger in Draft：Star Ratings
首先還是先登入draft.blogger.com，點選「版面配置」–「網頁元素」，編輯「網誌文章」，選取「顯示星號評等」後儲存。
儲存後，先檢視一下你的Blog，看看是否有出現如下圖的Star Ratings，如果沒有就必須手動加入程式碼。
至於手動加入的步驟，Josh在這示範的是加在文章底部，文章底部有三個區塊，分別是<div class='post-footer-line post-footer-line-1'>、<div class='post-footer-line post-footer-line-2'>、<div class='post-footer-line post-footer-line-3'> ，由你自己決定要放在那：- 尋找上述三個區塊其中一個
- 將下列程式碼放在你想放置的區塊內
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if>
</span> - 尋找<b:include name='feedLinks'/>
- 將下列程式碼放在<b:include name='feedLinks'/>的下方
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if> - 儲存範本
.star-ratings {
float:right;
}完工後，文章底部所承現的樣子就如下圖。
來試試新玩意之四，Blogger in Draft：Embedded Comment Form
但是當Josh我回到文章頁面想看看承現的結果時，卻發現Comment Form並沒有出現，相信滿多人會有這個問題，我花了一點時間找到解決方法，如下：- 進入「修改HTML」，選取「展開小裝置範本」
- 尋找下最程式碼：
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p> - 以下列程式碼取代：
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p> - 完成後儲存範本即可。
往後在文章頁面中，就會出現一個Comment Form，從此跟彈出視窗的意見說Bye Bye。
2008年5月17日
回覆留言：改進Blogger的留言方式
在改進Blogger的留言方式這一篇的步驟1和步驟2之中，稍作比較會發現原作者並沒有動到太多的原始程式碼，如下：
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<!-- jackbook.com part 1 start -->
<!--
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
-->
<div class='onepx'>
<dl id='comments-block' style='height: 1px;overflow:hidden;'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<!--
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
-->
<!-- jackbook.com part 1 ends -->
<!-- actually i almost do nothing with your template, just add that comment, you did it :) -->
<div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
<h3 id='hoverme' style='display:block;'>
<img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/>
</h3>
<!-- this iframe below is your comment form. you can change the height, or add more style property into it -->
<div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>
<iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
<br/>
<a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a>
</div>
<!-- end of iframe -->
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>原作者只在裡面加入了紅字的部份，如果你之前曾以改進Blogger的留言方式作過修改，請先刪掉紅字部份，再依以下方法進行修改，如果沒有請直接進行以下步驟：
- 尋找下列程式碼：
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p> - 以下列程式碼取代：
<div id='comment-footer'>
<p class='comment-footer'>
<a onclick='showcomment("comments-block", "comment-child", "comment-footer");' style='cursor:pointer'><data:postCommentMsg/></a>
</p>
</div>
在這主要是將<p class='comment-footer'>以<div id='comment-footer'>進行包覆，並將原本的「張貼意見」連結由呼叫popwindows改為呼叫js進行css的display屬性改變。 - 將下列程式碼新增到<div id='backlinks-container'>之前：
<!-- this iframe below is your comment form. you can change the height, or add more style property into it -->
<div id='comment-child' style='border:none; display: none; height:750px; width: 475px; margin-bottom: 15px; background: #ffffff none; border: 1px solid #FCO;'>
<iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none; overflow-x:hidden;' width='100%'/>
<br/>
<div style='text-align:right;'>
<a onclick='closecomment("comments-block", "comment-child", "comment-footer");' style='cursor:pointer;'>關閉表單</a></div><br/>
</div>
<!-- end of iframe -->
在這就是加入以iframe載入留言視窗的語法，並加入一個「關閉表單」的js呼劍語法，其中紅字部份就是iframe的屬性設定，各位可以在這修改iframe的height、width、background等等。 - 在改進Blogger的留言方式中，原作者以onmouseover進行呼叫js來進行css的display屬性的改變，一但變換後除非重新載入，不然是無法恢復成原先的樣式，原來的js如下：
<!-- www.jackbook.com -->
<!-- this to hide and show el -->
<script languange='javascript'>
function showcomment(a,b){
var jackbookdotcom = document.getElementById(a);
jackbookdotcom.style.display = 'none';
jackbookdotcom = document.getElementById(b);
jackbookdotcom.style.display = 'block';
}
</script>
<!-- www.jackbook.com -->
在這裡Josh我是再增加一關閉iframe的js，如果你曾以改進Blogger的留言方式的第3步驟進行修改，請先將上面的js以下面的替代，如果沒有請將下列的js加在</head>之前：<script languange='javascript'>
function showcomment(a,b,c){
var showcommentfrom = document.getElementById(a);
showcommentfrom.style.display = 'none';
showcommentfrom = document.getElementById(b);
showcommentfrom.style.display = 'block';
showcommentfrom = document.getElementById(c);
showcommentfrom.style.display = 'none';
}
function closecomment(a,b,c){
var closecommentfrom = document.getElementById(a);
closecommentfrom.style.display = 'block';
closecommentfrom = document.getElementById(b);
closecommentfrom.style.display = 'none';
closecommentfrom = document.getElementById(c);
closecommentfrom.style.display = 'block';
}
</script> - 另外在Blog主頁還有一個呼叫Popwindow留言視窗的連結，由於我們已經要改為以iframe載入，所以這一個連結也需要一併改掉，也就是改進Blogger的留言方式的第4、第5步驟，曾經改過的就跳過這個步驟，沒有請先尋找下列程式碼：
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<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>
</b:if>
</span>
以下列程式碼取代之：<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' >
<b:if cond='data:post.numComments == 1'>1
<data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if></a>
</b:if>
</b:if>
</span> - 以上完成後，往後留言者只要點選「張貼意見」，留言視窗會以iframe載入，並將原先的留言暫時隱藏，待留言完成後，點選「關閉表單」就會恢復原先的樣式，並關閉iframe。
在這回覆Idle 的留言提問，很抱歉過了二個月才給你答案。
版面做了一些小小的更動
下圖為改版前的樣貌：
下圖為改版之後樣貌：
在此先跟用IE的朋友說聲抱歉，用IE瀏覽本 Blog會發生toper-wrapper和sidebar位置偏掉的情形，Josh改天再進行調整。
2008年3月9日
將Link改為下拉式選單之原視窗開啟
如果你想要讓下拉選單在原視窗開啟，先參考將Link改為下拉式選單，將原本欲取代的程式碼改用下列程式取代：
<select onchange='javascript:location.href=this.options[this.selectedIndex].value;'>
<option>Select a Link</option>
<b:loop values='data:links' var='link'>
<option expr:value='data:link.target'><data:link.name/></option>
</b:loop>
</select>延伸閱讀：
將Link改為下拉式選單
2008年2月29日
Make3D–將你的相片轉換為3D模式
先看一下介紹影片：
就如下面這張圖片：
在經過運算轉換後，所承現的樣子：
大家不妨去試試。
2008年2月27日
來試試新玩意之三，Blogger in Draft：Scheduled Posts
首先別忘了先登入http://draft.blogger.com/，打一篇新文章，完成後打開在左下角的“張貼選項”，在“張貼日期與時間”輸入未來的時間：
Josh這一篇預計在2/27 上午10:00發佈，所以我就將這個時間輸入，完成後“發佈文章”，回到文章列表中，你會發現該篇文章在會有“已排定”的字樣，這就表示這一篇文章會在設定時間到時才會發佈，這真的是一個很方便的功能。
但是，現在問題來了，有一些Blog會將文章的日期定在未來的某個時間，以便於將該篇文章置於最上方，方便閱讀，如此一來，是否會和這一個新功能有所衝突？關於這一點Blogger in draft也有設想到，以下摘自New feature: Scheduled Posts：
We know that some bloggers currently use future post dates in order to keep one post at the top of their blog for a while. Though we recommend that you use a Text page element for this, you can still get this old behavior with just one additional step. First, publish your post with the current date and time. This will publish it to your blog. Then, once it’s published, edit the post to change the date to the future and publish it again. We don’t re-schedule posts that are already published, so the post will stay on your blog but sort to the very top.
解決方法就是將該篇文章以現在的時間先行發佈，之後再回去編輯該篇文章，並修改發佈時間，因為Blogger不會將已發佈的文章重新排定發佈時間，另外還有另一點：
As with published posts, the post editor does not autosave scheduled posts if you go back and edit them. You wouldn’t want the post to publish while you’re in the middle of editing it! You can save the scheduled post as a draft to remove the scheduling and this will turn autosave back on.
當要修改一篇已排定發佈時間的文章，自動儲存的功能將會關閉，要再啟用自動儲存的功能，可先將該篇文章再儲存成草稿，再次進入編輯，這樣該篇文章會自排定發佈移除，而自動儲存的功能也就會再度開啟，當然以上的動作都是要在Blogger in draft中進行。
最後為了取信於各位，附一現在時間的圖，以茲證明。當你在2/27 上午10:00以後看到這一篇，留個言吧，多謝了。
UpData：早上抽空上來看這一篇，發現到標題的連結沒作用，不會連結到文章內部，這應該算是測試中的Bug，將來正式推出後應該會修正。這個Bug已於03/06修正。
2008年2月26日
來試試新玩意之二，Blogger in Draft：網誌清單
當然，就如同我上一篇所說，要加入這個「網誌清單」，一定要先從http://draft.blogger.com/登入；進入版面配置點選「加入網頁元素」，將網誌清單加入BLOG：
在網誌清單的設定中，你可以自行設定排序（有最近更新和Blog名稱二種）、顯示數量，另外還有圖示、最新項目的標題、最新項目的部分資訊、上次更新日期可設定，接著就是設定清單項目，點選下方的「將網誌新增到您的清單」：
至於清單的來源有二種，一是自行輸入，二是從Google Reader選取，像我這種懶人當然就是要選那種比較方便的作法，也就是從Google Reader中來選取，往後要加入新的Blog到清單中，只要先訂閱該Blog，再修改網頁元素即可：
當選好後，還可以進行重新命名(rename)和移除(remove)的動作：
下圖就是完成後的樣子：
往後要新增新的Blog只需二個動作：- 訂閱該Blog到Google Reader
- 修改網誌清單，將新訂閱的Blog加入清單之中
2008年2月25日
來試試新玩意之一，Blogger in Draft：訂閱連結
登入後在版面配置的地方，能新增的網頁元素也有不同：
Josh我在http://draft.blogger.com/新增一個新功能–訂閱連結，之後回到http://www.blogger.com/也還能夠使用。
由於這個功能內就有包含Atom資訊提供，那也就意謂著頁面最下方的那一個“訂閱”是多餘的了，但似乎無法從設定中移除，只好從CSS中著手，從firebug中找到該div區塊class為blog-feeds：.blog-feeds{
display :none;
}新增上列語法在CSS中即可隱藏。
UpData 03/09：
之前沒注意到在文章頁面還有一個“訂閱：張貼意見 (Atom)”，而這一個如果也要隱藏，只要將上述的css改為下列所示，就可以了。
.blog-feeds, .post-feeds{
display :none;
}
Windows之外的新選擇，開始試用Ubuntu
關於Ubuntu的安裝方法，網路上就有很多高手的經驗，我是參考BillyPan的打死不買Vista，暫時留觀XP，開始學用Ubuntu 7.10之新手完全指南，這篇的解說非常詳細，照者作就行了。
由於Ubuntu 7.10有內建Compiz Fusion，這麼炫的功能當然也要來試一下，詳細設定Josh我是在Mobile01找到這一篇：Ubuntu 7.10 加 Windows Vista，超華麗雙重開機 ，照者文章的2.啟動Compiz Fusion 3D桌面下去設定，3D桌面就出現了。
接著Josh還依BillyPan的如何把Ubuntu 7.04(完整Linux系統，非Live CD)裝入隨身碟中(傻瓜必勝版)和把我們的 Ubuntu 7.04 USB 隨身作業系統改造成任何電腦都能開機這兩篇，將我過年前才買的4G隨身碟也裝上Ubuntu，目前以這支隨身碟成功開機家中的另二部電腦，等休完假後再去多試幾台。
相關網站：
 |  |
2008年2月23日
如何為你的網站照相
不過我個人比較推薦這個網站：Test your web design in different browsers
就如同上圖所示，只要輸入網站位址、瀏覽器類別，就個網站就會自動將你的網站以各個不同的瀏覽器及瀏覽器版本照相，而你所需要的只是花個時間等他處理好再將圖抓下來就行了，也許你會問：「還要一張一張另存新檔嗎？」答案是：「不需要」，這個網站會將他處理好的圖片，壓縮為一個ZIP檔，你只要抓這個檔案就行了。
下面這張就是我利用這個網站在Windows中的FireFox 2.0所照的圖。
訂閱：
文章 (Atom)