Blogger 10週年慶（五）：Show your face!

十週年大禮再一個實用的出現，可以在留言中顯示你的大頭照了，首先你需要在「設定」–「意見」–「在評論上顯示簡介圖片？」選擇「是」，之後儲存設定，如果這樣子留言還是沒有顯示大頭照，那就需要修改範本。

Blogger 10週年慶（四）：You Might As Well Jump!

千呼萬喚始出來，終於，Blogger最令人詬病的地方，也有了改變，當各家BSP將「Read More（閱讀全文）」視為基本配備時，Blogger始終沒有這個功能，我們只好利用各種Hack的房法來實現，如今，Blogger 10週年慶，終於有了這個功能。

Blogger 10週年慶（二）：Share from Nav Bar

以往對於在Blogger正上方的Nav Bar，總會讓人覺得破壤整個頁面的美感，有的人選擇下CSS語法將它整個隱藏起來，而Josh是選擇將它改為浮動顯示，畢竟上面的功能會用的到的最多也就右邊的「自訂」，但是現在Blogger的10週年慶第二彈，就是讓Nav Bar有的新的功能，讓每一個使用不需再將它隱藏起來。

Blogger 10週年慶（一）：Label Cloud

從換了工作之後，Josh就比較沒有時間在更新Blog，話說前一陣子，Bloger歡慶10週年，一連推出了好幾項Blogger使用者早就想要有的功能，而Blogger終於聽到了眾多使用者的需求，今天先開始這第一彈–Label Cloud（標籤雲）。

來試試新玩意之六，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 的留言提問，很抱歉過了二個月才給你答案。

將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改為下拉式選單

來試試新玩意之三，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;
}

改進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，進入文章內部看看留言方式的變化吧!!
   

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

自行架設Ftp伺服器備份Blogger文章

前幾天曾提過如何利用HiNet FTP空間備份Blogger的文章，然而對於不是使用HiNet的人來說，除非能找到一個Ftp空間來進行備份，否則只有自行架設一個Ftp伺服器才能來進行備份，至於架設Ftp的伺服器有很多，例如Windows的IIS、雷電FTPD、GuildFTPd、Serv-U等等，而我這一篇所實作的軟體則是Serv-U，個人覺得Serv-U設定很簡單而且好用。

目前Serv-U最新版本為6.4，因為在這我只是要做個備份，並不是真正要架一個Ftp伺服器，所以我在這僅提供4.2版+中文化給大家，請先下載Serv-U 4.2英文版及Serv-U 4.2 中文化檔案。

首先請先執行Serv-U 4.2英文版的安裝檔案，安裝過程在此不加詳述，當你安裝到最後時，如下圖：
因為還要進行中文化的動作，所以先將“Start Serv-U Administrator program”這一項取消選取，按下“Finish”並將右下常駐的Serv-U取消常駐，接著執行中文化的檔案，完成後於桌面執行Serv-U。

當Serv-U執行後，會跑出一個設定精靈，你可以依下面的列表設定或自行設定：

1. 顯示選單圖示：是
2. 啟動伺服器
3. 你的IP位址：動態IP請空白，固定IP可填可不填
4. 網域名稱：前面說過，架這個伺服器只是要備份，所以直接按下一步
5. 系統服務：不
6. 匿名帳號：不
7. 使用者帳號：是
8. 帳號名稱：請自行設定
9. 帳號密碼：請自行設定
10. 起始目錄：選擇一個目錄做為登入FTP直接開啟的目錄
11. 鎖定起始目錄：避免麻煩，選“是”
12. 管理權限：選擇系統管理者以取得伺服器的最大權限
13. 完成

以上步驟完成後，你可以登入剛才所架設的Ftp伺服器看看，在網址列輸入“ftp://你的IP/”，輸入帳號、密碼就能登入了。（如果你有使用防火牆，請記得將port 21打開）

