Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Sunday, November 12, 2006

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

很簡單,只要利用Blogger提供的功能,先登入之後,到「Settings->Formatting」,將<div id="fullpost"> //隱藏部分的文章 </div>填入Formatting那邊即可,如此一來,每次編輯新文章時,即會自動填入所需的程式碼囉 ^_^ oh ya!!

49 Comments:

Who: 日落 Class:
When: February 15, 2007 2:36 PM  

在你的 Blog 中找到許多好用的 hacks,我的部落格終於像樣了一點。

小弟的興趣是程式設計,最近剛踏入美工排版的領域,請多指教!

感謝

Who: Tsung-Kai Chen Class:
When: February 17, 2007 2:47 AM  

To 日落:
呵呵…不用客氣,有空多來逛逛…
看來遇到志同道合之人囉 ^^ 歡迎多多指教...

Who: emmy Class:
When: March 29, 2007 12:51 PM  

很不错的功能,不过只适合beta版,请教一下有没时候旧版的类似hack

Who: Tsung-Kai Chen Class:
When: March 29, 2007 1:45 PM  

To emmy:
記得也有喔,不過我倒是忘了在哪邊有看過... :x

Who: 新手上路 Class:
When: April 22, 2007 7:52 AM  

之前試過其他地方寫的方法 一直都沒試成功
照你講的 卻一次就成功了
真的很好用 謝謝

Who: DAsnI Class:
When: June 14, 2007 7:31 AM  

想請問一下
為甚麼我發表文章後只有標題和read more@@~

Who: Tsung-Kai Chen Class:
When: June 14, 2007 8:14 AM  

To DAsnl:
咦,我猜應該是你沒有包好..也就是底下這部份
<div id="fullpost"> //隱藏部分的文章 </div>
你沒有處理好..造成內容不見了..

Who: DAsnI Class:
When: June 14, 2007 2:12 PM  

哈...耍笨了@@
你的blog很讚!多逛有益健康!!

Who: Tsung-Kai Chen Class:
When: June 14, 2007 2:50 PM  

To DAsnI:
哈哈...正常的啦!!我也常降子..多搞次次就清楚了..哈!!

Who: SuperMeko Class:
When: June 27, 2007 5:03 PM  

呃..我有個新手蠢問題..前幾天剛開始用..
怎樣才能跟你一樣."文章回覆"是有色塊直接出現在主頁滴...給你我滴版http://baseboom.blogspot.com/

我不是設計也不是程式..所以很笨...
如果你有耐心的話..
請教我怎麼改主頁的文章唄..我會用力速學滴!!
10分感謝..!!
Meko

Who: Tsung-Kai Chen Class:
When: June 27, 2007 7:50 PM  

To SuperMeko:
我猜你指的就是我主頁上的 Recent Comments對吧...是的話,請參考這篇 Blogger最新回應程式產生器(426更新版)

Who: SuperMeko Class:
When: June 27, 2007 9:48 PM  

是滴...大感謝!!!!!
謝謝你囉!!!
:p

Who: lsaz Class:
When: June 29, 2007 3:49 PM  

man, i need to learn chinesse
or u should write this in english
.
.
.
.
.
Joke!

Who: Tsung-Kai Chen Class:
When: June 29, 2007 4:21 PM  

To Isaz:
Hey man... It seems that u have succeed..

Who: 虛心請教 Class:
When: July 08, 2007 11:31 PM  

無法顯示READ MORE...

Who: Tsung-Kai Chen Class:
When: July 09, 2007 8:27 AM  

To 虛心請教:
這個...XD
依據經驗法則,應該是<div id="fullpost"> //隱藏部分的文章 </div>這個地方你沒弄好..

Who: Cellocoffee Class:
When: July 10, 2007 4:03 AM  

不好意思又來麻煩,我試了這個read more 可是沒出現,可否幫我看一下?
http://cellocafe.blogspot.com
的網址
多謝!

Who: Tsung-Kai Chen Class:
When: July 10, 2007 7:53 PM  

To Cellocoffee:
我看了一下你的blog,你似乎沒有加入這些code
<script type="text/Javascript">
function hidePost(postUrl)
.
.
.
</script>
上述的每個動作都是少不得的唷...要按部就班來,很簡單的,沒幾個步驟..^_^
加油...BTW 你女兒也太可愛了吧..

Who: Cellocoffee Class:
When: July 11, 2007 5:18 AM  

成了!多謝
最後請問一下你的寫法跟堯@的寫法有什麼不同
抱歉我是愛問的白痴呆瓜
http://jinyaolin.blogspot.com/2006/09/beta-blogger2.html
謝謝解答!

Who: Tsung-Kai Chen Class:
When: July 11, 2007 5:44 PM  

