Kaie's Blog: blog

Showing posts with label blog. Show all posts

[+/-]

[Blogger] OpenID Commenting / 已經支援OpenID留言囉!

．Tags: all blog OpenID

．Comment counts: 19 Comments

[+/-]

[Blog] 部落格觀察 (Blog Look) Top100, why?!

．Tags: blog statistics

．Comment counts: 3 Comments

[+/-]

[Blogger] Subscribe to Comments - by email! / 透過E-Mail來追踨你所留言的文章吧!

．Tags: all blog blogger

．Comment counts: 5 Comments

[+/-]

[Template] Semi-Transparent Layout in ThisbloG (半透明化模版)

．Tags: all blog css Design template theme

．Comment counts: 21 Comments

[+/-]

[Blogger Hack] Comment Photo Hack (在Comment處顯示回應者圖片)

　　這個Blogger Hack我已經使用很久了，也是我個人非常喜愛的一個Hack，在我的Kubrick版型中，也有提供之功能!我覺得在回應文章時，同時顯示回應者的圖像是很酷的一件事，看圖片很快就可以辨認出是某某某，同時此iCon也具有特別的意義，像徵著你的Blog Spirit..等同於一個人的網路身份..口桀口桀 (XD..當我在亂講就好...是我個人特別癖好罷了)，當初在找這個Hack的時候，覺得明明Blogger就可以自行提供個人Profile Image的link，很簡單就可以辦到了，沒什麼技術上的問題，但為啥不提供...後來在Google Groupgs有看到，聽說官方的回應是，會有關於安全性方面的問題，所以不提供...至於問題是如何，當然就沒提到囉...

※Demo1: example
※Demo2: 以這篇回應較多的文章來看看吧...

　　因為之前較沒空，所以一直懶得翻譯...並且有不少網友來信問說是如何弄的，所以就直接來篇翻翻教學吧，請往下看吧..

．參考資料來源：
New Comment Photo Hack (Blogger) (新方法，較簡易，底下講解此方法..)
comment photos and highlighting hack (這篇是舊方法)

Step1.首先開啟你的Template(記得要是完整的，也就是到"Edit Html"頁面勾選"Expand Widget Templates")，找到底下的code

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

在這段code底下插入下面的code

