分享 : 自動為網誌產生read more版面的方法

blogger 有一個不太好的地方, 是必需在撰寫每篇文章時, 手動加入"read more"線, 一來令版面十分不整齊, 因為文章的照片有橫有直, 又大又小.
二來當我匯入y!blog後, 有超過1000篇舊文, 如果全手動每篇加入"read more"線, 真的會發癲啊! 

-----------------------------

[後記 2015-11: ◆汀の悪魔天使な人生◆ 的方法後來不知怎的失效了, 後來找到另一個網頁, 放法差不多, 

http://helplogger.blogspot.hk/2012/03/auto-read-more-with-thumbnail-for.html

Step 1. 登入你的blogger, click "設計”......

    click "範本”，　click"編輯HTML” ....... 再按照上面網址的步驟做 ......

 參考下列網頁(一切html碼以此網頁為準)


http://helplogger.blogspot.hk/2012/03/auto-read-more-with-thumbnail-for.html
 

<data:post.body/>

 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot; );</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

</head>

 

<script type='text/javascript'>

posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

 


------------------------------

 [Old post 舊文]

幸好blog友Christina ◆汀の悪魔天使な人生◆ 拔刀相助, 教我一個很好的方法 ......

http://christinaryu.blogspot.hk/2013/10/blogger-read-more.html

看! 多整齊, 一目了然!!

幸好我這html language 盲都算做到了. 但代價也很大 ......

起初我開了一個dummy blog測試(blogger最可愛的地方是可以任意開blog), 一切順利 , 那知在正式blog進行時, 卻死也不出任何反應 ...... 唉, 可能我以前膽粗粗改過html和CCS程式, 不知什麼地方相撞啦 ......

沒法可想, 只好再開一個全新的blog, 把舊blog 匯入去, 借屍還魂, 總算成功, 可惜所有舊式"追蹤者"的紀錄全失了, 總瀏覽量也由0開始 ........

算吧, 實在太愛這整潔的版面了!!! 再次謝謝 Christina.
搬blog過程的煩惱和滿足, 也可說是惡魔天使人生的兩面 :p

[後記 : 這個撮要版面消失了兩次, 而且用備份也不能還原 ...... 我又把我的blog重裝了兩次 .....唉, blogger 的html 真的很不穩定]

-------------------------------

另一方面 : 見blogger在版面中插入 linkwithin 的舊文推介程式, 我又試吓啦, 那知在dummy blog十分順利, 到main blog了, 又是不肯順利地顯示 ...... 唉, 今次不敢剷掉重來了, 唔知大家有沒有解決辦法 ?

Read More, 繼續看 »