來試試新玩意之六，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′> ，由你自己決定要放在那：
- 尋找上述三個區塊其中一個
- 將下列程式碼放在你想放置的區塊內
<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> - 儲存範本
但是完成後，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並沒有出現，相信滿多人會有這個問題，我花了一點時間找到解決方法，如下：
- 進入「修改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。
回覆留言：改進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的留言方式作過修改，請先刪掉紅字部份，再依以下方法進行修改，如果沒有請直接進行以下步驟：
- 尋找下列程式碼：
<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 的留言提問，很抱歉過了二個月才給你答案。
版面做了一些小小的更動
才一轉眼，這裡又荒廢了近二個月，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只需二個動作：
- 訂閱該Blog到Google Reader
- 修改網誌清單，將新訂閱的Blog加入清單之中
比起以前使用Linklist將會變得更方便許多。
來試試新玩意之一，Blogger in Draft：訂閱連結
Blogger in Draft也就是Blogger測試區，在這裡可以試試Blogger目前正在測試的新功能，正常登入Blogger是從http://www.blogger.com/這個位址，如果想要登入Blogger in Draft，則是要從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;
}
-
最新留言
Josh on 來試試新玩意之四，Blogger in Draft：Embe… Josh on 來試試新玩意之五，Blogger in Draft：Star… Josh on 如何利用HiNet FTP空間備份Blogger的… Lun on 如何利用HiNet FTP空間備份Blogger的… 毫賊 on 來試試新玩意之五，Blogger in Draft：Star…