To Cellocoffee:
差別在於...跟他文章上頭所描述的差不多意思..呵!!我想你應該是看不懂才問的,意思就是說,他的那個方法
※優點:可以不用加 <div id="fullpost"> //隱藏部分的文章 </div> 這個東西,就可以隱藏文章!
※缺點:因為他是設定每篇文章都是顯示固定高度,所以當文章太短時,不足的地方即會顯示一大片大白...比較不彈性
大概就是差在這...

Who: Cellocoffee Class:
When: July 12, 2007 8:36 AM  

哇,謝謝,真的懂了!!多謝!真的!

Who: 月照草 Class:
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靠右對齊的方法?

麻煩了……=_=

Who: Tsung-Kai Chen Class:
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>

Who: 月照草 Class:
When: July 19, 2007 2:07 PM  

嗯,改到了!謝謝^^

話說用IE的話按較舊文章都沒問題,
但FIRE FOX即使掛IE TAB都會令較舊文章失效,
所以IE TAB的顯示還是會和正版IE有異呢……=_=

Who: Tsung-Kai Chen Class:
When: July 19, 2007 2:59 PM  

To 月照草:
這麼低神奇呀...囧

Who: KeVin華 Class:
When: August 16, 2007 11:29 AM  

大,你好~我又來了!
昨天透過你分享的加密文章後,今天又來你這挖寶。
現在我碰到的問題是~~

1. 我應該把寫出來的文章放在哪個部份,才會顯示出部份文章?按照您的回答16,下去操作,卻不知道應該把文章放在//之前還是之後?

2. 之前有在其他blog安裝了一些懶人外掛,因為我都不懂裡面的意思,現在想移除原本read more的那項功能改成你的,我因該一出哪些段落呢?

3.在我的blog裡有一些小型的方塊圖形,我可以把他們移除嗎?

抱歉問了一堆很笨的問題!
我的blog http://lecoeurkevin.blogspot.com

Who: KeVin華 Class:
When: August 16, 2007 12:10 PM  

對不起我又來了~~
我直接把原本話掛的功能全部移除,再去移除出原本的READ MORE 的那幾行字.
最後放入..你所提供的語法..
現在我的BLOG功能很簡單,但是我很滿意喔~~謝謝你的提供

Who: Tsung-Kai Chen Class:
When: August 16, 2007 1:50 PM  

To KeVin華:
嘻...太棒了,那現的問題就是沒問題囉^_^ Congratulation!

Who: Pay Fong Computer Society Class:
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?

Who: Tsung-Kai Chen Class:
When: March 02, 2008 3:25 AM  

To Pay Fong Computer Society :
他的意思就是說你在
<head>.....</head> 這個tag裡頭,放了<div>這個東西,這是不允許發生的事。

Who: sc Class:
When: March 07, 2008 2:20 PM  

好不容易找到怎樣讓版面清爽點的語法教學,真是謝謝你^^

可是~我的還是不成功呢@@

可以教我哪邊有問題嗎

感謝~~

Who: Tsung-Kai Chen Class:
When: March 07, 2008 7:21 PM  

To sc:
呃...我也不知如何幫你解決問題,我也看不到你的blog..XD

Who: P@t Mason Class:
When: October 19, 2008 2:42 AM  

hey,
我正在套用別人的版型讓我的blogspot更簡單一些..
可是這個版型好像沒辦法加入read more..
我試了好多方法,都沒用..

可以麻煩您幫我看看嗎?
謝謝你..
http://eternalppat.blogspot.com/
這是我測試用的...

P@t

Who: Tsung-Kai Chen Class:
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)

Who: P@t Mason Class:
When: October 20, 2008 12:24 PM  

hey Kaie,

我成功了..按照你給我的,一步一步弄好了!

http://pat110.blogspot.com/

感謝你~~

P@t

Who: Tsung-Kai Chen Class:
When: October 21, 2008 12:29 AM  

To P@t Mason:
Good Job..have fun Blog Hacking..^^

Who: 不協和音 Class:
When: October 24, 2008 10:18 PM  

您好,照您的教學作之後,總算是成功的讓我的blogger有繼續閱讀的功能了,不過有篇文章一直有問題 沒辦法隱藏我想隱藏的部分@@"
不知道能不能請您幫我看一下是哪邊出了問題
就是20世紀少年那篇@@
http://elvis1986a.blogspot.com/
我是設定要從
本來是既期待又怕受傷害
這句下面開始隱藏到文章尾的
可是就是只有中間消失一段而已@@

我是部落格新手
昨天才開始弄而已
以後可能還要請您多指教^^"

Who: Tsung-Kai Chen Class:
When: October 26, 2008 11:16 PM  

To 不協和音:
我剛看了一下你提的那篇文章,似乎是成功了,一般來說會遇到你所提的那個問題,不外乎是html 語法出錯,可能少了相對應的</div> 之類的...
Btw, Nice layout ^_^

