來試試新玩意之六，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模式，還滿有趣的，不過轉換的過程有點久，只好先拿網站已經轉換好的給各位看一下。

先看一下介紹影片：

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

大家不妨去試試。