來試試新玩意之六，Blogger in Draft：Import/Export

之前Josh曾介紹過如何利用Ftp進行備份（第一篇、第二篇），但是只能備份不能搬移；而在漫長的等待之後，Blogger終於也有Import/Export的功能，所謂Export就是說能夠進行文章和意見的匯出（備份），而Import就是能將匯出的文章和意見，匯入到另一個Blog，即使要匯入的帳號和匯出的帳號不同也可以。

要使用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的範本是不會有任何的變動。

來試試新玩意之五，Blogger in Draft：Star Ratings

或許Blogger官方真的有把我們這些使用者的聲音聽進去，所以這一次釋出的新功能都滿不錯的，就以Star Ratings來說，以前必須加掛JS才能作到（例如outbrain這一類），現在Blogger終於提供了，廢話不多說，開始實作。

首先還是先登入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'> ，由你自己決定要放在那：

1. 尋找上述三個區塊其中一個
2. 將下列程式碼放在你想放置的區塊內
   <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>
3. 尋找<b:include name='feedLinks'/>
4. 將下列程式碼放在<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(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
5. 儲存範本

但是完成後，Josh不喜歡Star Ratings預設的位置，於是再加入下列css來改一下位置：
.star-ratings {
float:right;
}

完工後，文章底部所承現的樣子就如下圖。

來試試新玩意之四，Blogger in Draft：Embedded Comment Form

最近Blogger in Draft新增了滿多功能，其中最讓我高興的就是這個功能，讓人期待以久的–Embedded Comment Form，往後直接在文章頁面就能發表意見，啟用的方法很簡單，登入draft.blogger.com，選擇「設定」–「意見」，在「意見表單位置」選擇「已內嵌下列文章」後儲存即可，如下圖：



但是當Josh我回到文章頁面想看看承現的結果時，卻發現Comment Form並沒有出現，相信滿多人會有這個問題，我花了一點時間找到解決方法，如下：

1. 進入「修改HTML」，選取「展開小裝置範本」


2. 尋找下最程式碼：
   
   <p class='comment-footer'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</p>
   
   


3. 以下列程式碼取代：
   
   <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>


4. 完成後儲存範本即可。

往後在文章頁面中，就會出現一個Comment Form，從此跟彈出視窗的意見說Bye Bye。

回覆留言：改進Blogger的留言方式

由於有人問到要如何利用連結的點選來開啟/關閉載入留言頁面的iframe，在留言回的話有點麻煩，所以利用這一篇，一次交待清楚；當初在Google上找到這一個方法時，沒有花太多時間研究，就直接分享給大家，之後Josh我利用了一些時間，稍微看了一下，發現只是利用JS來改變該iframe的CSS:display屬性，稍微修改一下，就能作到開啟/關閉，以下讓我來告訴各位要如何作到。

在改進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的留言方式作過修改，請先刪掉紅字部份，再依以下方法進行修改，如果沒有請直接進行以下步驟：

1. 尋找下列程式碼：
   <p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
2. 以下列程式碼取代：
   <div id='comment-footer'>
<p class='comment-footer'>
<a onclick='showcomment(&quot;comments-block&quot;, &quot;comment-child&quot;, &quot;comment-footer&quot;);' style='cursor:pointer'><data:postCommentMsg/></a>
</p>
</div>
   在這主要是將<p class='comment-footer'>以<div id='comment-footer'>進行包覆，並將原本的「張貼意見」連結由呼叫popwindows改為呼叫js進行css的display屬性改變。
3. 將下列程式碼新增到<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(&quot;comments-block&quot;, &quot;comment-child&quot;, &quot;comment-footer&quot;);' style='cursor:pointer;'>關閉表單</a></div><br/>
</div>
<!-- end of iframe -->
   在這就是加入以iframe載入留言視窗的語法，並加入一個「關閉表單」的js呼劍語法，其中紅字部份就是iframe的屬性設定，各位可以在這修改iframe的height、width、background等等。
4. 在改進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 = &#39;none&#39;;
showcommentfrom = document.getElementById(b);
showcommentfrom.style.display = &#39;block&#39;;
showcommentfrom = document.getElementById(c);
showcommentfrom.style.display = &#39;none&#39;;
}
function closecomment(a,b,c){
var closecommentfrom = document.getElementById(a);
closecommentfrom.style.display = &#39;block&#39;;
closecommentfrom = document.getElementById(b);
closecommentfrom.style.display = &#39;none&#39;;
closecommentfrom = document.getElementById(c);
closecommentfrom.style.display = &#39;block&#39;;
}
</script>
5. 另外在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>
6. 以上完成後，往後留言者只要點選「張貼意見」，留言視窗會以iframe載入，並將原先的留言暫時隱藏，待留言完成後，點選「關閉表單」就會恢復原先的樣式，並關閉iframe。