Who: photo album software Class:
When: December 05, 2008 2:33 AM  

black mold exposureblack mold symptoms of exposurewrought iron garden gatesiron garden gates find them herefine thin hair hairstylessearch hair styles for fine thin hairnight vision binocularsbuy night vision binocularslipitor reactionslipitor allergic reactionsluxury beach resort in the philippines

afordable beach resorts in the philippineshomeopathy for eczema.baby eczema.save big with great mineral makeup bargainsmineral makeup wholesalersprodam iphone Apple prodam iphone prahacect iphone manualmanual for P 168 iphonefero 52 binocularsnight vision Fero 52 binocularsThe best night vision binoculars here

night vision binoculars bargainsfree photo albums computer programsfree software to make photo albumsfree tax formsprintable tax forms for free craftmatic air bedcraftmatic air bed adjustable info hereboyd air bedboyd night air bed lowest pricefind air beds in wisconsinbest air beds in wisconsincloud air beds

best cloud inflatable air bedssealy air beds portableportables air bedsrv luggage racksaluminum made rv luggage racksair bed raisedbest form raised air bedsaircraft support equipmentsbest support equipments for aircraftsbed air informercialsbest informercials bed airmattress sized air beds

bestair bed mattress antique doorknobsantique doorknob identification tipsdvd player troubleshootingtroubleshooting with the dvd playerflat panel television lcd vs plasmaflat panel lcd television versus plasma pic the bestThe causes of economic recessionwhat are the causes of economic recessionadjustable bed air foam The best bed air foam

hoof prints antique equestrian printsantique hoof prints equestrian printsBuy air bedadjustablebuy the best adjustable air bedsair beds canadian storesCanadian stores for air beds

migraine causemigraine treatments floridaflorida headache clinicdrying dessicantair drying dessicantdessicant air dryerpediatric asthmaasthma specialistasthma children specialistcarpet cleaning dallas txcarpet cleaners dallascarpet cleaning dallas

vero beach vacationvero beach vacationsbeach vacation homes veroms beach vacationsms beach vacationms beach condosmaui beach vacationmaui beach vacationsmaui beach clubbeach vacationsyour beach vacationscheap beach vacations

bob hairstylebob haircutsbob layeredpob hairstylebobbedclassic bobCare for Curly HairTips for Curly Haircurly hair12r 22.5 best pricetires truck bustires 12r 22.5

washington new housenew house houstonnew house san antonionew house venturanew houston house houston house txstains removal dyestains removal clothesstains removalteeth whiteningteeth whiteningbright teeth

jennifer grey nosejennifer nose jobscalebrities nose jobsWomen with Big NosesWomen hairstylesBig Nose Women, hairstyles

Who: Class:
When: January 03, 2009 10:45 PM  

你好我因為換了模板,找了很多繼續閱讀的方法都不適用,來這裡用你的方法(感覺最跟模板架構語法無關?)但是沒有成功。
插入tag以後,文章第一行會顯示//隱藏部份的文章(發表後也會出現)
但是沒有隱藏的動作。無論是修改舊文或市心發表文章都如此。
想請教一下不知道哪裡出了問題?
附上網誌,感謝!
http://mi-ne.blogspot.com

Who: Tsung-Kai Chen Class:
When: January 03, 2009 11:34 PM  

To 峰:
我看你的blog文章,並沒有但何一篇,有用了這個<div id="fullpost"> 我是隱藏部分的文章 </div>這個tag將東西包起來,你必需有正確的引用這個tag在某篇文章裡,才會真正起作用!!

Who: Class:
When: January 04, 2009 8:29 PM  

目前我把首頁上的一篇舊文和一篇新文都用了tag,但是目前還看不到作用,再麻煩大大指教一下!謝謝!

Who: Tsung-Kai Chen Class:
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>這一行上方

Who: Class:
When: January 04, 2009 9:04 PM  

成功了!我終於可以好好的用新模板!感謝大大不厭其煩的指導,真的萬分感激!祝新年快樂!

Who: Tsung-Kai Chen Class:
When: January 04, 2009 9:27 PM  

To 峰:
不客氣!Happy 牛 year!

Who: Elims Class:
When: June 28, 2009 1:27 AM  

最近改blogger的template遇到一個奇怪的問題
在儲存HTML的時候他竟然會自動把引號(' ")換成代碼 (例: & quot ;)
想請問一下該如何解決?

Who: Tsung-Kai Chen Class:
When: June 28, 2009 3:40 PM  

@Elims
這是正常的,layout出來應該也沒有錯吧!! Blogge在內部儲存某些特殊字元時,會作這樣子的轉換就是了!!

Who: Class:
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

Who: Class:
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