<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'></dt>
<!--底下這段，針對IE修正了些小bug-->
<b:if cond='data:comment.authorUrl'>
&lt;script type=&quot;text/javascript&quot;&gt; if(typeof(commentPhotoIds) == &#39;undefined&#39;) var commentPhotoIds = []; commentPhotoIds.push({&#39;id&#39;:&#39;commentphoto<data:comment.id/>&#39;, &#39;url&#39;:&#39;<data:comment.authorUrl/>&#39;});&lt;/script&gt;                
<b:else/>
&lt;script type=&quot;text/javascript&quot;&gt; if(typeof(commentPhotoIds) == &#39;undefined&#39;) var commentPhotoIds = []; commentPhotoIds.push({&#39;id&#39;:&#39;commentphoto<data:comment.id/>&#39;, &#39;url&#39;:&#39;&#39;});&lt;/script&gt;                
</b:if>

Step2.接著往下滾，你會找到一個相對應的</b:loop>，在</b:loop>之前新增底下的code</div>
Step3.在tempalte中，找到</body>，接著將底下這段code貼在</body>上面，底下有maxwidth(限制最大圖像寬度)和defaultimage(若在Profile中沒有圖片時，所使用的預設圖片)參數供你自行調整

<script type='text/javascript'>
//<![CDATA[
  function commentPhotoDo() {
      var tag;
      for(var i = 0; i < commentPhotoIds.length; i++) { 
//上面那行，相較於原文，也作了些小修正了，解決一些怪異的行為
        tag = document.createElement('script');
        tag.type = 'text/javascript';
        tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=70&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');
        document.body.appendChild(tag);
      }//end for var i in commentPhotoIds
  }//end function commentPhotoDo
  if(typeof(commentPhotoIds) != "undefined") commentPhotoDo(); //在首頁不執行此script
//]]>
</script>

Step4.接著就是存檔，就ok啦...快去看看你的成果吧..

．Tags: all blog blogger hack computer WTF

．Comment counts: 96 Comments

[+/-]

[Template] Neo + Kubrick = Neobrick

．Tags: all blog computer Design template

．Comment counts: 2 Comments

[+/-]

[公告] 更新之前發佈過的一些 blogger 相關網頁

．Tags: all blog blogger hack computer google javascript template

．Comment counts: 23 Comments

[+/-]

[AJAX/JSON] Kaie's Blog 2.0 (beta)

．Tags: AJAX all blog blogger hack computer JSON

．Comment counts: 5 Comments

[+/-]

[CSS] Magazine Style Drop Cap

　　來分享一下，我們時常在雜誌常見的一個首字放大（drop cap, dropped capital letter），是很受歡迎的設計元件，用來做為商業通訊、雜誌文章、書籍章節或其它公開文件的開頭…之前看到某個教學，於是也跟著玩了起來囉...底下來看幾個範例吧!參考資料來源： Mandarin Design -> Magazine Style CSS Drop Caps

．Example1:
<span style="margin:5px 7px 0 0; float:left; background: #fff; border:2px dashed #aaa; line-height:55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;">旅</span>
旅美投手王建民6日對西雅圖水手隊差一點完全比賽，投了7.1局無安打、無人上壘的比賽，鈴木一朗形容王建民「有著冷靜的外表，但內心卻是火熱的。」他說：「我喜歡他。」原本鈴木一朗想在七局上成為打出第1支安打的打者，不過左外野深遠飛球遭到松井秀喜美技接殺。

．Example2:
<span style="border: 1px solid darkkhaki; padding: 3px; background: khaki; margin-right: 6px; margin-top: 5px; float: left; line-height: 55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;" >鈴</span>
鈴木一朗在6日的比賽中，直到七局上才意識到王建民有可能會締造完全比賽，在該局第一位上場打擊之前，他詢問隊友城島健司：「現在是完全比賽嗎？」城島回答說：「是的。」鈴木一朗便告訴城島，他要擔任打破完全比賽打出第1支安打的打者。

．Example3:
<span style="float: left; line-height: 70px; padding-top: 2px;">S</span>
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text. We used a font size of 56px for the first letter. If there is enough text an even bigger first-letter size looks good. The code can be adjusted for a slight overlap by adjusting the letter spacing. The color name chocolate tastes good today. There are more edible color names here.

．Example4:
<span style="border: 1px solid black; background: firebrick; margin-right: 6px; margin-top: 5px; float: left; line-height: 60px; padding-top: 2px; padding-right: 5px;">M</span>
Mike Golby might like the background color firebrick better than gold. Golby changes text colors for emphasis but if we don't specify the color for the text it will default to normal text color for that page. By the way, thanks for the Strunk and White Plumerias Mike. I noticed them when visiting your place to find an example of a color to use.

．Example5:
...
...
要如何有型，由你決定...

※以上Code中的CSS參數請自行客制化吧 >_^

．Tags: all blog computer css Design

．Comment counts: 7 Comments

[+/-]

[Template] Neo for everyone

．Tags: AJAX all blog blogger hack computer JSON template

．Comment counts: 14 Comments

[+/-]

[Javascript] Style Sheet Switcher

．Tags: all blog blogger hack computer javascript template

．Comment counts: 12 Comments

[+/-]

[Javascript] Encrypt your private blog post

　　今日在PPT上的Blog版逛到版友weijr所提到的一篇好文章，可以用來針對Blog中某一段文字給予加密，變成讓人無法理解的「火星文」 XD.. 解密過程只輸入正確的密碼之後，即可馬上在Blog上顯示出正確的「地球文」，不用重新Reload...超棒的Hack，對於此類技術性的Hack，個人超愛的…

研究所時有碰過一些跟Cryptography(密碼學)有關的東西，但只懂一點理論上的皮毛而已，沒有動作實作過，如今玩Blogger的同時，剛好有個有人心士將他所學應用在他的需求上，真是與實務面作了結合，太棒了老兄…我要向他看齊..XD。

原作者實現此Hack的用意就是: 他想要將他一些私人的、不方便公開的東西，亦或某些只想供親朋好友看的內容，記錄在公開的Blog上頭，又不失隱密性，且方便日後查詢，於是針對這些私密訊息的簡易加解密功能就如此誕生啦! (所利用的演算法是 256-bit AES，目前來說「安全性」算相當高了)

※適用範圍: 所有支援Javascript的Blog，若不幸你的Blog不支援的話，快跳槽來「Blogger」吧，保証可以隨便你惡搞的Blog平台，不會後悔的

資料來源:
Vincent Cheung -> Encrypted blog posts

快往下瞧瞧這強大的Hack吧... :D
:: Demo (展現出來的效果如下，兩種方式) ::
Key(密鑰): ie-sucks

Demo1:
Click to Decrypt text (點擊此處解開火星文，裡頭有清涼的唷)

Z0J1c4HlZqELhLfFoUOd5hH9Wu6ntYW26B4XXM24lKlRT05Z+lEDEsPVjtvqISIXoAtLKJwuksdqBpY3higDTLhYarZUgXVyyH1WY5N7hzPrP2xx0gJisgbHx2IdtoXww4Ure0hui2IcRuX26FSlxTnbIKQlLH22p7cIvQXgYak6KiV6MKaBKeiIBSKSYi5Kz8t6MSM4kIGnmzBmibsNMaPCjzb4KGmVA7xegfkyQNfPzK51Yl6SgeoENK8MUGTnbz0L1l5YT9vBYd5LxJdbf8/hwmhvY2Lzkq+iLeP9ClKIuirkwt2J3qhveuQR/tqylONAVxNccbT7e8n6j4pw85F8+4GAPDf60lbo9DuusRA=
Demo2:
Show encrypted text (點擊此處變身為火星人)

上方展現出來的效果是不是很炫呀 ^_^，超吸引人的吧，快來安裝一下吧，底下開始中文化原文..囧rz，方法如下:

首先在你的Blog中嵌入此Hack所需的Javascript，在Blogger的使用方法就是將底下的code加在Template中的</head>上面即可(其它Blog方法就是加在header裡頭就對了)<script language='JavaScript' src='http://vincentcheung.googlepages.com/blogjscrypt.js'></script>

完成上面動作之後，基本上就完成了，若要在新文章中新增「火星文時」的話，請透過底下兩個步驟:

產生加密過後的火星文:
透過此網站，輸入「Key」欄位以及「Plain Text」欄位，接著按Encrypt Button(加密鈕，在Plain Text欄的下方)，此時便會在「Cipher Text」欄位產生加密過後的火星文字啦(底下會用到..)!!
※千萬要記得上方你自行定義的Key，之後解密時要用的，若忘記了，恐怕沒有量子電腦(Quantum Computer)這般等級的高速電腦是解不出來的。
嵌入火星文片段至新文章中:
共有底下兩種顯示方式，依個人喜好選擇擇一
．方法一(如上頭Demo1，直接在文章中顯示火星文):<a href="javascript:Decrypt_text('unique_name');">Click to Decrypt text (點擊此處解開火星文)</a> <div id="unique_name">此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)</div>

．方法二(如上頭Demo2，隱藏火星文，只顯示連結):<a href="javascript:Decrypt_text('unique_name', '此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)');">Show encrypted text</a> <div id="unique_name"></div>

※注意上方的unique_name型態是div tag的一個id名子，可以自行命名，只要在template中，或文章中不出現同樣的id即可，否則會造成判斷錯誤!!也就是在一個顯示頁面中，有用到兩個以上火星文片段的話，那麼此id的命名就必須是unique_name,unique_name1,unique_name2...之類的。

最後，作者很風趣的列舉了幾個常見問題(Faq)，很北爛的一個家伙...有興趣去看看...

．Tags: all blog blogger hack computer javascript programming security WTF

．Comment counts: 87 Comments

[+/-]

[Javascript] Add Digg vote button on Blogger Template

．Tags: all blog blogger hack computer Digg javascript

．Comment counts: 13 Comments

[+/-]

[AJAX] AJAX Labels Cloud Reloaded

繼之前的[AJAX] AJAX Labels Cloud之後，原作者Deepak又再度的補強了「AJAX Labels」的功能囉，趕緊來瞧一瞧吧...資料來源: Deepack -> AJAX Labels Reloaded
※新功能如下：

內建分頁導覽系統(Navigation-System)，之前的Hack只能將所有同一個類別的文章同時顯示在同一頁面，若文章很多時即會吃掉很多Memory...Browser也會整個被拖慢
支援在IE底下，使用以"繁體中文字"之類的 Unicode 來命名Label(標籤)!
安裝方式更加簡易

※至於所展現出來的效果，請直接點選我的Blog上方"AJAX Tags Cloud"，再隨便選個分類即可一目了然...
底下直接講解如何安裝此Hack到你的Blogger中，至於有使用之前舊版本 AJAX Labels的玩家，請自行至"原著網站"看，有詳細的解說，教你如何「升級」到新版本的AJAX Labels(本人就是從舊版升級到新版本的)，要不然直接"砍掉重練"也是可行啦.. :p

Step 1. 為了以防萬一，先備份一下你原來的template吧! 再就就是編輯你的template，找到</head>這個keyword，再將底下code貼到</head>上方。

<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag    - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel  - Text to show for the label feed link.
// catLabel   - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5; //一次顯示幾筆資料
var navFlag = 1;   //是否使用分頁(導灠)功能
var feedLabel = "Subscribe to"; //...該怎麼解釋呢..
var catLabel = "Sorted into:";  //...沒什麼好解釋的..
var closeLabel = "Click to close"; //...這也一樣.. XD
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

上面5個粗體字的變數，根據個人喜好，可以自行再客制化一下.. :D
Step 2. 找到底下code

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

取代成下方

<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

Step 3. "假如" 你在sidebar有Label Widget的話，再作這一步驟，找到底下code

<b:if cond='data:blog.url == data:label.url'>
 <data:label.name/>
<b:else/>
 <a href='data:label.url'><data:label.name/></a>
</b:if>

取代成下方

<b:if cond='data:blog.url == data:label.url'>
 <data:label.name/>
<b:else/>
 <a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

Step 4. 按下此Button，再隨著說明步驟，一步一步完成...

新增此Widget的目的就是，當你點選分類標籤時，更新的內容所要顯示的地方.. ^_^，看你想放哪邊就放哪邊囉!!

Step 5. 儲存範本，結束啦...快去看看吧!! 多了..Navigation-System是不是很Cool呀!

．Tags: AJAX all blog blogger hack computer javascript JSON

．Comment counts: 18 Comments

[+/-]

[AJAX] AJAX Labels Cloud

今天在 Blogger Hacked 發現一個超棒的東西叫作AJAX Labels，也就是之前 [Blog] Peek-A-Boo view of posts in label pages 的改良版，利用 AJAX/JSON 的技術，大幅提升Blog的更新速度，效果就像此圖中所表現的(建議還是試著點圖中的"AJAX Tas Cloud"才能親身體驗「真的快、好厲害」)，感謝作者Deepak分享(very Awesome!)資料來源： Blogger Hacked: AJAX Labels接下來開始翻譯(...XD)安裝步驟：

Step1:若要此hack能夠正常運作的話，你必需在你的Blog裡使用"Prototype Javascript Library"，你可以到官網自行抓一份，放到你的空間中或者懶得話拿我的去用也無妨..^^(畢竟是Google提供的空費空間)，所以到必需在你的Template中新增底下code (放置於<head>...</head>裡頭)<script src='http://chenkaie.googlepages.com/prototype.js' type='text/javascript'> </script> <script src='http://chenkaie.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
Step2:接著新增核心部份程式碼，將底下連結中的程式碼仿Step1.同樣加到<head>...</head>裡頭，裡頭CSS請依照您個人喜好修改，細項說明，請參考原著解說!CSS Code & Javascript code: http://bloggerhacked.googlepages.com/ajaxlabelsscript
Step3:在你的Template中找到底下片段，有一樣的全都要修改(若不改的話，就是原本Blogger提供的效果)

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

將上面紅色部份，取代成底下：

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

Step4:若你原先有裝Labels Cloud的話(沒有請跳到Step5.)

資料來源：
phydeaux3: Blogger Beta Label Cloud Update
phydeaux3: Code for Beta Blogger Label Cloud

若要將點擊Labesl Cloud所呈現出的效果也修改成AJAX Labels的樣式的話，請將底下：<a expr:href='data:label.url'><data:label.name/></a>修改成底下的樣子<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'><data:label.name/></a>
Step5:新增一個"HTML/Javascript" Page Element放置於"Blog Posts" Element的上面(可隨個人喜好修改)，裡頭的code如下(和原作不一樣，原作的似乎有些小Bug，我作了一點修改，若你作完不行的話，請參考原著)：

<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...
</div>
<div id="search-result" style="display: none;"></div>

Step6. 存檔離開就好囉....^^ 快去試試看呈現出來的驚人效果吧!!

※此AJAX Labels Cloud是抓取Blogger提供的feed中summary類別(比較精簡，為了追求更佳的速度感^^)，作為文章預覽，所以呈現出來只有一小段!
※還有預設，點選每一個Label只有呈現5篇文章，若要增加的話，請將Step2裡頭程式碼"?max-results=5"中的5改為您想要的數字即可!

[Update 2007-03-14]
原作者，發表了新版本的AJAX Labels了，請參照此處

．Tags: AJAX all blog blogger hack computer javascript JSON WTF

．Comment counts: 20 Comments

[+/-]

[Javascript] Selectable Post Font Size for your best view!

之前有看到許多網站或討論區，有可以自行選擇顯示字型大小的功能，對於視力好的人來說或許字型小了些沒什麼影響，但有些老人家..(是我嗎..XD)，有時就會覺得看得有些吃力，若能迅速的讓字型放大，不用再花時間ReLoad頁面的話，將會是個很不賴的工具!!

※當然藉由按 Ctrl++/ Ctrl+- (for Firefox)，或者是Browser提供的放大縮小功能，不然就是通用的「Ctrl+滾輪上下滾」來達到放大縮小的功能，但我這個人比較龜毛，因為這兩種功能所表現出來的文字常常是破碎或是很醜，個人無法接受...時常因為這樣不逛那個站了…囧rz，並且透過上述的方式縮放頁面字型時，是所有版面的字型都會放大，也就連帶影響到Sibebar、Header...及其它非本文章內容的部份，整個網站當初設計好的版型都變了樣，喪失美感! 因此，我在此Blog中提供三種用於縮放文章內容的合適字型讓大家選擇(位於此處)!!

至於在Yahoo Taiwan的新聞裡點進每一篇新聞之後，也有提供類似這樣子的工具，But...他每次點換字級大小之後，都必需要 Reload 部份的頁面，明明可以不用Reload的，為啥他這麼作…後來發現，廣告部份也隨著Reload換新的了...囧rz，想必這是最主要的原因吧，那是他們吃飯的工具，就給他reload一下吧...XD!!

參考資料來源：懒人图库 LAYABOUT'S GALLERY我根據上面所提供的的簡易版本，再修改成較適合於New Blogger版本 ^_^(當然再作適當的修改之後，其它Blog也都是可以套用的)。

在修改的過程中，又遇到某個語法getElementsByName在IE中的話只對表單的物件有作用...OMG..IE sux again!!還好有底下這位大哥的教學，解救了我...感恩!!
參考資料來源： IE vs. FireFox 系列 - getElementsByName問題於是，最後完整版的Javascript code (IE & Firefox 都正常) 就變成底下：

[Updated 2006-12-26] 針對留言中Benjamin網友所遇到的問題，在這裡提醒大家，貼底下code時應注意的事項：

由於Blogger在parse template語法有無錯誤時，他會檢查是否存在相對應的左括: <及右括: >，若不存在便會跟你說你的template語法沒有正確的close，導致儲存失敗。不幸的是，你若將Javascript嵌入template檔中，並且又很巧的，用到compare operator，例如：「小於:<」，如此一來他便會產生上述所提的，少了相對應的右括: >，而導語法錯誤啦! 因此，大家若要將底下這段javascript嵌入template中的話，記得將裡頭的<置換成<

<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
 att = elem[i].getAttribute("name");
 if(att == name) {
    arr[iarr] = elem[i];
    iarr++;
 }
}
return arr;
}