在這回覆Idle 的留言提問，很抱歉過了二個月才給你答案。

版面做了一些小小的更動

才一轉眼，這裡又荒廢了近二個月，Josh趁者今天下午的空閒，稍微改了一下版面，這一次是在原來的模版上進行，最明顯的就是在main-wrapper上增加一個toper-wrapper區塊，並將toper-wrapper分為三個小區塊，再將原先放在linkbar上的Label以及在sidebar的Recent Posts、Recent Comment移到這三個小區塊中，移除掉linkbar及sidebar中較寬的那一個區塊，並且把Label改為Label Cloud，以上就是Josh花了快三個小時的成果。

下圖為改版前的樣貌：


下圖為改版之後樣貌：

在此先跟用IE的朋友說聲抱歉，用IE瀏覽本 Blog會發生toper-wrapper和sidebar位置偏掉的情形，Josh改天再進行調整。

將Link改為下拉式選單之原視窗開啟

當有訪客到我的Blog來，想要開我Blog中的連結，我當然是想要讓訪客開啟新的視窗（或分頁）來瀏覽，這種自私的想法我相信每個人都會有，當然也許有人不這麼想，就像我在將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改為下拉式選單

Make3D–將你的相片轉換為3D模式

從最新的Smashing Magazine中的Best Of February 2008看到這個網站–Make3D，我覺得真的滿新奇的，只要上傳你的相片，這個網站會幫你依據相片景觀深度、方向等等，利用它強大的自我學習方式進行運算並且自動將2D的相片轉換為3D模式，還滿有趣的，不過轉換的過程有點久，只好先拿網站已經轉換好的給各位看一下。

先看一下介紹影片：

就如下面這張圖片：
在經過運算轉換後，所承現的樣子：

大家不妨去試試。

來試試新玩意之三，Blogger in Draft：Scheduled Posts

終於，Blogger也有個功能，所謂Scheduled Posts，就是能夠將你所要發表的文章，設定一個你想要發佈的時間，當所設定的時間一到，該篇文章就會自動發佈，不過就如Josh先前在來試試新玩意之一，Blogger in Draft：訂閱連結和來試試新玩意之二，Blogger in Draft：網誌清單所說的，這個新功能一樣要先登入http://draft.blogger.com/才有效，現在就讓我們來試試這個功能。

首先別忘了先登入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修正。

來試試新玩意之二，Blogger in Draft：網誌清單

當Blogger in Draft在2/12發佈這個訊息後，Josh一直沒去試試看，今天稍微了解一下才發現這個功能的方便性，平時我就有在使用Google Reader訂閱一些我覺得不錯的Blog，但是卻懶得加入到我的Sidebar中的連結內，有了這個「網誌清單」的新功能，懶就不再是問題了。

當然，就如同我上一篇所說，要加入這個「網誌清單」，一定要先從http://draft.blogger.com/登入；進入版面配置點選「加入網頁元素」，將網誌清單加入BLOG：


在網誌清單的設定中，你可以自行設定排序（有最近更新和Blog名稱二種）、顯示數量，另外還有圖示、最新項目的標題、最新項目的部分資訊、上次更新日期可設定，接著就是設定清單項目，點選下方的「將網誌新增到您的清單」：

至於清單的來源有二種，一是自行輸入，二是從Google Reader選取，像我這種懶人當然就是要選那種比較方便的作法，也就是從Google Reader中來選取，往後要加入新的Blog到清單中，只要先訂閱該Blog，再修改網頁元素即可：


