星期五, 4月 11, 2008

終於有[繼續閱讀]的功能了


一直很討厭首頁打開後落落長的樣子, 第一個載入的速度慢, 第二個是我不"尬意", 舉例來說好了, 如果想看第二篇文章, 非得等第一篇文章下載完畢(尤其是圖片), 不然在你看的過程中,文章會不停的往下跑, 希望大家聽的懂我說啥。

那天在網路上逛到一個blog,發現他有[繼續閱讀]的功能,而且發現他也是blogspot的網址,怎麼我在設定的功能裡面找來找去的就是沒有這項功能呢?這件事情一直埋藏在我心中久久不能釋懷。



直到昨天,我終於受不了了,
在我不停的google下,終於找到相關線索,
原來是要寫程式、改模板!!!
這...
這...
這不是肯德基...ㄚ...說錯了,這不是我要的!
一定有更簡單的!
在我棄而不捨之下(其實是不想寫程式,也不會寫)終於找到了簡單的方法,
只要貼貼貼就可以完成這樣的功能了!YA~~~
想要有相同功能的人只要跟著我往下做就可以啦!

SETP 1.
先登入你的blogger吧,然後到版面配置\修改HTML,記得把[展開小裝置範本]打勾。


SETP 2.
找到 <head> 的標籤,然後在後面貼上下面的code
---------------------------------------------------------------------------------
<script type="text/Javascript">
function hidePost(postUrl)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","Read More");
eA.appendChild(document.createTextNode("...Read More"));
eB = document.createElement("p");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>

---------------------------------------------------------------------------------
其中 ...Read More 改成你想要的標籤,例如我就改成了[繼續閱讀]


SETP 3.
找到 <p><data:post.body/></p>這一行,然後補上下面的 code
---------------------------------------------------------------------------------
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.url/>');</script>
</b:if>
</b:if>

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

這邊做完之後記得範本要存檔哦~~~
不然你就得再剪貼一次了!

SETP 4.
接下來是要讓你以後每次寫文章的時候直接有這樣的功能,先到設定\格式

最下面的[文章範本]貼上下面的code,
---------------------------------------------------------------------------------
<div> //首頁看的到的文章 </div>
<div id="fullpost"> //隱藏部分的文章 </div>

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

然後你在你每次張貼文章的地方就可以看到以下的畫面啦!


STEP 5.
接下來就是苦命的工作了,就是要把以前已經張貼過的文章也改成有[繼續閱讀]的功能,直接到張貼\修改文章,在你想要隱藏的文字前面貼上 <div id="fullpost"> 那行code,


然後直接跳到最最最最最.......最後一行,貼上 </div> 就大功告成啦!


就在我昨天一陣努力瘋狂貼貼貼之下,我終於把我以前的文章全部都有這個功能啦!

YA~~~高興中!

註:以上的文章是參考[Kaie's Blog]
--------------------------------------------------------------------
2008.04.18 update
配合玥玲的智力,修改了一些地方與一個bug
張貼留言

最新文章