function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i < zooms.length; i++) {
  zooms[i].style.fontSize = size+'px';
}
}
</script>

之後，因為我只讓本文內容(Post.body)的字型大小可供縮放，因此編緝template內容，將裡頭找到的所有

<p><data:post.body/></p>

都置換成底下的樣子

<span name='zoom'><p><data:post.body/></p></span>

如此，就可以將被 name='zoom' 的span tag包住的那些內容，賦予字型縮放的功能!!

最後在將你要提供此項功能的界面，填入此段程式碼即可，裡頭的數字以px為單位：

<a href="javascript:doZoom(16)">大</a>
<a href="javascript:doZoom(14)">中</a>
<a href="javascript:doZoom(12)">小</a>

※展示出來的功能，請參照此圖，並加以操作看看…

．Tags: all blog blogger hack computer IE javascript WTF

．Comment counts: 58 Comments

[+/-]

[Blog] A not only Awesome but Lightning Fast Blog

．Tags: AJAX all blog computer Design JSON template

．Comment counts: 0 Comments

[+/-]

[WordPress] Theme : Vistered Little 1.6

．Tags: all blog computer Design theme WordPress

．Comment counts: 4 Comments

[+/-]

[Browser] Browser Compatibility Notes

．Tags: all blog computer css firefox IE javascript

