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] 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

33 Comments:

Who: Cyril Class:
When: November 12, 2006 10:51 PM  

感謝你的分享,
我一直很想要有這個功能。

By the way,
你的blog風格看起來好像WordPress喔,
是自己設計的,
還是哪裡有可以套用的templates?

Who: Tsung-Kai Chen Class:
When: November 12, 2006 11:58 PM  

^_^ 沒錯,是WordPress的風格!! 是我拿舊的Blogger template改成for beta版本的。

舊版的Blogger template在這裡可以下載唷.. http://www.geckoandfly.com/2006/04/27/kubrick/
By the way, ^_^ 這個站的作者有很多我覺得還不賴的template唷,只不過都是以前就設計的,通常Blogger Beta不適用就是了,自己抓個喜歡的,再Hack一下就ok囉...

Who: Tsung-Kai Chen Class:
When: November 13, 2006 12:05 AM  

To cyril:
忘了說,在這篇文章中就有收錄一些還不錯的Blogger Template Sites,參考看看吧.... [Blog] Blog Templates

Who: Cyril Class:
When: November 13, 2006 1:09 AM  

改成beta的版本會不會很麻煩?
我完全沒概念 XD

另外想請教一下,
如何在文中po語法,
我用quote的方法都失敗,
電腦會將它認定為語法,無法顯示。
不知要怎麼在文章中顯示語法,下方還有底色?

先謝謝了!

Who: Chia Class:
When: November 13, 2006 1:56 AM  

在Cyril那邊連結過來
謝謝你的教學。

Who: Tsung-Kai Chen Class:
When: November 13, 2006 2:35 AM  

To cyril:
沒碰過的話,一開始可能有點難上手(我也是過來人...XD)...但試著去多看些html語法和css語法的教學,之後應該就能夠得心應手囉!!至於quote語法的問題,請參考PTT Blog篇討論串"3392 篇 □ [問題] 如何在Blog上 貼上程式碼",裡頭就講得蠻詳細的了!!

To chia: 謝謝你的支持呀 ^_^

Who: Cyril Class:
When: November 13, 2006 1:37 PM  

我正慢慢學習語法中~

我去看了3392和3394篇,
按照3394的語法,
將....換成我要貼的語法,
切換到Compose狀態後,
在我要貼的語法之外,都會顯示出
if (a)
{
}

而且,有<pre></pre>的話,
語法不會自動斷行,而是一直向右邊延伸,
必須向右拉捲軸才看得到;
若是把<pre></pre>去掉,只加<code></code>的話,
語法會自動斷行,但是是整個顯示出來,沒有捲軸。

不知道要怎麼做出向下拉的捲軸?
謝謝!

P.S. 爲了顯示語法,我在這裡用全形的<>,
在編輯時我是用半形的

Who: Tsung-Kai Chen Class:
When: November 13, 2006 3:21 PM  

To Cyril:
那個 if(a) {...} 是他舉的範例,不用理那部份,要把這整個部份取代掉!! 還有你說的切到Compose狀態,會導致你所貼上去的code都看不到的情況,就是因為你貼的是純html語法,所以在Compose的狀態會看不到。
※注意3394篇這句:
「「當然, 程式裏面的內容若有 HTML 的特殊符號, 要先轉掉...」,例如 < 要轉成 &lt;」,所以舉例來說,你在Edit Html時一定是貼上 "<table>",而非正確的"&lt;table&gt;"格式,所以在Compose時,就被Browser解讀成一般tag了,就不會顯示出來了 ^^

至於要如何,將你想要貼的程式碼整段轉成"正確格式"呢? 我想你應該是用Firefox吧,那你選取一段我Blog中的code,然後點右鍵->「View Selection Source」這樣就可以看清楚,這段code的真面目囉 XD...所以那些被Highlight的字就是,真正你要貼到Edit html時的code。

要作出下拉的捲軸的話,在css style裡頭加上「max-height:300px;」就行囉,只要超過300px,在Firefox中就會自動產生捲軸囉...但在IE裡的話,就..囧rz..

Who: Cyril Class:
When: November 13, 2006 10:47 PM  

謝謝你詳細的教學,
終於用成功了!

Who: Tsung-Kai Chen Class:
When: November 15, 2006 3:38 AM  

To Cyril:
Congratulation! ^_^

Who: 弄不出來 Class:
When: November 15, 2006 10:11 PM  

你好
我使用的是blogger beta
我照著你的教學貼了
可是沒用耶
這跟內定的模組設計有沒有關係阿?
我是用內建的第一個黑色模組
還有阿
第一部要貼"head"那一部份
是貼在"head"的後面就可以了吧?
請多多指教了
剛接觸blogger beta是個新手^^""

Who: Tsung-Kai Chen Class:
When: November 15, 2006 10:57 PM  

To 弄不出來:
應該都沒差,任意template都可以的!!
step1:貼在 </head>的上一行即可!
step2:尋找灰色的字,灰色的字不要動,貼上相對應的紅色字即可!

Good Luck!!

Who: NickEast Class:
When: November 16, 2006 6:00 PM  

你提供的參考文獻寫到:

Step 1: Find the < /head >

tag in your template and add this line before it.

所以應該是在< /head >前一行,不知道與你文章中的< head >裡有沒有差別?

Who: Tsung-Kai Chen Class:
When: November 16, 2006 6:11 PM  

