說之前我先小小抱怨一下：喵的！這是我第一次寫教學文，從來不知道寫教學文會那麼累！光事前我就花了近兩個小時準備才動手。可能是沒經驗，光是如何在「文章內寫入程式」這個問題就讓我卡了許久，更別提草擬文章脈絡、抓圖等等動作。
看在我也沒啥本領可以三不五時寫個教學文，邊罵也就邊弄了。閒話休提，直接進入本文吧！
不囉唆，先講「繼續閱讀plus！」的優點：
1.首頁不讀圖，大幅加快載入速度。
2.跟blogger最受歡迎的「繼續閱讀懶人加強版」結合，所以依然能自動縮文。尤其是不想一篇一篇修改舊文的懶人來說，雖然不修改舊文就無法套用「繼續閱讀plus！」，但仍然可以自動縮文！
3.套用方法容易。
2.跟blogger最受歡迎的「繼續閱讀懶人加強版」結合，所以依然能自動縮文。尤其是不想一篇一篇修改舊文的懶人來說，雖然不修改舊文就無法套用「繼續閱讀plus！」，但仍然可以自動縮文！
3.套用方法容易。
文章裡面插入圖片的方法需用客制化方法撰寫，現有「img src=」不能適用，換句話說，如果你跟我一樣透過blogger線上平台寫文章，插入圖片以後需切換到「修改HTML」標籤，修改插入圖片語法（不難，但有語法恐懼症請左轉離開，謝謝。）
也就是說雖然你文章看到是這樣：
但因為「繼續閱讀plus！」的關係，將原本插入圖片語法改掉，讓許多文章編輯器（包含blogger平台）不認得，所以我編輯文章時看到的文章畫面會變成這樣：
發現了嗎？在編輯文章時，圖片其實都是看不見的。
嚴格來說上面的缺點不是什麼難題，解決方法也非常簡單，只要當我們在按下「發佈文章」前，再一次將插入圖片語法修改成符合「繼續閱讀plus！」的圖片語法，就能解決編輯文章時看不見圖片的困擾。
因此，請你通盤考量再決定是否採用。
好，那就開始教學步驟吧。首先，老梗一句「請先備份你的CSS」。然後登入blogger控制後台，點選「版面配置」-「修改HTML」，找到<body>，然後在後面貼入：
<!-- bof boy39 signature -->
<script charset='big5' src='http://sango417.miroko.tw/lp0.js' type='text/javascript'/>
<script language='javascript'>
var tmp0=document.URL;
var tmp1="<data:blog.pageType/>";
displaymode0='10';
if (tmp1=="item") { displaymode0='00'; }
else {
if (tmp0.indexOf("/search/label/")> 0) { displaymode0='02'; }
else { if (tmp0.indexOf("archive.html")> 0) { displaymode0='04'; }
}
}
</script>
<!-- eof boy39 signature -->
基本上只要全部跟著貼上即可，但請注意：此程式必須另外呼叫js來處理，因此你必須將「http://sango417.miroko.tw/lp0.js」這個js檔下載另外存在自己的網路空間，並將上面黃色標示處的連結改成你自己的網路連結。建議你可以跟我一樣放在miroko這個網路空間，支援外連，而且背後母公司是Seednet，不用怕會有倒閉的問題。（放上網路空間後，請記得更改黃色連結！否則假以時日可能無法使用！）
上面的js檔案主要在處理你如何呼叫圖片，換句話說當你想對文章內的圖片加框、調整文繞圖間距等等細部設定，請參考這裡（原作者boy39的說明，請直接跳到文章段落「第三段, 我把 公用程式 裡面, 你們可以再重新定義的部份提出說明:」觀看即可。嚴重警告！其他部分請勿參考，該文與本文作法有所出入，無法套用！）建議如果沒有太大問題，不要修改這些細節，除非你自己看得懂這些程式。
完成之後差不多搞定了，如何？夠簡單吧？
接下來進入圖片修改部分，還記得文章開頭說到的問題嗎？對！當你使用「繼續閱讀plus！」後，就不能使用預設的插入圖片方式。其實也不是不行，只是插入的圖片就會在首頁被載入，如此而已。
ok，所以當你決定套用「繼續閱讀plus！」以後，請記得往後發表文章的圖片語法都改成這個樣子（請注意！下面語法不能斷行，blogger平台會很自以為是的幫你斷行，因此需特別留意）：
<script>Link2Picasa1('參數1', '參數2', '參數3', 參數4);</script>
上面每個參數的意義如下：
參數1: 圖片檔的 url;
參數2: 點選圖片的外連的 url, 如果沒有外連, 請給 '' 空字串;
參數3: 圖片對齊 c/l/r : 中間/左邊/右邊, 都小寫;
參數4: 也可文繞圖, true/false . 但對齊中間不可文繞圖;
以我自己慣手的blogger線上平台為例，我在文中插入一張圖片，其實背後預設的html語法是這個樣子：
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FRA2ySgMqXYan9dFkNvWIlDwMOiyrCMx-YVoToBAGKwmWVT8a0fPBPpycPlSzYzRr_QSCszLnMVnMCKfEpipaizNZZO4sAbfOzdoISwLZ_sfig6c6-v2e7SMJNTxozVStO19vHqUgzYV/s1600-h/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FRA2ySgMqXYan9dFkNvWIlDwMOiyrCMx-YVoToBAGKwmWVT8a0fPBPpycPlSzYzRr_QSCszLnMVnMCKfEpipaizNZZO4sAbfOzdoISwLZ_sfig6c6-v2e7SMJNTxozVStO19vHqUgzYV/s400/3.jpg" /></a></div>
請注意上面紅色標記的網址，img src那段才是真正的網路圖片位址。也就是說我們如果將這段語法改成「繼續閱讀plus！」的作法，會變成：
<script>Link2Picasa1('"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FRA2ySgMqXYan9dFkNvWIlDwMOiyrCMx-YVoToBAGKwmWVT8a0fPBPpycPlSzYzRr_QSCszLnMVnMCKfEpipaizNZZO4sAbfOzdoISwLZ_sfig6c6-v2e7SMJNTxozVStO19vHqUgzYV/s400/3.jpg', '', 'c', false);</script>
上面語法如果成功，就會是張置中顯示的圖片。透過參數的修改，你可以自由決定圖片靠左、繞圖等等選項，其實非常方便！
建議你可以發一篇測試文章觀看，是否成功在blog首頁不載入圖片。一旦成功，你會發現你的blog加快了不少速度！（前提是文章的圖真的很多，沒多少圖可能就差別不大）
最後是我的睟碎念，真的好累！這篇文章又花了我一個小時！累死人了啦...
這個作法是boy39與我共同討論出的作法！（說「共同」那是我沾光，其實我只負責測、開需求，真正寫程式的人都是真神人boy39），如有問題歡迎留言，但我不保證可以幫得上忙就是。
不知道有沒有少了什麼？從開始測試「繼續閱讀plus！」到現在過了一段時間，希望沒有什麼遺漏才好！
推
回覆刪除基本上我覺得 Link2Picasa1() 根本就不是問題, 寫過程式的人都知道, 如果頁面上所有的元件可以'先程式化後再使用', 那是多麼完美的一件事啊!
回覆刪除將來我想要改東改西的時候, 我只要叫出那一小段程式出來改就好了, 不用管部落格已經累積了幾百篇文章, 或是連結了幾千張圖片.
only one, just only one...
是啊是啊，非常贊成你說的話~
回覆刪除我再想想blogger有沒有可以改進的功能來跟你討論討論好了..ㄎ～
'是啊是啊'感覺好像不是很誠懇的樣子...
回覆刪除我不要再跟你討論了, 都一直被退稿, 很鬱悶... (耍脾氣中...)
終於有空做測試了
回覆刪除好不容易把文章裡的圖全部改完= =
要繼續改下一篇時發現一個囧境
請問一下用這個語法要如何改圖檔的大小阿??
我的建議是盡量不要用「程式」去控制圖片大小...先利用簡單的修圖程式縮放。因為你用程式去控制圖片一定會失真，與其如此倒不如上傳前先編輯完成；一般建議圖片最好控制在500px寬度以內最好～
回覆刪除我去看了一下，你的網誌也是透過picasa來連結圖片，如此可以不妨建議你，透過picasa的連結位址來改圖片尺寸。比如這張圖片的連結是：
http://lh6.ggpht.com/_F1QJ7YEy9Hg/SSBDfjgrpbI/AAAAAAAACZA/dzm7OkYu6zM/s576/a06-IMGP9520.jpg
連結裡的「s576」其實就是在控制圖片大小，詳請不妨參考「0 與 1 謎詭世界 」的解說：
http://01mistery.blogspot.com/2008/02/blogger.html
希望可以幫得上忙...^^
!!!太感謝大大了
回覆刪除完全沒發現連結裡居然會有這種"秘密"
又學到一招了^^
有啥新發現再麻煩您啦
不會...
回覆刪除有幫得上忙就好..^^
祝福你改造順利囉！
11.23Update：如果要透過blogger插入圖片的語法來改變大小，請留意喔！Google似乎小小更新了語法。
回覆刪除一樣請參考「0 與 1 謎詭世界 」的解說：http://01mistery.blogspot.com/2008/11/blogger.html
我知道了
回覆刪除謝謝大大
不過直接用改網址的方法好像沒差^^
您好，我使用您設計的繼續閱讀plus！，不過Miroko把我的帳號砍了，原本的lp0.js沒有備份在我的電腦裡，真苦惱。請問可以跟您要嗎？
回覆刪除Luke您好，這格widget不是我的作品，因此我沒辦法分享給您，真抱歉。不過告訴您一個好消息，現在blogger自己都推出了「繼續閱讀」的功能，功能更棒效果更好，這個widget已經形同虛設，不必要了。
回覆刪除您可以參考這裡：http://hans543.com/2009/09/bloggerread-more.html
非常方便喔！
好吧...不過這樣就必須要一篇一篇改我的貼圖語法了 >_< 感謝您
回覆刪除