移植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套用，發現了幾點我不太喜歡的事，所以取其中一、二個套用，至於是什麼，請各位直接去按畫面最上面的標籤就知道了。

BlogAD部落格廣告聯播網

如果你將頁面往下拉，你會發現在我的Sidebar發現BloggerAds的廣告，BloggerAds一個專屬於部落格的廣告模式，和BloggerAds相同的，BlogAD也是專屬於部落格的廣告模式，BlogAD是由原生數位行銷所成立的專業網路廣告媒體公司，申請條件也沒太大的限制，只要是繁體中文的部落格即可，由於收入須要開立扣繳憑單，所以另一條件就是必須要有台灣的國民身份證，只要符合上述二個條件就能申請加盟。

另外在BlogAD的加盟須知中有幾點很重要：

• 部落格內容不包含色情、鼓吹犯罪、專營軟體下載、惡意毀謗他人、違反善良風俗、觸犯法律、盜版軟體、違反著作權法等內容。
• 部落格內容完整並具有明確的主題。
• 部落格內容使用繁體中文為主要語系。
• 您擁有台灣的身份證或營利事業登記證（如以公司名義申請）。
  

S.S.AD.(Stay Second Ad)
而BlogAD除了有一般的點擊計費廣告之外，另外還有一種S.S.AD.(Stay Second Ad)–以秒計費廣告機制，「以秒計費廣告機制」指的是當網友點選以秒計費廣告，並在廣告網站停留一定的秒數後，就能得到廣告獎金，而以秒計費廣告會比一般點擊計費廣告獎金來的高。

下線招募機制
和同樣是部落格專屬的BloggerAds不同的一點，就是BlogAD有提供「下線招募機制」，當你加入BlogAD後，會有一組下線招募的連結網址，當有人透過這組連結加入BlogAD就會成為你的下線，當有人在你的下線網站點擊廣告時，你也會獲得廣告獎金，下線的寬度深度有二層，寬度則是無限，讓你的除了自己Blog的廣告之外，更多了另一種收入。

還有一點很重要，BlogAD對於無效點擊的規定相當嚴格，而且對於帳號停權也有一定的規範：

1. 在您加入BlogAD時會記錄您的IP，若一天內使用相同IP點擊廣告3次以上並當月累計超過3天，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。
2. 在您加入BlogAD時會記錄您的IP，若在一個月內相同IP點擊廣告10次以上，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。
3. 在您加入BlogAD時會記錄您的IP，若一天內有類似IP點擊廣告3次以上並累計超過3天，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。
4. 若一天內有相同IP點擊超過3次以上，但此IP與申請時的IP不同，BlogAD會與您聯繫並告知數據，雙方達到合理的認知後，將扣除此點閱獎金，您的所得將退還廣告主。
5. 若一天內有類似IP點擊超過6次以上，但此IP與申請時的IP不同，BlogAD會與您聯繫並告知數據，雙方達到合理的認知後，將扣除此點閱獎金，您的所得將退還廣告主。
6. 若您日報表點閱量超過曝光量並當月累積2天以上(含)，在BlogAD程式正常運作情況下，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。
7. 若您日報表點閱率超過2%並當月累積10天以上(含)，在BlogAD程式正常運作情況下，BlogAD與您聯繫並告知數據，及尋找問題點，若為以上條款等不當點擊造成，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。

而獎金發放的下限是500元，請款日為當月10日之前，獎金款項會在當月25日匯進你的帳戶，請款之前你必須將你的身份證掃描為圖檔以e-Mail附加檔案的方式寄到service@blogad.com.tw，或者將影本寄到台北縣234永和市永元路95巷8號3樓 原生數位行銷有限公司收，完成才能於當月25日收到獎金。

現在就申請加入BlogAD吧！

Google AdSense以外的選擇

有愈來愈多的部落客在自己的部落格投放Google AdSense的廣告，但是除了Google AdSense之外也有愈來愈多的選擇，目前就Josh所知道的有BloggerAds、博客來AP策略聯盟夥伴、興奇大聯盟計畫、酷比Admedia等等，其中BloggerAds和是專屬於部落格網站上的廣告模式，算是比較特別的。

至於申請的條件各有不同，有的條件比較嚴格，以下個別列出：
BloggerAds：

1. 限繁體中文的部落格。
2. BloggerAds部落客廣告位置必須放置在Blog顯目的位置，以維持Blog廣告整體效益。
3. 提供的廣告可分為商業廣告及公益廣告。
   

或許是因為剛起步，所以目前所能提供商業廣告有限，而撥放公益廣告並不會有收益，目前還須繼續觀察。

博客來AP策略聯盟夥伴：
共有三種合作方式：

1. 獨家仲介金行銷引薦
   在合約期間內，貴網站除了博客來外，不與博客來銷售業務競爭之網站合作，回饋金較高(書籍４％、雜誌２％、影音２％、美妝２％、親子２％、衣飾２％、創意生活２％、玩藝２％、美食２％)
2. 非獨家仲介金行銷引薦
   在合約期間內，貴網站除了博客來外，會與博客來銷售業務競爭之網站合作，回饋金較少(書籍２％、雜誌２％、影音１％)
3. 無仲介金行銷引薦
   博客來提供資訊授權供合作網站於合約期間內使用，包含商品圖片、商品基本資料；博客來不提供任何回饋金給貴網站。
   

Josh試著要申請，但每次填完資料，就只會出現“輸入的資料有問題，請重新再試！”，但就是不知道是那邊的資料出現問題，已寫信去詢問了。

興奇大聯盟計畫：
這一個算是比較不一樣，你可以自己選擇要在網站上刊登的廣告類型，當有人點擊在你網站上的廣告，連結網站到興奇科技的Monday興奇購物，一旦完成一筆交易後，依據「商品屬性類別」與「付款方式」之不同而有1%~3%的利潤。

酷比Admedia：

1. 繁體中文網站
2. 以「內容」為主的優質網站
3. 非羶色腥、暴力、種族歧視、違背善良風俗或涉及不法的網站
4. 單月網頁瀏覽頁次達 150 萬次以上

光是第四點就會讓很多人不符合申請條件，提供給各位做個參考。

以上四種是除了Google AdSense以外，在你經營網站的同時也能創造收入的方式。