接下來的步驟和如何利用HiNet FTP空間備份Blogger的文章差不多，在這再一次簡述一下。

Ⅰ、在「控制主頁–範本–修改HTML」頁面中，備份範本，並在頁面下方將範本回復成傳統範本：

Ⅱ、在「控制主頁–設定–發佈」的頁面中選擇Ftp發佈：

Ⅲ、進行連線的設定，其中“FTP伺服器”請填入你的IP位址，下方的帳號、密碼則填入之前安裝Ftp伺服器時所設定的帳號、密碼：


Ⅳ、儲存設定後，點選“立即重新發佈”，完成後你會發現所有的文章，已經備份到你的硬碟上。

完成備份，照例要回復成備份前的格式：

1. 在「控制主頁–設定–發佈」中將發佈模式換回blogspot.com
2. 在「控制主頁–範本–自定設計」進行升級
3. 在「控制主頁–範本–修改Html」將之前所備份的範本上傳

關於Ftp備份Blogger，大致就是這樣，也許其他的 BSP為了搶Blogger的使用者，會提出更方便的備份方法，但是對於Blogger的忠實用戶，學會Ftp備份真的很重要。

如何利用HiNet FTP空間備份Blogger的文章

要備份Blogger的文章，其實不用一篇一篇剪下貼上，Blogger本身有提供FTP發佈的方法，所以可以用FTP來進行備份，前提是必須有Ftp的空間或是Ftp伺服器；如果你的ADSL是使用HiNet，HiNet本身就有提供一個Ftp的空間給用戶，如果沒有Ftp空間，也可以自行架設一個Ftp伺服器，架設Ftp伺服器首推「Serv U」，架設的方法改天再寫一篇專文，現在先介紹如何利用HiNet的Ftp空間來備份Blogger的文章，因為根據Google Analytics的分析，有將近五成訪客是使用HiNet。


想要利用Ftp進行備份，首先必須將Blog的訪問權限設定為“任何人”，你可以在「控制主頁–設定–權限」進行變更。


接著還需要將範本恢復成傳統範本，也就是恢復成舊的Blogger格式，所以在進行這一步時，最好將範本備份，而恢復成傳統範本的選項可以在「控制主頁–範本–修改HTML」頁面中最下方找到。


當完成上述的設定時，就可以在「控制主頁–設定–發佈」的頁面中，看到Ftp發佈的選項，連線方式有二種：Ftp和sFtp，目前HiNet似乎無法使用sFtp進行連線，建議選擇Ftp即可。


接下來要進行連線的設定，如下圖：

1. 這裡是以HiNet做示範，所以在“FTP伺服器”請填入“upload.myweb.hinet.net“
2. Blog URL填入欲進行備份的Blog網址（包含“Http://”）
3. Ftp路徑則填入Ftp伺服器要放置備份檔案的資料夾名稱，也可不填
4. 在頁面下方輸入會員帳號和密碼
   
5. 儲存設定後會在頁面上出現“立即重新發佈”，點擊它進行備份
   

完成備份後，接著就是要Blog恢復成之前的格式，首先就是在「控制主頁–設定–發佈」中將發佈模式換回blogspot.com，接著到「控制主頁–範本–自定設計」進行升級，升級完後再將之前所備份的範本上傳，完成上述動作，你的Blog就會恢復成原本的模式，而且所有的文章也完成了備份。

至於沒有HiNet Ftp空間的朋友，請耐心等候，過幾天再來介紹如何自行架設一個FTP伺服器來進行備份。

利用JavaScript加密文章內容

曾經使用過有名大站的人，或許會很喜歡它的文章密碼鎖定這個功能（至少我一些朋友不肯離開有名大站就是因為Blogger沒有這個功能），我曾經在Blogger Hacks的Wiki上看到一個「Encrypted blog posts」，這是一個利用JavaScript將文章內容以Advanced Encryption Standard (AES) 256 bit加密，就以我那低空飛過的密碼學的認識來說，安全性是足夠的，加密過後的文章會以不規則的英文顯示，當你想要看原始的文章內容，則需要輸入一串加密時所使用的Key（自行設定的字串），所以當你忘記key的內容，就無法看到原始的文章內容。

