顯示具有 Blogger 標籤的文章。 顯示所有文章
顯示具有 Blogger 標籤的文章。 顯示所有文章

2006-04-16

Blogger 繼續閱讀功能改良版

(此法不適用新版的Blogger-2006.11)
一開始在網路上找相關教學的時候,就發現原來blogger官方的說明裡有提供兩種方法


第一種方法是把想要隱藏的文章藉由javascript和CSS結合達成,就像這樣:
[Show/Hide]
但有些人(就像我)想要讓讀者點連結之後可以連到另一個顯示全部文章的網頁,第二個方法加上了blogger的Conditional Tag(中文是附有條件的標記),但是令人詬病的缺點是連到顯示整篇文章的網頁之後,下方還是會出現 "Read More..." 字樣,挑剔的我當然是不能接受的,後來繼續在網路上找,果然有先進們已經有好方法了,我參考了Guava 此篇,加上自己的解說如下: (分為三個步驟)

Ste1: 在你網頁的範本(template)裡,將以下的內容加在<head></head>之間


<MainPage>
<script type="text/Javascript">
function has_id_hiden (postid)
{
var elm = document.getElementById(postid);
var nodelist=elm.childNodes;
for(var i=0;i<nodelist.length;i++)
if(nodelist.item(i).id=="hiden")
return true;
return false;
}

<MainPage> tag是控制此段內容只顯示在主網頁裡,function has_id_hiden則是判斷是否隱藏文章

Step2: 接下來在找到<style type="text/css"></style>,並把以下的css加進去:


<MainPage>
.post #hiden{
display:none;
}
</MainPage>



Step3: 找到<$BlogItemBody$>所在,應該會像底下的形式(如果你是用blogger提供的template):

<div class="post-body">
<$BlogItemBody>
</div>

將它改寫成:
<div class="post-body" id="DOC_<$BlogItemNumber$>" >
<$BlogItemBody$><br/>
</span>
<MainPage>
<script type="text/Javascript">
//<!--
if(has_id_hiden('DOC_<$BlogItemNumber$>')==true)
document.write("<a href='<$BlogItemPermalinkUrl$>' "+
"title='read more !' hidefocus >Read More ... </a>") ;
//-->
</script>
</MainPage>


最後這一步就是判斷是否要顯示"Read More..."


大功告成!接下來就是當我們在發表文章的時候,把想要隱藏的部分用
<div id="hiden"></div>
包住,就可以了

2006-04-01

Blogger Templates

列幾項google到的template好了,如果有看到其他不錯的網站,不嫌麻煩的話也告訴我吧 :)

2006-03-19

Blogger的文章分類 - 使用Furl

主要是根據rockbird這篇文章來做的,不過還是在這裡還是稍微描述一下步驟:


Step 1: 去 Furl申請一個帳號,然後到MyTool選擇一種安裝Furl的方法。

Step 2: 也是在Furl裡,到 My Archive -> MyTopic 建立自己想要的分類項目 (如生活瑣事/音樂/電腦)

Step 3: 回到MyTool,有一個Add Furl to My Site的tab,這是用來產生html/javascript code的 (一般都會建議點選裡面的advanced settings,詳細的就參考rockbird兄的那篇摟),進去之後根據在step2新增的項目逐一產生對應的code。將這些code以新增文章的方式新增在我們的blog裡。

Step 4: 把step 3新增文章的連結放在blogger的範本適當的位置作為分類項目 ,到此準備工作就大致完成了,接下來就是把之前的文章一篇篇的分類,分類的方法就是利用step1安裝的furl(如果當時是以我的最愛的方式安裝的話就要點選每一篇文章進去來新增)。

呃 我知道這樣寫只有我看得懂...XD

另外有一點是要消除點進分類項目之後每個文章後面都會出現"#"的符號,這個問題在Furl的Help裡有解答,解法是將以下的css
.furlLinkArchive {display:none;}
這個新增在blog目前的範本(template)裡,通常是原始碼的最前面。

----------

這應該是最短的教學吧?!

這種分類法的原理是 使用者點選我的blogger裡的某個分類該分類的內容實際是一段javascript,它會去furl的網站抓我之前新增在該分類的文章顯示