當選好後，還可以進行重新命名(rename)和移除(remove)的動作：

下圖就是完成後的樣子：
往後要新增新的Blog只需二個動作：

1. 訂閱該Blog到Google Reader
2. 修改網誌清單，將新訂閱的Blog加入清單之中

比起以前使用Linklist將會變得更方便許多。

來試試新玩意之一，Blogger in Draft：訂閱連結

Blogger in Draft也就是Blogger測試區，在這裡可以試試Blogger目前正在測試的新功能，正常登入Blogger是從http://www.blogger.com/這個位址，如果想要登入Blogger in Draft，則是要從http://draft.blogger.com/登入，兩者的不同從登入後的控制主頁就可知道。

從http://www.blogger.com/登入

從http://draft.blogger.com/登入

登入後在版面配置的地方，能新增的網頁元素也有不同：

從http://www.blogger.com/登入所能增加的網頁元素

從http://draft.blogger.com/登入所能增加的網頁元素

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

微軟為了加速Windows XP和Windows Vista的汰換，宣佈Windows XP只供貨到今年六月，而原本預計發佈的Windows Vista SP1因為發現新的漏洞而宣告暫停，再加上傳聞中預計在2010年上市的Windows 7可能因為Windows Vista的銷售狀況不如預期，可能在2009下半年上市，更令我對於Windows Vista興趣缺缺；這幾天正好休息在家，就把之前所下載的ubunu給它裝起來，為了想用雙系統再加上太常騎螺子，光是想清出一個分割區給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，目前以這支隨身碟成功開機家中的另二部電腦，等休完假後再去多試幾台。

相關網站：

1. Ubuntu Home Page
2. Ubuntu 正體中文站
3. Ubuntu 正體中文 Wiki

如何為你的網站照相

這個問題是我一個親戚的小朋友問的，以前我會叫他用土法煉鋼的方法–用鍵盤上的“PrintScreen”鍵分段擷取網站，再用影像處理軟體（如PhotoShop）進行結合，至少我以前就是這樣做的（汗），但是現在的我不會再叫人用這種方法來幫網站照相了。現在的我會教人找那種有幫人做BrowersShop的網站，只要輸入網址，就會將你的網站照相，你再將圖抓下了就OK了。

不過我個人比較推薦這個網站：Test your web design in different browsers



就如同上圖所示，只要輸入網站位址、瀏覽器類別，就個網站就會自動將你的網站以各個不同的瀏覽器及瀏覽器版本照相，而你所需要的只是花個時間等他處理好再將圖抓下來就行了，也許你會問：「還要一張一張另存新檔嗎？」答案是：「不需要」，這個網站會將他處理好的圖片，壓縮為一個ZIP檔，你只要抓這個檔案就行了。


下面這張就是我利用這個網站在Windows中的FireFox 2.0所照的圖。

線上編輯族譜–Geni

再過二天就是正月初一，Josh在這祝各位新年快樂；這幾天在整理家中雜物時，發現幾年前我老爸所整理的家族族譜，內容記載很詳細，看著看著，想起了一個網站–Geni網路族譜，一時興起，就試著玩看看。

Geni的使用介面淺顯易懂，利用圖形的方式製作族譜，用了幾次就會上手，另外當你在族譜上增加一人，Geni也會順便（但非必要）要求你輸入e-Mail，之後Geni會把你所完成的族譜發送給該人，也順便邀請該人來Geni繼續完成他的族譜，如此一來，利用路網的效應，無限的將你的族譜括大，這也Geni創辦人的原意。

另外Geni還能讓你匯入網路信箱內的通訊錄來增加你的親戚和朋友：







另外再提供一個影片教學：How To Get Started on Geni.com

關於推薦使用者申請 AdSense 的更新

這封信躺在信箱二個多星期，一直沒注意到，主要是關於推薦申請 AdSense的政策改變：

您好：

這封信旨在通知您關於 AdSense 產品推薦連結的重要資訊。 為了儘可能替發佈者製造更多收益機會，我們不斷努力實驗新的強化

