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 < 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 < 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 < 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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (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:
When: November 12, 2006 10:51 PM
感謝你的分享，
我一直很想要有這個功能。
By the way，
你的blog風格看起來好像WordPress喔，
是自己設計的，
還是哪裡有可以套用的templates？
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囉...
When: November 13, 2006 12:05 AM
To cyril:
忘了說，在這篇文章中就有收錄一些還不錯的Blogger Template Sites，參考看看吧.... [Blog] Blog Templates
When: November 13, 2006 1:09 AM
改成beta的版本會不會很麻煩？
我完全沒概念 XD
另外想請教一下，
如何在文中po語法，
我用quote的方法都失敗，
電腦會將它認定為語法，無法顯示。
不知要怎麼在文章中顯示語法，下方還有底色？
先謝謝了！
When: November 13, 2006 1:56 AM
在Cyril那邊連結過來
謝謝你的教學。
When: November 13, 2006 2:35 AM
To cyril:
沒碰過的話，一開始可能有點難上手(我也是過來人...XD)...但試著去多看些html語法和css語法的教學，之後應該就能夠得心應手囉!!至於quote語法的問題，請參考PTT Blog篇討論串"3392 篇 □ [問題] 如何在Blog上 貼上程式碼"，裡頭就講得蠻詳細的了!!
To chia: 謝謝你的支持呀 ^_^
When: November 13, 2006 1:37 PM
我正慢慢學習語法中～
我去看了3392和3394篇，
按照3394的語法，
將....換成我要貼的語法，
切換到Compose狀態後，
在我要貼的語法之外，都會顯示出
if (a)
{
}
而且，有＜pre＞＜/pre＞的話，
語法不會自動斷行，而是一直向右邊延伸，
必須向右拉捲軸才看得到；
若是把＜pre＞＜/pre＞去掉，只加＜code＞＜/code＞的話，
語法會自動斷行，但是是整個顯示出來，沒有捲軸。
不知道要怎麼做出向下拉的捲軸？
謝謝！
P.S. 爲了顯示語法，我在這裡用全形的＜＞，
在編輯時我是用半形的
When: November 13, 2006 3:21 PM
To Cyril:
那個 if(a) {...} 是他舉的範例，不用理那部份，要把這整個部份取代掉!! 還有你說的切到Compose狀態，會導致你所貼上去的code都看不到的情況，就是因為你貼的是純html語法，所以在Compose的狀態會看不到。
※注意3394篇這句：
「「當然, 程式裏面的內容若有 HTML 的特殊符號, 要先轉掉...」，例如 < 要轉成 ＆ｌｔ；」，所以舉例來說，你在Edit Html時一定是貼上 "＜table＞"，而非正確的"＆ｌｔ；table＆ｇｔ；"格式，所以在Compose時，就被Browser解讀成一般tag了，就不會顯示出來了 ^^
至於要如何，將你想要貼的程式碼整段轉成"正確格式"呢? 我想你應該是用Firefox吧，那你選取一段我Blog中的code，然後點右鍵->「View Selection Source」這樣就可以看清楚，這段code的真面目囉 XD...所以那些被Highlight的字就是，真正你要貼到Edit html時的code。
要作出下拉的捲軸的話，在css style裡頭加上「max-height:300px;」就行囉，只要超過300px，在Firefox中就會自動產生捲軸囉...但在IE裡的話，就..囧rz..
When: November 13, 2006 10:47 PM
謝謝你詳細的教學，
終於用成功了！
When: November 15, 2006 3:38 AM
To Cyril:
Congratulation! ^_^
When: November 15, 2006 10:11 PM
你好
我使用的是blogger beta
我照著你的教學貼了
可是沒用耶
這跟內定的模組設計有沒有關係阿？
我是用內建的第一個黑色模組
還有阿
第一部要貼"head"那一部份
是貼在"head"的後面就可以了吧？
請多多指教了
剛接觸blogger beta是個新手^^""
When: November 15, 2006 10:57 PM
To 弄不出來:
應該都沒差，任意template都可以的!!
step1:貼在 </head>的上一行即可!
step2:尋找灰色的字，灰色的字不要動，貼上相對應的紅色字即可!
Good Luck!!
When: November 16, 2006 6:00 PM
你提供的參考文獻寫到：
Step 1: Find the < /head >
tag in your template and add this line before it.
所以應該是在< /head >前一行，不知道與你文章中的< head >裡有沒有差別?
When: November 16, 2006 6:11 PM
To nickeast:
我想依Html語法的規則，放在<head>...</head>裡頭，也是ok的，並不會違背原作者的本意!!只要符合規則就ok囉..^^
When: November 17, 2006 12:38 AM
Comment testing
profile photo with comments cool
< = < , > = >
When: January 22, 2007 9:02 PM
我也成功了!!
謝謝你這樣的用心指導教學
所以我們這般的語法門外漢
才有機會得到幫助
祝軍旅充實愉快!!
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
When: February 09, 2007 3:00 PM
To Rack Lin:
阿土伯..Good Job，真是個好東西呀...你該早點弄出來的，我就可以多省些時間睡覺啦..哈哈!!
When: May 31, 2007 2:50 AM
有點奇怪
照著把程式碼放上去
但是
還是沒有反應
就像之前用懶人包
唯獨繼續閱讀這個功能也無法作用....
可以麻煩您幫我看看嗎
謝謝...:P
When: June 01, 2007 8:00 AM
To Doggylife:
你的Blog有權限的限制，我看不到說...你該不會不小心將Browser支援Javascript的功能關掉了呀...
When: July 13, 2007 10:22 AM
Chen sir,
我的那很奇怪，Post上去後都沒有作用，IE還出現會有錯誤，可以請您幫我看一下嗎? http://rogerchiang.blogspot.com
, Thank you.
When: July 14, 2007 3:03 AM
To 羅傑:
不好意思，已更新..請見這篇文章，上面的step1. 就可以解決你的問題了..^^
When: July 14, 2007 5:36 AM
好厲害
已經可以用了!!
真的是太感謝了啦!! ^_^
When: July 14, 2007 12:48 PM
To iljyejehs:
不用客氣...舉手之勞而已，因為我的blog也順便更新了..^^
When: July 14, 2007 10:13 PM
Dear Kaie..
感謝您的協助，已經又恢復正常嚕。
When: July 15, 2007 11:42 AM
我的也是終於恢復正常了, 謝謝您喔, 真是好人(指)!~
When: July 15, 2007 11:31 PM
To 羅傑：
Dear Roger...加油，看來blog剛開幕而已…好好經營呀!
To Image Adiemus:
嗚嗚…我的好人卡已經好幾箱了，別再發給我了..
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!...)
When: June 21, 2008 6:02 PM
我是用Neokubrick template.
跟你的step2有點不同
應該要在那裡加入?謝謝
When: July 17, 2008 4:10 PM
感謝你提供的詳細教學，
我已經弄成功囉！
不過現在有另外個問題想請教一下，
我是使用http://btemplates.com/的Fieldof Dreams當作樣板，
但是張貼文章的小元件都沒辦法顯示耶！
不曉得該怎麼重新編輯已經發佈的文章。
請問你曉得如何解決嗎？感謝你！
When: July 20, 2008 11:59 PM
To joshpao:
重新編輯發佈文章的方式，只要登入http://www.blogger.com之後，進到第一個選項文章再選編輯即有你想要的功能!
When: June 29, 2009 6:27 PM
excelente
When: February 17, 2011 4:18 AM
這真的很棒!!
但我遇上了幾個問題
本篇語法我都貼上了
網頁也順利跑出來
但卻沒看到效果
我的意思是有加語法跟沒有加是一樣的
怎麼會這樣啊??
我之前有用另一篇
[Blog] Expandable posts with Peekaboo view (blogger beta)
是有成功!! 但是影片部分卻無法收合起來
而且收合動態是死板的
不能像大大網站那樣點一下! 會有flash的視覺效果....往下拉開!! 然後再點一下就往上收合
而且我點收合後畫面會自動跳到文章的標題處!
這是什麼原因呢?? 麻煩救救我了!我用好幾個晚上摸不出頭緒 ><
Plz Post a Comment / 拜託你留個言啦...^^"