2008年1月28日

移植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所沒有的。


2008年1月27日

改進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部份:

  2. 繼續閱讀懶人加強版部份:

2008年1月26日

設計精美的Template

我打算替Josh's Note換新裝後,因為Neo有幾點我不怎麼喜歡,原作Ramani為了讓Neo的速度加快,所以拿掉了一些會影響讀取速度的Tag,例如文章的Label,讓我不得不放棄套用Neo的這個念頭,所以我只好再度將Google大神請出來,而且也找到了幾個專門在設計Blogger Template的網站,其中又以Dzelque的設計我比較喜歡。

自己搞一個Template是很累人的,因為我曾經試過,之前所用的Template就是自己作出來的,這次真的沒那個心力了,所以決定用別人的,我所選的是DzelqueBlogger 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套用,發現了幾點我不太喜歡的事,所以取其中一、二個套用,至於是什麼,請各位直接去按畫面最上面的標籤就知道了。