2007年2月28日 星期三

[BLOGGER]繼續閱讀懶人加強版 - [版本1.x]問題回報頁

不會設定/使用上有問題，請在此篇留言發問

張貼者： CJH 發表於 凌晨1:40:00 79 個回應

分類：

[BLOGGER]繼續閱讀懶人加強版 - [版本1.x]參數設定說明

可設定部份為程式碼後段，被<script>和</script>包圍的部份
以完整版為例：（紅色字的部份）

<script src="http://blogger-ext2.googlecode.com/files/jquery.pack.js" type="text/javascript"></script>
<script src="http://blogger-ext2.googlecode.com/files/blogger_ext2-core.pack.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-1.4.2.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-controller-1.1.1.js" type="text/javascript"></script>

<script>
BloggerExtOptions.hide_navbar = false;
BloggerExtOptions.Easy_Read_More_MaxLine = 3;
BloggerExtOptions.Easy_Read_More_style = 'directlink';
BloggerExtOptions.Easy_Read_More_Text = '...繼續閱讀';
BloggerExtOptions.Easy_Read_More_Text_Link_title = '繼續閱讀';
BloggerExtOptions.Easy_Read_More_Collapse_text = '顯示摘要...';
BloggerExtOptions.Easy_Read_More_Collapse_text_Link_title = '顯示摘要';
BloggerExtOptions.Easy_Read_More_Collapse_Move = false;
BloggerExtOptions.Easy_Read_More_Index_Page_Style = 'abstract';
BloggerExtOptions.Easy_Read_More_Tag_Page_Style = 'title';
BloggerExtOptions.Easy_Read_More_Archive_Page_Style = 'title';
BloggerExtOptions.Easy_Read_More_Controller_Default_Position = true;
BloggerExtOptions.Easy_Read_More_Controller_Splitter = ' | ';
BloggerExtOptions.Easy_Read_More_Controller_Full_Text = '完整';
BloggerExtOptions.Easy_Read_More_Controller_Abstract_Text = '摘要';
BloggerExtOptions.Easy_Read_More_Controller_Title_Text = '標題';
</script>

逐一說明如下：

1.隱藏上方NavBar功能，預設為不隱藏，若要隱藏，請將
BloggerExtOptions.hide_navbar = false;改為
BloggerExtOptions.hide_navbar = true;即可

2.設定最大行數，預設為3行，超過就會縮起來變成繼續閱讀
BloggerExtOptions.Easy_Read_More_MaxLine = 3;
數字3改為想要的行數即可

3.設定繼續閱讀顯示樣式，有「直接連結」和「延展/收合兩種」
直接連結：(預設值)
BloggerExtOptions.Easy_Read_More_style = 'directlink';
延展/收合：
BloggerExtOptions.Easy_Read_More_style = 'collapsible';

4.設定繼續閱讀按鈕顯示文字，以及連結的title屬性
顯示文字：
BloggerExtOptions.Easy_Read_More_Text = '...繼續閱讀';
連結title屬性：
BloggerExtOptions.Easy_Read_More_Text_Link_title = '繼續閱讀';

5.設定收合按鈕顯示文字，以及連結的title屬性（只有在樣式設定為「延展/收合」時才有效)
顯示文字：
BloggerExtOptions.Easy_Read_More_Collapse_text = '顯示摘要...';
連結title屬性：
BloggerExtOptions.Easy_Read_More_Collapse_text_Link_title = '顯示摘要';

6.文章延展後，收合按鈕是否移動（只有在樣式設定為「延展/收合」時才有效)
不移動，取代繼續閱讀按鈕（預設值）
BloggerExtOptions.Easy_Read_More_Collapse_Move = false;
繼續閱讀按鈕消失，收合按鈕出現在文章最後
BloggerExtOptions.Easy_Read_More_Collapse_Move = true;

7.設定各頁面預設顯示方式，顯示方式有三種：
  • 繼續閱讀(摘要) - abstract
  • 只有標題 - title
  • 全文 - full
修改以下紅色字體部份即可設定
設定BLOG首頁：（預設為顯示摘要）
BloggerExtOptions.Easy_Read_More_Index_Page_Style = 'abstract';
設定Tag標籤分類頁：（預設為只顯示標題）
BloggerExtOptions.Easy_Read_More_Tag_Page_Style = 'title';
設定Archive(文章存檔)分類頁：（預設為只顯示標題）
BloggerExtOptions.Easy_Read_More_Archive_Page_Style = 'title';

8.設定快速切換按鈕顯示位置
在文章列表的頭和尾各顯示一個：(預設值)
BloggerExtOptions.Easy_Read_More_Controller_Default_Position = true;
註：可用css操控樣式，class為"read-more-controller"

自訂顯示位置：(需自行改範本的html)
BloggerExtOptions.Easy_Read_More_Controller_Default_Position = false;