當初之所以沒有用這個Hack，是因為我覺得既然要在Blog上PO文又何必怕被人看呢？但是在跟朋友強力推薦Blogger時，卻又常常被以文章沒有保密的功能而加以回絕，昨天因RaRaYA的留言又讓我想起了這個Hack，於是決定將這個Hack的用法寫出來，順便看能不能打動我的朋友也加入Blogger的行列。

我在這裡有做了一篇Demo，建議各位先去看看，如果覺得這個效果不錯，再往下看這的Hack的做法。

1. 前面提過這Hack是利用JavaScript以AES 256 bit將文章加密，所以第一步就是要將加密/解密用的Javascript加入範本中，所以請將下列的程式碼加入範本的</head>之前：
<script src='http://vincentcheung.googlepages.com/blogjscrypt.js' language='JavaScript'></script>

2. 到這個網頁將文章加密；“key”的欄位可自行輸入，也可以按自動產生，但是key的內容請一定要留著，因為文章的解密一定要用，如果忘記key的內容，我想大概也沒有人能解出原來的文章內容。


3. “Plain Text”這個欄位輸入想要加密的文章內容，按下會在下方的“Cipher Text”產生加密過後的字串。


4. 而要在Blog內顯示的做法，就像我在Demo頁面有二種，一種是顯示加密過後的內容，一種是隱藏加密過後的內容，方法如下：
   方法一（Demo1）：
   <a href="javascript:Decrypt_text('unique_name');">Decrypt text（文章解密）</a>
<div id="unique_name">這裡輸入步驟3所產生的字串</div>
   
   方法二（Demo2）：
   <a href="javascript:Decrypt_text('unique_name', '這裡輸入步驟3所產生的字串');">Show encrypted text（顯示加密過後的字串）</a>
<div id="unique_name"></div>
   而當你要解密時，按下上面所產生的連結時，會出現一個字串輸入視窗，將步驟2的key輸入就會將字串解密為原來的文章，所以當你只想讓特定的人士觀看你的文章時，只需要將步驟2的“key”給那個人即可，而不知道“key”的人所看到的不過就是一堆不相關英文字串，這樣就能有文章保密的效果了。
   

• 在步驟4中“unique_name”代表的是Div的ID，請儘量取一個不會和別的Div重覆的名字。紅字部份一定要填入“Cipher Text”的內容，這是文章解密的依據。
• “key”的內容一定要備份。

Hacks In Lifetags：Label/Archive Page's View

離上次修改Josh's Lifetags已經快半個月了，剛好晚上睡不著，就來繼續之前的工作；我在Hacks In Lifetags：Read More有提到過我是用直接展開的方式，其中還有另一個考量，在文中第一個步驟有加載一個JavaScript，而這個JavaScript也可以用在這個Hack上面，這是我在文中所沒有提到的。

Peek-A-Boo的修改方法如下：（參考文章：Peek-A-Boo view of posts in label/archive pages）
1、加載JavaScript（如果已經有的話請略過）
<script type='text/javascript'
src='http://www.anniyalogam.com/widgets/hackosphere.js' />
2、這個步驟有點複雜，所以我將全部的程式碼貼上：
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td><td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>
將紅色部份加入範本內即可。

然而，如果你只想在Label/Archive的頁面只Show出文章的Title而不想Show出文章內容，作法則是更簡單。
1、首先找到下面的程式片段：（參考文章：New hack to improve your label/archive pages）
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
2、將上列的紅色部份以下列程式碼取代：
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

以上兩種方法，提供給各位做參考。

有雜誌風格的Blog文章ⅡFor Internet Explorer

