來試試新玩意之五，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 = '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>
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改為下拉式選單

移植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/>', '');</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]安裝教學

「繼續閱讀懶人加強版」無腦安裝完成（UpData 4/8）

在徵求原作者同意後，我便開始製作「繼續閱讀懶人加強版」的自動安裝頁面，利用清明節的假期，外面又冷的不想出門，待在家裡把這個安裝頁面完成，這個「繼續閱讀懶人加強版」能夠自動套用而不必再加入任何特殊標記就能夠有“繼續閱讀”的功能，主要的功能如下：

繼續閱讀方面：

1. 可選擇延展/收合(Expand/collapse)或直接連結兩種方式
2. 可自訂繼續閱讀顯示文字
3. 自動判定文章內容階層，不會有切不完整的情況發生
4. 可設定各頁面（首頁、標籤(tag)分類頁、blog存檔頁)
5. 不同的檢視方式，有三種：全文、摘要、標題

檢視方式快速切換：

1. 自動產生「全文|摘要|標題」的連結，可直接點選並快速切換檢視方式
2. 連結名稱可自訂
3. 擺放位置可自訂（需改範本HTML）

但是這「繼續閱讀懶人加強版」無法和和阿土伯的繼續閱讀功能並存，所以我下一個動作就是要將這兩者整合，如果你等不及了，就先用吧!

UpDATA 4/8：
已將「繼續閱讀懶人加強版」整合入「超級無腦安裝Blogger外掛功能」裡面，阿土伯版和懶人版只能二選一進行安裝，而原本單獨安裝懶人版的方式也保留。

UpDATA 4/14：
增加「只有繼續閱讀」的安裝方式。

---

下方的圖示將會帶你到快速安裝頁面，
在該頁面上選擇「繼續閱讀懶人加強版」的標籤

---

文章參考：
[BLOGGER]繼續閱讀懶人加強版(for Blogger New) 最新版本 v1.4.2(2007.3.15)
[BLOGGER]繼續閱讀懶人加強版 – 完整安裝 教學
[BLOGGER]繼續閱讀懶人加強版 – 只安裝繼續閱讀 教學
[BLOGGER]繼續閱讀懶人加強版 – 參數設定說明

「超級無腦安裝Blogger外掛功能」功能更新

因應阿土伯的blogger_ext2版本更新至0.6.2版，利用了點時間將安裝程式做了更新，因為改的很匆忙，沒有Debug很徹底，如果各位在用安裝使用後有發生錯誤，請留言給我，待週末有空時一併來處理，這個版本新增了社群書籤的功能，而在安裝頁面中，我有把各個社群書籤分開，讓使用者可以自行選擇想要加入那一個社群的書籤按鈕，這一次我利用阿土伯的blogger_ext2 0.6.2版加入安裝程式的新功能如下：

• NavBar原先只能完全隱藏，blogger_ext2 0.6.2版新增浮動隱藏和完全隱藏的選項
• 新增社群書籤功能，預設放置位置在post-icons這個<span>區塊的後面，以<span>區塊包起來，預設class為post-bookmarks。
• 共有七個社群書籤可供自行選擇，HEMiDEMi預設為選取。

如果你曾經安裝blogger_ext2之前的版本，請先將舊的widget刪除，再安裝最新的版本。

UpDATA 4/8：
已將「繼續閱讀懶人加強版」整合入「超級無腦安裝Blogger外掛功能」裡面，阿土伯版和懶人版只能二選一進行安裝，而原本單獨安裝懶人版的方式也保留。

---

下方的圖示將會帶你到新的blogger_ext2快速安裝頁面

---

文章參考：
輕鬆擴充 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 版發表

Google AdSense Inside The PostⅡ

稍早之前我在Google AdSense Inside The Post中已提過如何將Google AdSense放入文章之中，但是AdSense和文章之間總是會有一片空白的地方，如果想要讓Google AdSense和文章緊密的結合在一起，能夠辦得到嗎？答案是肯定的。

之前我是將Google AdSense的程式碼放在“post-header-line-1”這個DIV區塊中，這個Div區塊的下方，你會發現另一個Div區塊–<div class=’post-body’>，再往下可以看到“<p><data:post.body/></p>”這一行，根據Blogger Help–版面配置資料標記的說明，可以知道post.body所顯示的是文章的內容，於是我便開始試驗將Google AdSense移到<div class=’post-body’>這個區塊裡面的結果。

首先我把Google AdSense的程式碼放在“<p><data:post.body/></p>”這一行的前方，但是所得到的結果和之前的方法一樣，如下圖：

接下來我將Google AdSense的程式碼移到“<p>”和“<data:post.body/></p>”之間，但是AdSense和文章雖有結合，但卻不是我想要的結果，如下圖：

於是我在範本新增一個CSS的class，內容如下：
.ad {
float:left;
}
這個樣式主要是要讓「標籤元素向左靠，文字圍繞在右邊」，再將Google AdSense以一個Div包起來，並將這個Div的class指定為新增的這個樣式，如下：
<div class='ad'>
（Google AdSense 程式碼）
</div>
這樣所呈現出來的就是我想要的結果，如下圖：

如你所見，Google AdSense和文章完美的結合在一起了。

• 這裡只有簡單寫出Google AdSense程式碼所放置的位置，一些需要修改的地方不再重述，請參考Google AdSense Inside The Post。
• 這個方法比較適用於正方形的的Content，儘量不要用橫幅的Content。