To nickeast:
我想依Html語法的規則,放在<head>...</head>裡頭,也是ok的,並不會違背原作者的本意!!只要符合規則就ok囉..^^

Who: Ting, Wen-Chun Class:
When: November 17, 2006 12:38 AM  

Comment testing

profile photo with comments cool

&lt; = < , &gt = >

Who: 噶瑪達瓦敦珠 Class:
When: January 22, 2007 9:02 PM  

我也成功了!!

謝謝你這樣的用心指導教學
所以我們這般的語法門外漢
才有機會得到幫助

祝軍旅充實愉快!!

Who: Rack Lin Class:
When: January 25, 2007 11:37 AM  

小弟亦實作了一些您介紹 Blogger 擴充功能,且它是 all-in-one 如下:

* 可以隱藏 Blogger NavBar。
* 可以使用 Blogger Smiley 介紹的表情符號功能。
* 可以使用 繼續閱讀功能 。
* 繼續閱讀功能支援 Markup 語法。
* 針對新版 Blogger 不需修改任何 CSS 及 Html Template。
* 所有功能支援設定選項來控制是否開啟。
* Sidebar中的網頁元素 可以先動 "折收/展開" 功能。 (0.3b)

所有都不需要改到 CSS 和網頁 Template, 對新手相當容易上手哦。

http://racklin.blogspot.com/2007/01/blogger-jquery-way.html

Who: Tsung-Kai Chen Class:
When: February 09, 2007 3:00 PM  

To Rack Lin:
阿土伯..Good Job,真是個好東西呀...你該早點弄出來的,我就可以多省些時間睡覺啦..哈哈!!

Who: doggylife Class:
When: May 31, 2007 2:50 AM  

有點奇怪
照著把程式碼放上去

但是
還是沒有反應
就像之前用懶人包
唯獨繼續閱讀這個功能也無法作用....

可以麻煩您幫我看看嗎
謝謝...:P

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

To Doggylife:
你的Blog有權限的限制,我看不到說...你該不會不小心將Browser支援Javascript的功能關掉了呀...

Who: 羅傑 Class:
When: July 13, 2007 10:22 AM  

Chen sir,
我的那很奇怪,Post上去後都沒有作用,IE還出現會有錯誤,可以請您幫我看一下嗎? http://rogerchiang.blogspot.com
, Thank you.

Who: Tsung-Kai Chen Class:
When: July 14, 2007 3:03 AM  

To 羅傑:
不好意思,已更新..請見這篇文章,上面的step1. 就可以解決你的問題了..^^

Who: iljyejehs Class:
When: July 14, 2007 5:36 AM  

好厲害
已經可以用了!!
真的是太感謝了啦!! ^_^

Who: Tsung-Kai Chen Class:
When: July 14, 2007 12:48 PM  

To iljyejehs:
不用客氣...舉手之勞而已,因為我的blog也順便更新了..^^

Who: 羅傑 Class:
When: July 14, 2007 10:13 PM  

Dear Kaie..
感謝您的協助,已經又恢復正常嚕。

Who: Image Adiemus Class:
When: July 15, 2007 11:42 AM  

我的也是終於恢復正常了, 謝謝您喔, 真是好人(指)!~

Who: Tsung-Kai Chen Class:
When: July 15, 2007 11:31 PM  

To 羅傑:
Dear Roger...加油,看來blog剛開幕而已…好好經營呀!

To Image Adiemus:
嗚嗚…我的好人卡已經好幾箱了,別再發給我了..

Who: Robin Hood Class:
When: October 08, 2007 8:47 PM  

(Brasil)
Sei que você não irá me compreender mas muito bom o post já utilizei no meu blog http://guuglu.blospot.com
Meus parabéns!...
Muito Obrigado!... (Thanks!...)

Who: jeremy Class:
When: June 21, 2008 6:02 PM  

我是用Neokubrick template.
跟你的step2有點不同

應該要在那裡加入?謝謝

Who: joshpao Class:
When: July 17, 2008 4:10 PM  

感謝你提供的詳細教學,
我已經弄成功囉!
不過現在有另外個問題想請教一下,
我是使用http://btemplates.com/的Fieldof Dreams當作樣板,
但是張貼文章的小元件都沒辦法顯示耶!
不曉得該怎麼重新編輯已經發佈的文章。

請問你曉得如何解決嗎?感謝你!

Who: Tsung-Kai Chen Class:
When: July 20, 2008 11:59 PM  

To joshpao:
重新編輯發佈文章的方式,只要登入http://www.blogger.com之後,進到第一個選項文章再選編輯即有你想要的功能!

Who: JORGE Class:
When: June 29, 2009 6:27 PM  

excelente

Who: Mixloop Family Class:
When: February 17, 2011 4:18 AM  

這真的很棒!!
但我遇上了幾個問題

本篇語法我都貼上了
網頁也順利跑出來
但卻沒看到效果
我的意思是有加語法跟沒有加是一樣的
怎麼會這樣啊??

我之前有用另一篇

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

是有成功!! 但是影片部分卻無法收合起來
而且收合動態是死板的
不能像大大網站那樣點一下! 會有flash的視覺效果....往下拉開!! 然後再點一下就往上收合
而且我點收合後畫面會自動跳到文章的標題處!

這是什麼原因呢?? 麻煩救救我了!我用好幾個晚上摸不出頭緒 ><