收益功能，同時也調整已提供給發佈者的產品。 這次要調整的是引導訪客申請 AdSense 的推薦連結組。 根據過去一年來對這個計劃所進行的實驗，我們認為對您所在地區的發佈者來說，許多其他產品都比此計劃更有價值。 因此，我們將在數週內停止提供 AdSense 計劃的推薦連結組。 其他產品和服務的推薦連結則不會受到影響。

如果您目前在網站上顯示推薦連結組來引導使用者申請 AdSense，請參閱下列詳細資訊，以瞭解接下來數週會有什麼變化。

從 1 月初開始，您的帳戶中不會再顯示新增推薦連結組以引導使用者到 AdSense 產品的選項。 您現有的所有推薦連結會繼續累積至最多美金 $100 元的收益，直到 1 月底，這個計劃就會完全停用， 但現有的推薦連結會繼續在您的網頁上出現。

您必須在 1 月底前將所有引導使用者到 AdSense 的推薦連結從您的網頁上移除。 沒有移除的推薦連結會繼續如常顯示在您的網頁上，但轉換將不會記錄下來。 建議您將 AdSense 推薦連結換成其他產品或服務的推薦連結，或換成額外的廣告組。

感謝您過去推薦 AdSense 給其他使用者。 對於這個消息可能造成的任何不便，我們謹此致歉。

祝 商祺

Google AdSense 小組敬上

記得在去年二月，AdSense Referrals曾有過重大的更新：

1. When a publisher who signed up for Google AdSense through your referral earns their first $5 within 180 days of sign-up, you will be credited with $5.（當一個publisher經由你的介紹註冊，而這位publisher在註冊後180天賺到5美元，你將會得到5美元的獎金）
2. When that same publisher earns $100 within 180 days of sign-up and is eligible for payment, you will be credited with an additional $250.（如果這個publisher在註冊180天內賺進100美元而且申請支付，你將獲得250美元獎金）
3. If, in any 180-day period, you refer 25 publishers who each earn more than $100 within 180 days of their respective sign-ups and are all eligible for payout, you will be awarded a $2,000 bonus (bonus payouts are limited to 1 per year).（在任何的180天內，經由你的介紹註冊的publisher中有25位各自在180天賺進100美元且申請支付，你將會得到2000美元的獎金，一年只有一次）
   

在這個政策實施滿一年後，似乎要喊停了，但在AdSense 支援論壇上所看到的卻是只有在北美、拉丁美洲和日本以外的其他國家和地區。據AdSense 支援論壇官方人員的回答：

關于1月份之后 AdSense 推薦費用，若您推薦的用戶是位于北美、拉美和日本，發生在這些地區的每一個成功的轉換，我們都會支付給您100美金。這些地區之外的轉，都不會給您帶來收益。

另外，我們之前提到，1月之后 AdSense 推薦會從您的帳戶中消失。但是當您選擇定投的區域是北美、拉美和日本時，您會看到這個推薦連結會出現在您的帳戶中。不過，只有真正來自這些國家的用戶點擊了您的推薦，并產生成功的轉換，您才會獲得收益。

看樣子AdSense的推薦連結該拿掉了。

移植Neo中的Recent Posts及Label Post

你有聽過「Neo」嗎？不要跟我說就是駭客任務的Keanu Reeves；Neo是由Ramani所設計的Blogger Template，特色就是利用AJAX和JSON來進行頁面的讀取，而不用進行頁面的轉換，節省讀取的時間，想知道到底有多快的不妨到Hackosphere去試試看。

但是Ramani為了節省讀取的時間，拿掉了很多文章區塊的Tag，這也是我不想直接套用的原因，不過Recent Posts及Label Post到是可以很輕鬆的移植過來，至於文章區塊的移植就必須好好研究一下他的JS。

想要移植Recent Posts及Label Post，必備的就是Neo.js（請按右鍵–另存新檔），因為我只要一小部份的功能，所以修改js是必須的，待有時間好好研究一下這支js，知道如何套用文章區塊後，其他的功能還是能用的到。

