Blogger最新回應的功能

一直在版面配置中尋找這個"最新回應"功能的套件, 沒有想到都找不到
後來轉念一想, 去網路找找吧, 才發現, 又是一個自建功能的語法

找了幾個網站之後,發現只要在新增blogger裡頭的元素"資訊提供",將RSS或Atom資訊提供的內容加入網誌就可以, 網址則是填"http://xxx.blogspot.com/feeds/comments/full"就可以產生這個功能，但這有個問題，它會將回應的全文寫入，若是回應太長，則很容易破壞版面的配置，況且也沒有時間與作者列示，還有若是回應中若有換行的話，它也會跟著換行。最後決定使用堯＠部落格中的方法, 它提供了程式產生器使用, 只要打入幾個資料, 就可以產生自己所要的程式碼, 相關後續的討論其實也不少...
程式碼產生後，再做一下局部的修改，就是我自己要的部份了。
目前本站的"最新回應"使用程式碼摘錄如下：

<div id="newcommentsnestzone">
<h2>Loading...</h2>
</div>

<script>
function compareentry(a,b){
order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/,
'$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/,
'$1/$2/$3 $4 GMT'));
return 0-order;

}
function handleCommentsnestzone(json) {

var temp = '<h2>最近的回應</h2><ul id="Feed001_feedItemListDisplay">';
var postshow=5;
var sortentry=json.feed.entry.sort(compareentry);
for (var i=0, post; post = sortentry[i]; i++) {
if(i>=postshow) break;
var title=post.content.$t.substr(0,12);
var link=post.link[2].href.replace("#c","#comment-");
var authorname=post.author[0].name.$t;
var timestamp=post.published.$t.substr(0,10);
temp += '<li><span class="item-title"><a href="'+link+'">'+ title +'...</a>-'+timestamp+'-'+authorname+'</span></li>';
}
temp+="</ul>";
document.getElementById("newcommentsnestzone").innerHTML = temp;
}
</script>

<script src="http://nestzone.blogspot.com/feeds/comments/default?alt=json-in-script&callback=handleCommentsnestzone" type="text/javascript"></script>

相關做法，可以參閱堯＠部落格
同時也幫我家老大的網誌加了這個功能...呵呵:)

Read More(閱讀全文)...

Summary only(預覽模式)...

上傳影片測試

老婆大人提出"為什麼影片不可以上傳來看"...關於這個問題嘛, 唉, 只好親自下海試試了

影片上傳測試 , 本來使用一個很大的檔,有44M,花太多時間等上傳了, 氣死人, 改換一個小一點的
上傳,還是花很多時間 ...

至於影片連結, 那就算了, 都可以上傳了, 連結應該也不成問題了...更何況, 提供影片直接連結的地方實在不多...懶得再找了...呵呵, 老婆, 別打我....

對了, 若是要使用大容量的影片, 除了要有耐心外, 另外, 必須注意自己儲存空間的容量, 否則, 動不動就塞爆空間, 那就好笑了...

Read More(閱讀全文)...

Summary only(預覽模式)...

Blogger 首頁文章折疊(繼續閱讀)功能

兩三年前,就將BLOGGER裡在文章中新增 "Read More" 的功能。
但是最近重新再上來時, 卻發現這個功能無效了, 就由原來設定的地方, 重新再去看看到底怎麼回事, 後來發現原來提供JS的網站掛了, 程式片段中的FUNCTION也就跟著無效了...只好重新又開始搜尋更改方式.
網路搜尋的結果，發現大致上可以分成兩種：一種就是用 CJH 的懶人包：[BLOGGER]繼續閱讀懶人加強版；另外一種則是需要手動設定「每篇」文章.

手動設定的方式又找到兩種，分別是 angelo 提供的「讓首頁文章可開啟/摺疊 for Blogger」和 Chagg 提供的「Blogger Beta 繼續閱讀功能改良」。沒有試過 Chagg 大大的方式，以下介紹的是之前舊的方法,只是新增了JS的原始CODE.

步驟一：
由於這是個大幅度的修改，請記得先備份你的範本。

　　版面配置 > 修改 HTML > 下載完整範本

步驟二：
在修改範本裡找到 </head> 把以下橘色代碼加到前面。
<script type="text/javascript">
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>
以上這一段,也就是我所遺失的那一段JS程式段.重新再放上來, 就可以使用這個功能了.

步驟三：
找到以下程式碼

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

將紅色那行改成下面的程式碼

<div class='post hentry' expr:id='"post-" + data:post.id'>

步驟四：
找到以下程式碼

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

把紫色那段整段改成

<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-"
+ data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-"
+ data:post.id + "\");"'>Summary only...</a></p>
</span>

<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

其中綠色的部分可以自己改成自己想要的文字

如果不想要看到 Summary Ony... ，可以直接把 Summary Only 的這段(下面這段)刪掉

<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-"
+ data:post.id + "\");"'>Summary only...</a></p>
</span>

如果希望按下 Read More... 之後，可以跳出只有單篇文章的頁面，那就把藍色那段改成下面這樣

<a expr:href='data:post.url'>

如果上面兩個都想要(既不想用 Summary Only，又想另外跳出單篇文章頁面)，那就把第四步開頭找到的紫色程式碼改成下面這段就好了

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:href='data:post.url'>Read More...</a></p>
</span>

<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

同樣，綠色的部分可以自己更改。

Read More(閱讀全文)...

Summary only(預覽模式)...