2013年10月12日 星期六

分享 : 自動為網誌產生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了, 又是不肯順利地顯示 ...... 唉, 今次不敢剷掉重來了, 唔知大家有沒有解決辦法 ?



16 則留言:

  1. 呢個版面就好似我用ipod睇的版面, 只是沒有兩邊欄位資料, 縮相左邊,,字在右邊, 整齊好多.
    你愈來愈多大發現喇.

    回覆刪除
    回覆
    1. 係喎, 雖然係失去member, 但係你新出的blog仍會出現在我要追蹤的網誌欄呀.

      刪除
    2. 係呀,Blogger的mobile version 內置了thumbnail and summary 功能,偏偏web version就冇,好彩blog友教我set.

      呀,我失去了的是Blogger舊制的member, 至於新的google +follower, 就仍在,好彩!

      刪除
  2. 那個顯示不到可能有碼出錯。你改時有沒有留意會出現紅色警告字句?
    其實你下次出事,不用剷走!你匯出原blog的XML檔再匯入去新blog,咁你原本blog的瀏覽和留言都搬了去測試blog了:)

    回覆刪除
    回覆
    1. 我也是將整過main blog 匯出,匯入到dummy blog, 再將dummy blog 的網址改為main blog的網址,但過程中,追隨者,瀏覽量,和幾乎所有側欄都沒有了 ........ 沒法啦,誰叫main blog 用盡方法也 malfunction, dummy blog 一做就ok 了 ........

      可能 http://amoonlw.blogspot.hk 網址不吉利 ....... :p

      刪除
    2. 呀,過程中沒有警告語句啊,好像第一次是OK 的,但有D 嘢想改,uninstall 後 再 install, 就malfun 了 ........ dummy blog 重做了很多次,沒事。

      刪除
  3. Moon兄, 你果篇"搬blog程序分享"成篇唔見左既? 我剩係跟到去download備份度咋. 我有21個zip files, 足足download了5小時才完成, 因為YB玩嘢, 每一個file都係download到99%就中斷. 而家諗住先壓縮d相, 過來你blog copy你推介那個一次過可以壓縮好多相片果條link, 不過成篇唔見左呀.

    回覆刪除
    回覆
    1. 唔好意思, 因為今朝我的blog又唔妥, 又要重裝 ............. 但係在我desktop和手機都見到呢篇文呀 . 可能不太穩定 ......現在將"搬blog程序"篇文再發佈一次, 希望你見到 .....唉.

      係呀, "每一個file都係download到99%就中斷.", 我都係咁呀, 氣死.

      刪除
    2. 巳見到了Moon兄, 謝謝你. 我巳下載photocap, click入"批次功能"後, 再click入"批次處理". 但我發覺把"尺寸設定"改成500x640之後, 睇預覽, 見到d相好多斬左頭尾, 咁點算呢? 我好蠢, 攪唔掂, 又唔知自己做得啱啱, 請問可否教教我入去photocap其實應該點做?

      刪除
    3. IC, 應該是進入 "批次變更影像格式與尺寸"

      在"尺寸變更設定"的"尺寸模式中, 要選"限制寬高範圍fit" 為 640 或你喜歡的數字, 那麼它會自動設定 相片的高度 或寬度了.

      還有, 在"檔案路徑設定"中, 不要選跟原檔案相同, 否則你縮少的照片叫 " abcde.jpg ", 它會在處理後另存一個檔案叫 " abcde(001).jpg" , 多了(001)是不行的.

      你應先另開一個新資料夾, 例如叫"photo_to_blogger" 之類, 在"檔案路徑設定" 中選"自定的目錄", 在右邊的小button中click 開, 再指向"photo_to_blogger" , 那麼縮小的照片就會存入這新folder, 而不會改名了.

      刪除
    4. 唔該晒Moon兄. 巳依照你所教的步驟, 但到我click入"載入影像", 有一個"開啟舊檔"的窗口打開, 咁我就揀左之前download好的其中一個image file, 再按下面的"開啟舊檔", 佢係無反應. 而在左手邊我見到一個"檔案名稱(N)", 旁邊有空白, 好似要輸入一d嘢咁. 我試過輸入image file的檔名, 又彈出"檔案名稱無效"的字句. 唉! 我真係點解會生成咁蠢.

      刪除
    5. 這樣應該ok 喎.

      click "載入影像" 後, 出左"開啟舊檔"的窗口, 可以一次個選晒所有jpg檔案, 只要按住鍵盤的"shift"掣, 再用滑鼠點選就可以了, 最後click 右下角的"開啟檔案", 就可以載入photocap了.

      別客氣, 唔熟新軟件係咁了, 正如blogger的html都玩到我死死吓.

      刪除
  4. Moon兄 : 您好。 我又來找您麻煩了, 一波未平, 一波又起, 太貪心了! 我覺得我的"網誌存檔"好像一堆東西, 可以在每篇"網誌存檔"的中間加大分隔線嗎?

    回覆刪除
    回覆
    1. Amy, 這是沒辦法的,因為這設計是有blogger 寫在幕後,除非是程式高手去改他的html 或 ccs 程式,那要很高手了

      刪除
  5. Moon兄: 謝謝您拔刀相助, 花了這麼多的時間幫我解決了搬blog的"大問題"! 謝甚!

    回覆刪除
    回覆
    1. 別客氣, 朋友互相幫助呀, 只是用我的少少經驗, 實習實習.

      刪除