首先利用任何編輯器（記事本、Dreamweaver…）開啟所下載的Neo.js，尋找
disp = disp + '<a href="javascript:updatePost(' + i + ');">' + entry.title.$t + '</a><br/><br/>';
以下列程式取代disp = disp + '<a href="' + postPermalink[i] + '">' + postTitle[i] + '</a><br/>';儲存後，將Neo.js傳至網路空間（例如：Google Page Creator），並將下列程式片段加載到Template中的</head>上方：
<script language='javascript' src='http://joshnotepage.googlepages.com/Neo.js'/>
<!-- configurable parameter to control the number of posts in the second column of Neo -->
<script language='javascript'>
var numPosts = 10;
</script>上方紅色字的程式位址請務必要改，因為上面那是我編的，而“numPosts = 10”則是要在Recent Posts所顯示的文章數，這裡的設定是10篇，可以自行設定。

接著開啟Template（記得展開小裝置範本），尋找：
<a expr:href='data:label.url'><data:label.name/></a>
改為：<a expr:href='"javascript:fetchLatestPosts(\"" + data:blog.homepageUrl + "\",\"" + data:label.name + "\");"'><data:label.name/></a>
接來將下方程式片段放到任一個</b:widget>標籤之後，<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<DIV id='LabelDisplay'>
<DIV id='LabelTitle'>
</DIV>
<DIV class='widget-content' id='LabelPosts'>
<SCRIPT language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', &#39;&#39;);</SCRIPT>
</DIV>
</DIV>
</b:includable>
</b:widget>儲存Template後，你就會擁有Neo中的Recent Posts及Label Post功能了。我之所以會想把這二個功能做移植，主要還是看上其中的“文章導覽切換”，當同一Label的文章超過你所設定顯示的篇數，還能以“Newer”和“Older”來做切換，這是一般Recent Posts所沒有的。

改進Blogger的留言方式

從接觸Blogger以來，有一個想法從沒改變–Blogger的留言方式我非常不喜歡，當想要留言時，還要另外開一個視窗（分頁），對於瀏覽者來說非常不方便，Josh我比較喜歡的是像Wordpress那一種在文章頁面內直接留言的方法，即省時又方便。

我也曾經在Singpolyma那裡看過替代方法–利用Lightbox這支JS將留言的頁面直接載入，但是還要再另外載入二支JS，整個Blog開啟完畢的時間拉的太長，只好再尋找別的方法。

今天在Google上又發現一個方法，就是將整個留言的頁面鑲嵌進文章的頁面，作法有點小複雜，建議先備份一下Template。

原始文章出處：
a comment form under post in blogger - like wordpress comment style.

1. 進入控制主頁–範本–修改Html，選取「展開小裝置範本」，尋找下最程式片段：
   <b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<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>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</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>
   也就是從<b:includable id='comments' var='post'>到<b:includable id='comments' var='post'>的前一行，就是待會要取代的片段。
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>
   上面紅字部份，你可以自行修改自己所想要的圖片連結，Josh我就自己改了一個圖片，當然也可以純文字取代。
   
3. 將下列程式放到</body>的上方，</body>通常位於文件的倒數第二行
   <!-- 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 -->
4. 尋找下列程式片段
   <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>
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.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>
6. 儲存你的Template，進入文章內部看看留言方式的變化吧!!
   

這個方法雖然複雜，但是卻和我所想要的結果一樣，往後再也不用在視窗（分頁）之間切換，就能留言。看到這，順便到下面留言試試吧!!

關於無腦安裝的更新

由於有太長的一段時間沒在進行，這一次一次全部解決，更新的部份如下：

1. Blogger-ext部份：
• 核心程式更新至0.6.3版
• 表情冷號plugin更新至0.2版
• 尤於繼續閱讀懶人加強版版本更新至2.x後，已不用使用blogger-ext的程式核心，所以暫時移除
• Blogger-ext另有新的0.7版，有興趣者可以自行前觀看
  blogger_ext2.js 0.7.0 分支全新功能 beta 版發表
  

  文章參考：
  輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!
  部落格會笑了！Blogger Smiley！
  blogger_ext2.js 加速篇–全面換用Google Code
  blogger_ext2.js 0.6 版本發表
  自由選擇你想安裝blogger_ext2的功能
  blogger_ext2.js 0.6.1 版本發表
  更勁爆的「超級無腦安裝Blogger外掛功能」
  blogger_ext2.js 0.6.2 版發表
  blogger_ext2.js 0.6.3 / 0.7.2 修正版發表
  



