Sunday, November 12, 2006
[Blog] adding "...Read More" tag in Blogger beta
．參考資料來源：轉錄文章來源： Blogger Beta 繼續閱讀功能改良
有關 Blogger in Beta-水瓶子
Hackosphere
一般在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"的動作如何自動化呢：很簡單，只要利用Blogger提供的功能，先登入之後，到「Settings->Formatting」，將
<div id="fullpost"> //隱藏部分的文章 </div>填入Formatting那邊即可，如此一來，每次編輯新文章時，即會自動填入所需的程式碼囉 ^_^ oh ya!!
48 Comments:
When: February 15, 2007 2:36 PM
在你的 Blog 中找到許多好用的 hacks，我的部落格終於像樣了一點。
小弟的興趣是程式設計，最近剛踏入美工排版的領域，請多指教！
感謝
When: February 17, 2007 2:47 AM
To 日落：
呵呵…不用客氣，有空多來逛逛…
看來遇到志同道合之人囉 ^^ 歡迎多多指教...
When: March 29, 2007 12:51 PM
很不错的功能，不过只适合beta版，请教一下有没时候旧版的类似hack
When: March 29, 2007 1:45 PM
To emmy:
記得也有喔，不過我倒是忘了在哪邊有看過... :x
When: April 22, 2007 7:52 AM
之前試過其他地方寫的方法 一直都沒試成功
照你講的 卻一次就成功了
真的很好用 謝謝
When: June 14, 2007 7:31 AM
想請問一下
為甚麼我發表文章後只有標題和read more＠＠～
When: June 14, 2007 8:14 AM
To DAsnl:
咦，我猜應該是你沒有包好..也就是底下這部份
<div id="fullpost"> //隱藏部分的文章 </div>
你沒有處理好..造成內容不見了..
When: June 14, 2007 2:12 PM
哈...耍笨了＠＠
你的blog很讚！多逛有益健康！！
When: June 14, 2007 2:50 PM
To DAsnI:
哈哈...正常的啦!!我也常降子..多搞次次就清楚了..哈!!
When: June 27, 2007 5:03 PM
呃..我有個新手蠢問題..前幾天剛開始用..
怎樣才能跟你一樣."文章回覆"是有色塊直接出現在主頁滴...給你我滴版http://baseboom.blogspot.com/
我不是設計也不是程式..所以很笨...
如果你有耐心的話..
請教我怎麼改主頁的文章唄..我會用力速學滴!!
10分感謝..!!
Meko
When: June 27, 2007 7:50 PM
To SuperMeko:
我猜你指的就是我主頁上的 Recent Comments對吧...是的話，請參考這篇 Blogger最新回應程式產生器(426更新版)
When: June 27, 2007 9:48 PM
是滴...大感謝!!!!!
謝謝你囉!!!
:p
When: June 29, 2007 3:49 PM
man, i need to learn chinesse
or u should write this in english
.
.
.
.
.
Joke!
When: June 29, 2007 4:21 PM
To Isaz:
Hey man... It seems that u have succeed..
When: July 08, 2007 11:31 PM
無法顯示READ MORE...
When: July 09, 2007 8:27 AM
To 虛心請教:
這個...XD
依據經驗法則，應該是<div id="fullpost"> //隱藏部分的文章 </div>這個地方你沒弄好..
When: July 10, 2007 4:03 AM
不好意思又來麻煩，我試了這個read more 可是沒出現，可否幫我看一下?
http://cellocafe.blogspot.com
的網址
多謝!
When: July 10, 2007 7:53 PM
To Cellocoffee:
我看了一下你的blog，你似乎沒有加入這些code
<script type="text/Javascript">
function hidePost(postUrl)
.
.
.
</script>
上述的每個動作都是少不得的唷...要按部就班來，很簡單的，沒幾個步驟..^_^
加油...BTW 你女兒也太可愛了吧..
When: July 11, 2007 5:18 AM
成了!多謝
最後請問一下你的寫法跟堯@的寫法有什麼不同
抱歉我是愛問的白痴呆瓜
http://jinyaolin.blogspot.com/2006/09/beta-blogger2.html
謝謝解答!
When: July 11, 2007 5:44 PM
To Cellocoffee:
差別在於...跟他文章上頭所描述的差不多意思..呵!!我想你應該是看不懂才問的，意思就是說，他的那個方法
※優點：可以不用加 <div id="fullpost"> //隱藏部分的文章 </div> 這個東西，就可以隱藏文章!
※缺點：因為他是設定每篇文章都是顯示固定高度，所以當文章太短時，不足的地方即會顯示一大片大白...比較不彈性
大概就是差在這...
When: July 12, 2007 8:36 AM
哇，謝謝，真的懂了!!多謝!真的!
When: July 19, 2007 1:07 AM
抱歉！
請問為何我跟著做了後，
firefox除了會照樣下載外，
首頁或按其他方式分類的連結是正常，除了按「較舊的文章」會功能失效；
而用IE6則正常停止下載，但有些文章會正確顯示「READ MORE」，有些則READ MORE連帶隱藏的文章都消失了？
而且不管我改用「div id」或用「span id」都一樣情況？
然而不知和IE7有沒有關係，
我再試試改用div id="fullpost"，似乎終於一切正常了……可以把心一橫修改400篇。
所以還是想請問有沒有辦法讓FIRE FOX修正「較舊文章」的問題，
還有讓READ MORE靠右對齊的方法？
麻煩了……=_=
When: July 19, 2007 8:39 AM
To 月照草:
這項Read More的話，一定得用div id的方式才行得通，span的話..本來就不對囉!!這個功能記得在各Browser(IE6,IE7,Firefox)都是可以正常運作的...
至於，你說的較舊文章失效的問題，記得有在別處看到別人提到..好像是尚未解決..囧rz..因為我也沒在用這個功能了，所以我也沒辦法幫你測，sorry啦!
至於置右的話，請將Javascript改成底下即可
<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.setAttribute("align","right");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>
When: July 19, 2007 2:07 PM
嗯，改到了！謝謝^^
話說用IE的話按較舊文章都沒問題，
但FIRE FOX即使掛IE TAB都會令較舊文章失效，
所以IE TAB的顯示還是會和正版IE有異呢……=_=
When: July 19, 2007 2:59 PM
To 月照草：
這麼低神奇呀...囧
When: August 16, 2007 11:29 AM
大，你好~我又來了!
昨天透過你分享的加密文章後，今天又來你這挖寶。
現在我碰到的問題是~~
1. 我應該把寫出來的文章放在哪個部份,才會顯示出部份文章？按照您的回答16,下去操作,卻不知道應該把文章放在//之前還是之後?
2. 之前有在其他blog安裝了一些懶人外掛,因為我都不懂裡面的意思,現在想移除原本read more的那項功能改成你的,我因該一出哪些段落呢?
3.在我的blog裡有一些小型的方塊圖形,我可以把他們移除嗎?
抱歉問了一堆很笨的問題!
我的blog http://lecoeurkevin.blogspot.com
When: August 16, 2007 12:10 PM
對不起我又來了~~
我直接把原本話掛的功能全部移除,再去移除出原本的READ MORE 的那幾行字.
最後放入..你所提供的語法..
現在我的BLOG功能很簡單,但是我很滿意喔~~謝謝你的提供
When: August 16, 2007 1:50 PM
To KeVin華:
嘻...太棒了，那現的問題就是沒問題囉^_^ Congratulation!
When: March 01, 2008 11:36 PM
第一次用這個的時候，可以的！
可是現在在弄別人的blog,怎么突然不行了？
可以幫我看看嗎？
它出現
【Your template is invalid because the tag 'div' appears inside of the tag 'head'.】
what's wrong?
When: March 02, 2008 3:25 AM
To Pay Fong Computer Society :
他的意思就是說你在
<head>.....</head> 這個tag裡頭，放了<div>這個東西，這是不允許發生的事。
When: March 07, 2008 2:20 PM
好不容易找到怎樣讓版面清爽點的語法教學，真是謝謝你^^
可是～我的還是不成功呢@@
可以教我哪邊有問題嗎
感謝~~
When: March 07, 2008 7:21 PM
To sc:
呃...我也不知如何幫你解決問題，我也看不到你的blog..XD
When: October 19, 2008 2:42 AM
hey,
我正在套用別人的版型讓我的blogspot更簡單一些..
可是這個版型好像沒辦法加入read more..
我試了好多方法,都沒用..
可以麻煩您幫我看看嗎?
謝謝你..
http://eternalppat.blogspot.com/
這是我測試用的...
P@t
When: October 19, 2008 10:56 AM
To P@t Mason:
我想這外掛功是Template-independent的，任意一個都要可以加成功才是，我剛開你的Blog的時候，有一些錯誤訊息...若你有用Firefox的話，建議你裝Firebug這個add-on，可以發現你的blog一些語法上的錯誤...(原因似乎是目前你正在修改你的blog...XD，我看到你的內容一直在變)..你可以試著在別的tempalte加看看，方法都一樣...
或許你可以試試這一個，I prefer this,目前我的blog就是用這一個 [Blog] Expandable posts with Peekaboo view (blogger beta)
When: October 20, 2008 12:24 PM
hey Kaie,
我成功了..按照你給我的,一步一步弄好了!
http://pat110.blogspot.com/
感謝你~~
P@t
When: October 21, 2008 12:29 AM
To P@t Mason:
Good Job..have fun Blog Hacking..^^
When: October 24, 2008 10:18 PM
您好,照您的教學作之後,總算是成功的讓我的blogger有繼續閱讀的功能了,不過有篇文章一直有問題 沒辦法隱藏我想隱藏的部分@@"
不知道能不能請您幫我看一下是哪邊出了問題
就是20世紀少年那篇@@
http://elvis1986a.blogspot.com/
我是設定要從
本來是既期待又怕受傷害
這句下面開始隱藏到文章尾的
可是就是只有中間消失一段而已@@
我是部落格新手
昨天才開始弄而已
以後可能還要請您多指教^^"
When: October 26, 2008 11:16 PM
To 不協和音:
我剛看了一下你提的那篇文章，似乎是成功了，一般來說會遇到你所提的那個問題，不外乎是html 語法出錯，可能少了相對應的</div> 之類的...
Btw, Nice layout ^_^
When: January 03, 2009 10:45 PM
你好我因為換了模板，找了很多繼續閱讀的方法都不適用，來這裡用你的方法(感覺最跟模板架構語法無關？)但是沒有成功。
插入tag以後，文章第一行會顯示//隱藏部份的文章（發表後也會出現）
但是沒有隱藏的動作。無論是修改舊文或市心發表文章都如此。
想請教一下不知道哪裡出了問題？
附上網誌，感謝！
http://mi-ne.blogspot.com
When: January 03, 2009 11:34 PM
To 峰:
我看你的blog文章，並沒有但何一篇，有用了這個<div id="fullpost"> 我是隱藏部分的文章 </div>這個tag將東西包起來，你必需有正確的引用這個tag在某篇文章裡，才會真正起作用!!
When: January 04, 2009 8:29 PM
目前我把首頁上的一篇舊文和一篇新文都用了tag，但是目前還看不到作用，再麻煩大大指教一下！謝謝！
When: January 04, 2009 8:41 PM
To 峰：
你底下這段code放錯地方了，造成這段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>
-------------------
我建議你將這段放到你template檔中的</head>這一行上方
When: January 04, 2009 9:04 PM
成功了！我終於可以好好的用新模板！感謝大大不厭其煩的指導，真的萬分感激！祝新年快樂！
When: January 04, 2009 9:27 PM
To 峰：
不客氣！Happy 牛 year!
When: June 28, 2009 1:27 AM
最近改blogger的template遇到一個奇怪的問題
在儲存HTML的時候他竟然會自動把引號(' ")換成代碼 (例: & quot ;)
想請問一下該如何解決?
When: June 28, 2009 3:40 PM
@Elims
這是正常的，layout出來應該也沒有錯吧!! Blogge在內部儲存某些特殊字元時，會作這樣子的轉換就是了!!
When: July 13, 2009 10:50 PM
TKC大不好意思我又來請教你了...
我的blog又換了模板
是從這裡來的
http://cjhtech.blogspot.com/2007/09/blogger-2x_30.html
我的想法是將繼續閱讀用來"縮文"的語法保留，而"read more"字樣連結拿掉，用模板內建的read on就好，但我不知道該怎麼做才好?
已經將你的語法放入，但似乎也沒有起作用，(這次應該沒放錯吧?)
周圍沒有會css的朋友，只好再來請教你了...謝謝
http://mi-ne.blogspot.com
When: July 13, 2009 10:58 PM
TKC大你好我又來了==
我又換了模板，這次的模板有內建(?)一個read on的功能可是並不會縮文，照著作者指示用的方法出來也不一樣，於是還是來用你的模板無差別方法，但我不知道如何只放入"縮文"的語法而不在文末放"read more"按鈕的方法。
且我目前語法全數放入似乎也沒有出現效果(難道我又放錯位置了?)
還望TKC大不吝指導一下...謝謝
我的網誌:http://mi-ne.blogspot.com/
我的模板是從這裡來的:
http://blog.monkeybiz.info/2008/09/hemingway-modified-template.html
Plz Post a Comment / 拜託你留個言啦...^^"