．Comment counts: 0 Comments

[+/-]

[Template] Kubrick style for Blogger beta

由於個人很喜歡Kubrick這個源自於WordPress裡預設的"簡單中又不失美感"的一個版型 ^_^，於是將他移植到Blogger Beta的平台上 ^_^，並且加上了一些個人自認為還還不錯的功能...，只不過對於IE的親和力可能要說聲抱歉了...XD，IE實在很討人厭..囧rz，可能有一些些小bug就是了，但不會有什麼太大的影響!!

．底下為預覽圖：

這裡有示範網站 Demo / Example
以按右鍵->另存新檔的方式下載此 Template 或 Template (二選一)
(※注意事項：請把原先的作好備份，以備不時之需!!套用時，要先把沒用的widget清空，再小心將你原本的widget搬到此新 template，不然到時不見了，你會愈哭無淚的!)

．額外附加功能：

Expandable posts with Peekaboo view(Blogger Beta 摘要/全文切換之"繼續閱讀功能) [Figure]
Peek-A-Boo view of posts in label/archive pages (在Label/Archive頁面加入擴展功能 ) [Figure]
Author comment highlighting and notification (特別標示出，原Blog作者註解，用於和非Blog作者作區別) [Figure]
Comments with profile photos (顯示註解者的個人圖像) [Figure]

若你想換成自己的Banner的話，底下有一個簡單又快速的方法...really Awesome!!

Website: http://redalt.com/Tools/Kubrickr
此Kubrickr就是利用強大的 Flickr 所提供的超大圖庫，然後由裡頭的圖片產生你所想要的Banner，實在是個非常棒的應用!! 真是造福了不少人群..

所以說，你若看煩了Kubrick預設的Banner，或想要多點變化，你可以隨時輕鬆的從Kubrickr產生你所喜歡的 ^_^

若有問題，歡迎隨時留言討論...

[Updated 2006/12/13]
修正背景色的色差，與原始的Kubrick不太一樣，導致用Kubrickr所產生出來的Banner和舊版本的不一樣!! < 感謝 Orion 提供 >

[Updated 2007/07/14] 由於原作者hosting的javascript file(hackosphere.js)空間，已經無法承受愈來愈多人的存取，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

．Tags: all blog Design template WTF

．Comment counts: 108 Comments

[+/-]

[CSS] A Cool blockquote for "Code style" and some blogging tips

資料來源：
良人的大秘寶 -> [筆記]在文章裡顯示優質的程式碼區

個人覺得蠻有質感的 ^_^ a nice css design!! 感謝「良人的大秘寶」的分享!! 樣式就如同下面的code block所示。

code  {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://chenkaie.googlepages.com/Code_BG.gif) left top     repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

個人依樣畫葫蘆地新增一個比較常用的參考資料來源(Reference Block，記得若要用code .ref{}這個語法的話，上面的code{...}也是不可或缺的...必需有這個code{..}存在的前提，code .ref{...}才會生效)，如下：

[Updated 2006-11-29]IE sucks again..囧rz! 最近發現用IE開的話，用我自訂的<reference> tag的話，在IE會失效，後來又換了<citation>這個字，沒想到還是sux...真無言，IE幹麼鎖死這麼多Keyword呀，真不知微軟在惡搞啥，給user的自由度這麼低!!
於是參考了synnwang的作法(感恩^^)，將原本底下這段

reference {
display: block; /* fixes a strange ie margin bug */
overflow:auto;
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 5px 0 15px;
}

換成下面這段，在IE才能work!!

code.ref{
display: block; /* fixes a strange ie margin bug */
background: #fff url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 0 0 15px;
font-size: 13px;
font: $bodyfont;
line-height: 1.6em;
}

因此若要使用<code.ref> tag，方法便如下：
<code class="ref"> 引用文字的部份 </code>

※因為常在Blog上post一些教學，把在Blog貼"html code"的一些tips記錄在底下：

將 < 以 < 取代
將 > 以 > 取代
將 & 以 & 取代

如此一來，所貼出來的html code便不會被Browser給解讀為掉，而造成貼出來的code都看不到..!!

[Updated 2006-12-26]若是自行一個一個取代的話，似乎也是有些麻煩，因此個人常用的方法是：透過Nopaste之類的站，像是：http://phpfi.com/ 使用的步驟如下：

將該填的欄位填完之後，(其實只要填source這個框框即可，其餘可以略過)
接下來，依照個人喜好(若選特定的某種語言，還會有美美的關鍵字highlighting唷!)，選擇位於右下角的"-auto detect"這個選單，選好後押save鈕!
然後便會產生你所貼的source coe於網頁上:
- 若此時你用的是Firefox的話，那恭喜你了，選對Browser，省事多了! 選取你要的source code部份，接著按右鍵->檢視選取範圍原始碼(View Selection Source)
- 若用IE的話(I am sorry...IE sucks)，無法觀看所選取的特定部份原始碼，只能直接檢示所有頁面中的原始碼，再自己找尋你剛剛貼的code!(或是是我對IE不熟，若有好的檢視原始碼方式，歡迎告知我，感謝!
接著再按右鍵->複製(Copy)，即可貼到你在Blogger中編緝文章的地方囉^^，很省事吧…這是我常用的方法! 請供大家參考....若有更棒的方式，懇求大家提供給我..XD

[Updated 2006-11-29]※有時Blogging時，因為後來有Update或是有寫錯筆誤之處，便會想要加上刪除線作為Highlight，而非直接在文章中刪除，同時也比較醒目，方便讀者閱覽..作法如下：<span style="text-decoration: line-through;"> deleted text part </span>

．Tags: all blog blogger hack computer css

．Comment counts: 25 Comments

[+/-]

[Javascript] jQuery New Wave Javascript

．Tags: all blog computer javascript

．Comment counts: 5 Comments

[+/-]

[Javascript] Put Snap Preview Anywhere™ on Your Site

．Tags: all blog computer javascript

．Comment counts: 4 Comments

[+/-]

[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box

為了使整個版面好看，但又不失支持Blogger的原則，還是要幫Blogger打個廣告，而且發現升級到Blogger beta之後，那個navbar裡頭的"Search Blog"這個功能，相當的不賴，他的Search Result會直接show在原本Blog中的#content-wrapper裡頭，也就是MainPage中，一整個就很像是WordPress所提供的「站內的全文搜尋」功能，個人相當滿意 :)。
※範例：像是搜尋Keyword "blog"的話，所呈現出來的結果就像這樣。

因此，我想要的呈現方式便是：將原本固定在版面上頭的navbar的行為設成：「隱藏在上頭看不到，一旦滑鼠移過去的時候，就會出現(還是有幫Blogger作個廣告吧 XD)」，然後將"Search Blog"的功能直接顯示在Sidebar中，方便搜尋 ^_^參考資料來源： Basang Panaginip -> Setup a Blog: hide or remove the navbar and add blog search box．動態顯示Navbar的方式如下，只要在template中加入此段css code即可(IE不適用..對於IE的愛用者感到萬分抱歉，請儘速轉移到Firefox...XD)：

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0);
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

．在Sidebar中加入Search Blog的功能，只要新增一個Page Element(HTML/JavaScript)，然後加入底下的code:

<form id="searchthis" action="http://YourID.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
<br/>By Google (Show result in this Blog)
</form>

至於一些個人化語法的修改，就請參考原著，不再詳述，基本上改上面的size:"Search Box的大小"，value:"所要顯示的文字"。

※由於上面那個Blog Search「目前」對於中文字的搜尋似乎還不太準確(給Google一些時間，相信他一定會改善的)，於是便需借助"Technorati"這個站的幫忙囉，可是透過他的網站所產生的javascript code，所呈現出來的樣式，並非我想的，於是便作了一些修改，拿掉些我不想要的東西 ^^，source code如下：

<script type="text/javascript">
<!--
drawTREmbed( '<div id="technorati">' +
'<form id="te_s" method="post" action="http://www.technorati.com/search.php">' +
'<input id="te_search" type="text" size="15" name="s" maxlength="255" /> <label for="te_search"> </label> ' +
'<input type=\"submit\" class=\"btn\" value=\"Search\" /> <input type=\"hidden\" name=\"sub\" value=\"searchlet\" /> <input type=\"hidden\" name=\"from\" value=\"http://chenkaie.blogspot.com\" /> <input type=\"hidden\" name=\"cc\" value=\"8hq5ubtxcg\" /> </form>' +
'Powered by <a href="http://www.technorati.com/?cc=8hq5ubtxcg"><img border="0" src="http://static.technorati.com/pix/tn-tiny.gif" alt="Powered by Technorati" /></a>'+
'<br/><a href="http://www.technorati.com/search/http://chenkaie.blogspot.com?cc=8hq5ubtxcg" id="te_lh" target="_blank" >» Blogs that link here</a>' +
'</div>'
);

function drawTREmbed(s){ document.write(s); }
// -->

</script>

．Tags: AJAX all blog blogger hack computer css google javascript search

．Comment counts: 9 Comments

[+/-]

[Javascript] show screenshot of a webpage by WebSnapr

．Tags: all blog computer javascript

．Comment counts: 1 Comment

[+/-]

[Blog] Random Rotating Banner Hack

這個Hack相當的棒，可以隨機在你所指定的「圖片集」中，隨機Show一張圖，用在Blog的Banner上..那就更Cool啦 ^_^，所展現的效果就在我的Blog，直接多試幾次「重新整理 F5」，就清楚了!

此功能在WordPress中已經是預設的plug-in了，藉由這個簡易的javascript，可以達成很多其它功能，像是：產生「隨機Discription」、「隨機 Background」....等等...想到什麼，就自己加吧!
以隨機Banner來說明的話，主要的作法就是利用javascript修改css style，例如原來template裡面的#header-wrapper的style:

#header-wrapper{
   margin: 0;
   padding: 0;
   font: $pagetitlefont;
   background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}

基本上，我們的主要作法就是在每次Browser要讀取你的Blog的HTML原碼時，先利用一段javascript code，產生一個同樣的background定義，用以覆寫<body>裡頭的wrapper-header的background定義，所以記得要把底下這段code「放置在<body>之後」，就行了：

<script type="text/javascript">
var banner= new Array()

banner[0]="http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickheader.jpg"
banner[1]="http://chenkaie.googlepages.com/kubrickheader_1.png"
banner[2]="http://chenkaie.googlepages.com/kubrickheader_2.png"
banner[3]="http://chenkaie.googlepages.com/kubrickheader_3.png"
banner[4]="http://chenkaie.googlepages.com/kubrickheader_4.png"

var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

※記得上頭的"4"要一致，因為他的random產生器，填4的話，就是產生0~4這5種值!假設你只有0,1,2三張圖的話，那麼Math.round()裡頭的4就要改成2...that's all!! 若你還要隨機變換字型產色之類的動作，就再加新的document.write(...)的語法進去就ok囉!!

重要參考文獻： Freeyasoul Adventure -> Random Rotating Banner Hack

．Tags: all blog blogger hack computer

．Comment counts: 34 Comments

[+/-]

[Blog] Peek-A-Boo view of posts in label/archive pages

很棒的 Blogger Hack，不僅具有和 [Blog] only show "Post Title" at Lable and Archive Page 這篇同樣的功能，更可以支援直接擴展(Expandable)，可以加速網頁的開啟的速度... Very Cool !!

例如：[Blog]所展現出來的行為。
實作方法如下：

Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間，已經無法承受，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

Step2:修改成如下，新增紅色字所顯示的部份 (記得把 Expand Widget Templates 選項打勾，才可以看到完整的code)

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
      <b:include data='post' name='post'/>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

※若要改變樣式，請自行更改上頭程式碼裡頭的"[+/-]"這個符號...

Step3: 沒有了，就這樣子而已...快去測試看看你的Label和Archive頁面吧...^^

．參考文獻：Hackosphere -> Peek-A-Boo view of posts in label/archive pages

．Tags: all blog blogger hack computer WTF

．Comment counts: 33 Comments

[+/-]

[Blog] Expandable posts with Peekaboo view (blogger beta)

這個功能，個人覺得比起之前的「"...Read More"篇」的更為實用，因為不需要重新載入新的頁面，直接就打開來...反應速度更快，閱讀完畢時，又可馬上縮起來，不占版面空間，相當的方便 ^_^

．實作方法如下：

Step1:將底下這行加到你的template的<head>裡頭(也就是在</head>之前就對了)。
[Updated 2007/07/14] 由於原作者hosting這個javascript file的空間，已經無法承受，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼，若你沒有加過以上那一行的，就略過，直接加以下這段code...
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

Step2:找到底下這段，加入紅色的部份

<b:includable id='post' var='post'>
<div class='post'  expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>

Step3:找到底下這段，同樣加入紅色的部份

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>[+/-] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>[+/-] Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats --></div>

※若要更改"顯示文字"，請自行更改上頭程式碼裡頭的"[+/-] Read More..."和"[+/-] Summary only..." 這兩個文字標籤...
Step4:基本上這樣就完成了! 最後，先登入Blogger，再到「Settings->Formatting」，將<span id="fullpost"> 想要隱藏的部分 </span>填入Formatting的框框裡即可，如此一來，每次編輯新文章時，即會自動填入所需的程式碼囉 ^_^ oh ya!!
※注意是span，並非如同之前這篇「"...Read More"篇」所提到的，是用div...請小心!!

※參考文獻：
．Hackosphere -> Expandable posts with Peekaboo view
．How can I make show/hide links for my posts?

．Tags: all blog blogger hack computer css WTF

．Comment counts: 108 Comments

[+/-]

[Blog] adding "...Read More" tag in Blogger beta

．參考資料來源：有關 Blogger in Beta-水瓶子 Hackosphere轉錄文章來源： Blogger Beta 繼續閱讀功能改良
一般在blogger上使用繼續閱讀功能的方式都是在想要隱藏的文章上放上tag，然後再利用css的display:none來隱藏該篇文章，由於display:none所隱藏的部份，不論是在IE或是Firefox下瀏覽，一樣都會把隱藏部份下載到cache，所以如果首頁的文章過長或是圖片過多，一樣會影響到首頁的瀏覽速度。

所以這篇利用Javascipt，把想要隱藏的文章直接remove掉，提高首頁的讀取效率，並且還具有Read More標籤適時才出現的功能。
首先進入編輯html，請記得把Expand Widget Templates打勾，然後在<head>間放入Javascript code
<script type="text/Javascript"> function hidePost(postUrl) { var label=document.getElementById("fullpost"); if(label!=null){ eA = document.createElement("a"); eA.setAttribute("href",postUrl); eA.setAttribute("title","Read More"); eA.appendChild(document.createTextNode("...Read More")); eB = document.createElement("p"); eB.setAttribute("id","read-more"); eB.appendChild(eA); label.parentNode.appendChild(eB); label.parentNode.removeChild(label);} } </script>

接下來找到
<p><data:post.body/></p>
用下面的code取代它
<p><data:post.body/></p> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.url'> <script type='text/javascript'>hidePost('<data:post.url/>');</script> </b:if> </b:if>
最後，把想要隱藏文章部份的tag中，加入id="fullpost"就完成了，即
<div id="fullpost"> //隱藏部分的文章 </div>
※註：Chagg says:「目前測試，在IE下確實有提升讀取效率，不過在Firefox下好像沒什麼用，照樣還是把隱藏部份下載到cache 囧rz，目前還在想有什麼方法可以對付Firefox」

．手動加id="fullpost"的動作如何自動化呢：