2. 繼續閱讀懶人加強版部份：
• 全面更新至2.x版
• 移除「只有安裝繼續閱讀」選項
  

  文章參考：
  [BLOGGER]繼續閱讀懶人加強版 最新版本 v2.1.0(2007.10.1)
  [BLOGGER]繼續閱讀懶人加強版 - [版本2.x]問題回報頁[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]參數設定說明
  [BLOGGER]繼續閱讀懶人加強版 - [版本2.x]安裝教學

設計精美的Template

在我打算替Josh's Note換新裝後，因為Neo有幾點我不怎麼喜歡，原作Ramani為了讓Neo的速度加快，所以拿掉了一些會影響讀取速度的Tag，例如文章的Label，讓我不得不放棄套用Neo的這個念頭，所以我只好再度將Google大神請出來，而且也找到了幾個專門在設計Blogger Template的網站，其中又以Dzelque的設計我比較喜歡。

自己搞一個Template是很累人的，因為我曾經試過，之前所用的Template就是自己作出來的，這次真的沒那個心力了，所以決定用別人的，我所選的是Dzelque的Blogger Template: ilike，這個Template正如其名“I Like”，因為原作者自己也套用了，而且它那小小的Header區塊也正合我意，當然就決定用了。

Dzelque的設計有一地方很週到，他會在Template中預留區塊給你放AdSense，看看他其他的設計就知道，這一點我就滿喜歡的。

Blogger Template: ilike有幾個特點：

1. 窄窄的Header區塊
2. 在Header區塊旁預留放置Search Bar的區塊
3. 在Header上方有一個Linkbar的區塊，可以放置Link或是Label
4. Header和Content之間預留一個可以放置橫幅AdSense的區塊

光是上面這幾點，在整個頁面的空間就會省下不少了，尤其是那個Linkbar，因為我所用的Label不多，於是決定捨棄Label Cloud，將Label移到Linkbar中，至於Link則用下拉式選單來承現，載入速度跟之前比起來快了不少。

Dzelque設計了三、四十種的Template，建議各位到那去看看，或許也能找到你所喜歡的喔！

I Am Back!!

離Josh我上次發文已經有大半年了，有的時候我就是這樣，當對一件事有興趣時，就會花很多的精神投入其中，但是，當我又對另一件事產生興趣，我就會把精神全部移轉到那件事上面，所以才會把這裡給擱下，真是抱歉！

不過，現在我回來了，我會繼續經營這裡，短時間內不會再不告而別了。為什麼會再回來呢？

因為我上個星期收到一封美國寄來的信件，裡面附著一張支票！

沒錯，就是Google AdSense的支票，金額就不好意思告訴大家了，說出來怕會被笑。至於支票的相片…因為太興奮，隔天就跑到我家附近的合作金庫去辦支票託收了，之所以會選擇合作金庫，因為念書的時候，入學時學校就幫每一位新生順便開了戶，而且我家附近正好也有一家分行，二個因素合在一起就是我選擇金庫的原因。

因為是第一次辦理支票託收，所以合庫要求除了本人之外，還要有一位保證人，而且都要有雙證件和印章才行，保證人是第一次辦理託收才需要，以後要辦理只要本人和雙證件、印章即可，而且合庫會從託收的金額內扣除400元的手續費，其餘的金額會直接匯入帳戶內，據行員表示，整個作業時間最快二個星期就會完成，並且會在款項匯入帳戶當天以電話通知，等我收到錢再告訴大家。

由於太久沒更新，所以在發這篇之前，我一直在進行更換Template的動作，原本打算直接套用Ramani的Neo，但在測試的Blog套用，發現了幾點我不太喜歡的事，所以取其中一、二個套用，至於是什麼，請各位直接去按畫面最上面的標籤就知道了。