Kaie's Blog: 2006-11

[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

[+/-]

[Security] PuTTY - SSH Tunnel Usage

之前就有使用SSH Tunnel的相關應用，只是一直偷懶沒有記錄在Blog裡頭，在網路上看到Jamyy這位仁兄的文章，整理得很棒，將文章轉載於底下。
．文章出處： Jamyy's Weblog -> PuTTY - SSH Tunnel 運用備忘．相關好文收錄： heath's Daemon Castle : sshd on win32
※文章開始：
PuTTY除了能讓 Windows 平台以 ssh 通訊協定連入 Unix-Like 作業系統之外, ssh 連線後的通道還能達成許多目的, 如: 突破防火牆封鎖、防止網路封包竊聽、遠端存取防火牆內資源等等. 例如員工出差透過 ssh 安全通道連回公司存取資料, 以確保資料安全.

常見的 SSH Tunnel 運用如下:

透過 proxy 安全上網、讓 msn 突破防火牆封鎖
連入 smtp、pop3、vnc (遠端桌面)、samba (網路上的芳鄰)

ssh server 環境:

Unix-Like 作業系統 + ssh daemon
Windows 作業系統 + cygwin with sshd
內建 sshd 的 IP 分享器

client pc 環境:

下載 PuTTY, 將 putty.exe 置於 C:\Windows\System32 目錄中, "開始"→"執行" 或 "命令提示字元模式" 中輸入 putty 即可執行

實例一: 使用 proxy (代理伺服器)

目的: 避免被監聽 URL、蒐集密碼

↓啟動 PuTTY, 輸入 sshd host 網址

↓切換到 Connection -> SSH -> Tunnels 畫面, 輸入 Source port: 8080 (自訂), Destination: proxy server 的 IP 和 Port, 輸入完畢記得按 "Add"

↓如有需要, 可回到 Session 畫面儲存 (Save) 設定值, 以後執行 PuTTY 時可直接讀取 (Load) 設定值. 在任何畫面按 "Open" 即可以目前設定進行連線.

↓登入 sshd host 後, 將視窗縮到最小, 保持 ssh 連線

↓開啟瀏覽器, 設定 proxy 為: localhost:8080 以 IE 為例: 工具→網際網路選項→連線→區域網路設定

設定完畢回到瀏覽器主畫面, 開始透過 ssh 安全通道瀏覽網頁

實例二: MSN Messenger

目的: 突破公司防火牆限制、避免被側錄聊天內容

↓PuTTY 設定: Source port: 1080; Destination: 空白, Dynamic 設定完畢記得按 "Add" (其他 PuTTY 操作同上述)

↓MSN Messenger 設定: 工具→選項→連線→進階設定→只勾選 SOCKS 5 版, 伺服器: localhost, 連接埠: 1080

實例三: Outlook Express

目的: 避免被攔截信件內容、蒐集密碼

↓PuTTY 依序設定: Source: 25, Destination: smtp.host.ip:25; Source: 110, Destination: pop3.host.ip:110 (都是 Local)

↓Outlook Express 設定: POP3: localhost; SMTP: localhost

實例四: 網路上的芳鄰

目的: 存取遠端檔案分享資源

↓新增硬體: 網路介面卡 -> Microsoft -> Microsoft Loopback Adapter

↓取消勾選 "File and Printer Sharing for Microsoft Networks", 點選 "Internet Protocol (TCP/IP)" -> "內容" 進行下一步設定

↓設定 Loopback Adapter IP 位址為: 10.0.0.1 / 255.255.255.0, 點選 "進階" 進行下一步設定

↓點選 "停用 [NetBIOS over TCP/IP]", 按確定完成所有設定後, 重新啟動電腦.

↓PuTTY 設定: Source port: 10.0.0.1:139; Destination: samba.server.ip:139 或其他 windows 分享電腦 : 埠號 139

↓連線網路磁碟機: 直接把 10.0.0.1 當成一般 Windows 分享電腦即可

後記:

若遭防火牆擋 22 port, 可將 ssh server 改成 80 port
若要防止公司內部人員使用 PuTTY + ssh 通道搞怪, 可於 Linux NAT + Layer 7 防火牆擋掉 ssh 通訊協定:
iptables -A FORWARD -m layer7 --l7proto ssh -j DROP

參考資料:

．Tags: all computer linux security

．Comment counts: 1 Comment

[+/-]

[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"的動作如何自動化呢：