若要自訂顯示位置，請在範本的html內想要擺放的位置上插入：
<div class="read-more-controller"></div>
快速切換按鈕會自動加在裡面

9.自訂快速切換按鈕的分隔符號(預設為 | )
BloggerExtOptions.Easy_Read_More_Controller_Splitter = ' | ';
修改紅色字部份即可

10.修改快速切換按鈕的顯示文字
完整模式的顯示文字：
BloggerExtOptions.Easy_Read_More_Controller_Full_Text = '完整';
摘要模式的顯示文字：
BloggerExtOptions.Easy_Read_More_Controller_Abstract_Text = '摘要';
標題模式的顯示文字：
BloggerExtOptions.Easy_Read_More_Controller_Title_Text = '標題';

問題回報頁(有問題請到此處留言發問)

張貼者： CJH 發表於 凌晨12:37:00 3 個回應

分類：

2007年2月27日 星期二

[BLOGGER]繼續閱讀懶人加強版 - [版本1.x]安裝教學

1.到Blog的控制主頁，選擇「範本」->「網頁元素」
2.按下「加入網頁元素」的連結，出現可用的網頁元素清單
3.其中一項為「 HTML/JavaScript」，按下「加入BLOG」的連結
4.「書名」的欄位，請填上 ##HIDEME##
5.「內容」部份，

[完整安裝](繼續閱讀+快速切換按鈕)，請複製以下程式碼貼入

<script src="http://blogger-ext2.googlecode.com/files/jquery.pack.js" type="text/javascript"></script>
<script src="http://blogger-ext2.googlecode.com/files/blogger_ext2-core.pack.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-1.4.2.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-controller-1.1.1.js" type="text/javascript"></script>

<script>
BloggerExtOptions.hide_navbar = false;
BloggerExtOptions.Easy_Read_More_MaxLine = 3;
BloggerExtOptions.Easy_Read_More_style = 'directlink';
BloggerExtOptions.Easy_Read_More_Text = '...繼續閱讀';
BloggerExtOptions.Easy_Read_More_Text_Link_title = '繼續閱讀';
BloggerExtOptions.Easy_Read_More_Collapse_text = '顯示摘要...';
BloggerExtOptions.Easy_Read_More_Collapse_text_Link_title = '顯示摘要';
BloggerExtOptions.Easy_Read_More_Collapse_Move = false;
BloggerExtOptions.Easy_Read_More_Index_Page_Style = 'abstract';
BloggerExtOptions.Easy_Read_More_Tag_Page_Style = 'title';
BloggerExtOptions.Easy_Read_More_Archive_Page_Style = 'title';
BloggerExtOptions.Easy_Read_More_Controller_Default_Position = true;
BloggerExtOptions.Easy_Read_More_Controller_Splitter = ' | ';
BloggerExtOptions.Easy_Read_More_Controller_Full_Text = '完整';
BloggerExtOptions.Easy_Read_More_Controller_Abstract_Text = '摘要';
BloggerExtOptions.Easy_Read_More_Controller_Title_Text = '標題';
</script>

[只安裝繼續閱讀](不含快速切換)，請複製以下程式碼貼入
<script src="http://blogger-ext2.googlecode.com/files/jquery.pack.js" type="text/javascript"></script>
<script src="http://blogger-ext2.googlecode.com/files/blogger_ext2-core.pack.js" type="text/javascript"></script>
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-1.4.2.js" type="text/javascript"></script>

<script>
BloggerExtOptions.hide_navbar = false;
BloggerExtOptions.Easy_Read_More_MaxLine = 3;
BloggerExtOptions.Easy_Read_More_style = 'directlink';
BloggerExtOptions.Easy_Read_More_Text = '...繼續閱讀';
BloggerExtOptions.Easy_Read_More_Text_Link_title = '繼續閱讀';
BloggerExtOptions.Easy_Read_More_Collapse_text = '顯示摘要...';
BloggerExtOptions.Easy_Read_More_Collapse_text_Link_title = '顯示摘要';
BloggerExtOptions.Easy_Read_More_Collapse_Move = false;
BloggerExtOptions.Easy_Read_More_Index_Page_Style = 'abstract';
BloggerExtOptions.Easy_Read_More_Tag_Page_Style = 'title';
BloggerExtOptions.Easy_Read_More_Archive_Page_Style = 'title';
</script>

6.按「儲存變更」，安裝完成！！

問題回報頁(有問題請到此處留言發問)

張貼者： CJH 發表於 晚上10:19:00 30 個回應

分類：

2006年11月3日 星期五

[BLOGGER]繼續閱讀懶人版(For Blogger New)

注意：此篇僅適用Blogger Beta，原Blogger舊版專用的版本在這

注意2：此篇已有新版本，請到這裡觀看

這個版本是參考：
Chagg's 嘴砲日記: Blogger Beta 繼續閱讀功能改良
修改而成的懶人版，在此特別致謝