由於我之前在有雜誌風格的Blog文章的方法在IE下顯示有問題，想要在IE顯示出這個效果，我想只有使用<span>再指定class。為什麼要用<span>呢？因為<SPAN>...</SPAN>所包圍起來的物件不會換行，這樣才會有我想要的效果出現。

方法如下：
1、加入以下css於]]></b:skin>之前：
.cap {
float:left;
color:white;
background:#00CCFF;
border:1px solid;
font-size:60px;
line-height:60px;
}
在這我只是在cap前多加了一個“.”

2、編輯文章時第一個字要用<span class="cap">和</span>包起來。

其實這兩個方法差不多，只不過要打的字多了一些，我個人比較懶了一些，只好委屈一下用IE的朋友了，畢竟IE已經被我遺忘很久了。

Blogger Hacked: AJAX Labels Reloaded

曾經使用在我Blog的Header下方的Tab的人，一定知道可以預覽該Label的前五篇文章，我是利用Kaie's Blog的[AJAX] AJAX Labels Cloud再上如何將你的Label做成Tabs所製作而成，今天在原作者Deepak那發現他又將Ajax Label的功能加強，不但增加分頁的功能，讓預覽不再只限於五篇，而且安裝更方便，並且修正在IE下的編碼錯誤。

我在這將方法稍做解釋：
１、進入編輯範本，打開小裝置範本，將下列程式碼加入]]></b:skin>之前：#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
將下列程式碼加入</head>之前：<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5;
var navFlag = 1; //ON by default
var feedLabel = "標籤訂閱";
var catLabel = "標籤:";
var closeLabel = "[x]關閉";
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />
其中紅色部份可以自行設定，maxresults – 每一頁所顯示的筆數，navFlag – “1”表示開啟分頁“0”表示關閉；如果你之前已經有如入Ajax Label請跳到步驟4。

２、接著尋找下列程式碼：<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
取代為：<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

３、在範本中找到你的Label1這個widget，找到下列的程式碼：<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>
取代為：<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

４、你可以到原作者Blog的步驟4，按下來新增一個Html/Javascript的widget以便顯示Ajax Label的搜尋結果，並儲存範本；或者自行新增，將下列程式碼加入你自行新增的widget內：<div id="indicator" style="display:none">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/>
Loading...</div>
<div id="search-result" style="display:none"><a name="sres"></a>
<div class="search-close" onclick="javascript:Element.hide('search-result')">
<script type="text/javascript">document.write(closeLabel);</script>
</div><div id="show-result"></div>
<div class="search-close" onclick="javascript:Element.hide('search-result')">
<script type="text/javascript">document.write(closeLabel);</script></div></div>
如果你之前曾經加入過Ajax Label，請先移除舊的widget，再進行此步驟。

因為之前的版本最多只能顯示5筆，所以我才保留Label Cloud，另外再加入一個Tab來使用Ajax Label，套用這個版本後，可能要考慮將Tab移除或者將Tab轉為其他用途了。

UpData:2/27
修正一些顯示上的錯誤，如果你在2/27以前曾參考本文，請重新進行步驟2、3、4。

參考資料：Blogger Hacked: AJAX Labels Reloaded

有雜誌風格的Blog文章

如果你平時有在看雜誌，你會發現雜誌的文章有一個共同的特點，那就是文章的第一個字通常會比較大；這幾天過年看了不少雜誌，我就在想說能不能把這個特色套用在Blog上呢？

之前我曾經用良人的大秘寶 -> [筆記]在文章裡顯示優質的程式碼區來顯示程式碼，再參考53 CSS-Techniques You Couldn’t Live Without的第10個方法，所以這一次我就套用他的方法。

只要在範本的]]></b:skin>之前加入下列的CSS：
cap {
float:left;
color:white;
background:#00CCFF;
border:1px solid;
font-size:60px;
line-height:60px;
}

以後在發表文章時，只要將文章的第一個字用<cap>和</cap>包起來，這樣看起來就滿有雜誌文章的味道。