優點：不需要逐篇插入特殊的標記，會自動套用在整個Blog（懶人適用)
缺點：行數是固定的，所以沒有辦法每篇自訂中斷處

使用前說明：
本程式碼是使用JavaScript去抓<br>(換行標籤)，每個<br>就代表一行
所以要確定你的文章裡面有足夠數量的<br>，繼續閱讀才會成功

修改template(記得修改前請備份!!)
步驟1：在</b:skin>和</head>中間，插入以下程式碼

<script type="text/javascript">

function hidePost(PostBodyId,postUrl)
{
var pbody = document.getElementById('PS_' + PostBodyId);
var tagbr = pbody.getElementsByTagName('br');

if (tagbr.length > 3)
{
var britem = tagbr.item(3);
while (britem.nextSibling!=null)
{
britem.parentNode.removeChild(britem.nextSibling);
}
britem.parentNode.appendChild(document.createElement("br"));
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","繼續閱讀");
eA.appendChild(document.createTextNode("...繼續閱讀"));
eB = document.createElement("div");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
britem.parentNode.appendChild(eB);
}
}

</script>


步驟2：找到類似以下的區塊

<div class="post-body">
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>

用以下的程式碼取代：

<div class="post-body">
<div expr:id='"PS_"+ data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.id/>','<data:post.url/>');</script>
</b:if>
</b:if>
<div style='clear: both;'/>
</div>

步驟3:Save Template，Enjoy It

補充說明：
前面的程式碼，預設是每篇會保留前四行
要加大或縮小的話，請修改步驟1的程式碼：

if (tagbr.length > 3)
{
var britem = tagbr.item(3);

把兩個數字'3'換成你要的行數即可

張貼者： CJH 發表於 凌晨2:24:00 18 個回應

分類：

2006年10月30日 星期一

[BLOGGER]繼續閱讀懶人版(For Blogger舊版)

2006/11/3補述：此篇的原稿已經被我改成Blogger Beta的版本，好像還是有蠻多人還在用舊版，所以再貼出來給大家參考

注意：此篇不適用Blogger Beta，Blogger Beta專用的版本在這

這個版本是參考：
程式設計 NEXT SERVICES
作者的程式碼略微改寫的成品，在此特別致謝

優點：不需要逐篇插入特殊的標記，會自動套用在整個Blog（懶人適用)
缺點：行數是固定的，所以沒有辦法每篇自訂中斷處

使用前說明：
本程式碼是使用JavaScript去抓<br>(換行標籤)，每個<br>就代表一行
所以要確定你的文章裡面有足夠數量的<br>，繼續閱讀才會成功

修改範本(記得修改範本前請備份!!)
步驟1：在</style>和</head>中間，插入以下程式碼

<script type="text/javascript">

var PostMAXLine = 4; /*每篇顯示最大行數(大於此會縮起來)(繼續閱讀)*/

function SimplifyPostBody(PostBodyId,ContinueReadLinkUrl)
{
var strPostBody = document.getElementById(PostBodyId).innerHTML;
var strTag= '<BR';
var iTagIndex= strPostBody.indexOf(strTag);
if (iTagIndex ==-1)
{
strTag= '<br';
iTagIndex= strPostBody.indexOf(strTag);
}

var iTempIndex = -1;

for (i=0; i<PostMAXLine ; i++)
{
if (iTagIndex != -1)
{
iTempIndex = iTagIndex + 1;
iTagIndex = strPostBody.indexOf(strTag, iTempIndex);
}
}
var iTargetTagIndex = iTempIndex - 1 ;
var strMiniPostBody = strPostBody.substring(0,iTargetTagIndex) + '<p><br/><a href="' + ContinueReadLinkUrl + '" title="繼續讀下去...">(繼續閱讀 ... )</a></p>';
if (iTargetTagIndex != -1)
document.getElementById(PostBodyId).innerHTML = strMiniPostBody;
}

</script>

步驟2：找到類似以下的區塊

<div class="post-body">

<p>
<$BlogItemBody$>
</p>
</div>

用以下的程式碼取代：

<div class="post-body">

<div id="POSTBODY_<$BlogItemNumber$>">
<$BlogItemBody$>
</div>

<MainPage><script>
SimplifyPostBody('POSTBODY_<$BlogItemNumber$>','<$BlogItemPermalinkUrl$>')
</script></MainPage>

</div>


步驟3:重新發佈，Enjoy It

補充說明：
前面的程式碼，預設是每篇會保留前四行
要加大或縮小的話，請修改步驟1的程式碼：
var PostMAXLine = 4; /*每篇顯示最大行數(大於此會縮起來)(繼續閱讀)*/

把'4'換成你要的行數即可

張貼者： CJH 發表於 下午3:50:00 6 個回應

分類：

訂閱： 文章 (Atom)

##EasyReadMore##