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

2007年6月13日 星期三

繼續閱讀功能加強版 - 參數設定說明

可設定部份為程式碼後段,被<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 = '
標題';


此文章參考於http://cjhtech.blogspot.com/2007/02/blogger_28.html

Blogger繼續閱讀功能 加強版

介紹

不用fullpost之類的tag
自動以行數(<br>)縮文(超過就縮起來變成繼續閱讀)

提供兩種繼續閱讀模式(直接連結 或 延展/收合)
並支援瀏覽模式(全文/摘要/標題)的動態切換

不用改html,新增網頁元素並貼上程式碼即可套用

做法

安裝前注意事項:
  • 若之前已套用有修改html範本的繼續閱讀,或其他版本的繼續閱讀功能,請先刪除之前更動的部份,再進行安裝
  • 本外掛不能和Rack Lin(阿土伯)的繼續閱讀功能混用(其他功能(標籤雲、隱藏navbar...等等)不影響,都可以正常使用)

Step by Step

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>

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

此文章參考於 http://cjhtech.blogspot.com/2007/02/blogger.html

2007年6月12日 星期二

數獨



喜歡玩數獨的朋友,可以直接將下面程式直接加入你的blogger

<iframe src="http://www.sudoweb.com/free-webmaster.php?tail=-43" frameborder="0" width="234" scrolling="no" height="240"></iframe>

在Blogger中顯示正常的程式碼

此方法只適用於Blogger

1.首先一定要先儲存你的範本

2.修改你的範本
在"]]>"上方貼上以下片段:

CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) lef\
t top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}

3.
之後文章中要貼語法時,
先把原始碼 的< 轉為 & lt; > 轉為 & gt;
(注意& lt 和 & gt 中間是沒有空格的,此處為了排版需要才加上空格)
然後只要把語法放在<code> </code> 之間就可以了。

加密你的blog文章

例一:

+uyNndd2wd1Jx8w8WRYvQ91uqrYDcA8mXX4HBIJOU62e5MvH\nvoA4u6KZwv8jKOHUpGjVWNIkrxW6wcTof1tKfb/RagkVA6Zh\n+5zz33ePydc=


解密點此處 (密碼 : 111)

例二:
顯示加密文章


加密方法如下
1.下載加密的 Java Script ,並將此 Java Script 放置在網路上可以存取的地方
如果你用的是 Blogger ,便可以上傳到 http://你的id.googlepage.com

2.在修改HTML中,找到黑色的部份,並加入藍色語法,如下:

]]></b:skin>
<script src='加密的Java Script的網址' type='text/javascript'/>
</head>

接著儲存範本。

3.要發表文章前,到此網頁加密你的文章,其中Key為密碼,Plain Text為明文,Cipher Text為密文。將密碼和文章寫到此網頁後,按下Plain Text欄位的"Encrypt" 即可產生密文

4.在發表文章時可以用下面兩種方法:

顯示密文
<a href="javascript:Decrypt_text('unique_name');">此文章已被加密</a>
<div id="unique_name">第三步驟的密文</div>



不顯示密文
<a href="javascript:Decrypt_text('unique_name', '第三步驟的密文');">此文章已被加密</a>
<div id="unique_name"></div>



Note: 上方的 unique_name 型態是 div tag 的一個 id 名子,可以自行命名,只要在 template 中,或文章中不出現同樣的id即可,否則會造成判斷錯誤!!也就是在一個顯示頁面中,有用到兩個以上密文片段的話,那麼此 id 的命名就必須是 unique_name , unique_name1 ,unique_name2...之類。

2007年1月15日 星期一

繼續閱讀功能


文章出處:http://tomky.blogspot.com/2006/11/blogger-beta.html


最開始最開始,請一定要備份你的範本!不然出了事就很麻煩了。請點選「下載完整模版」來備份,一旦出問題即可以上傳以回復至原來的範本。

首先,我們要將要隱藏的文章部分的CSS設定為不顯示,並將所需要的JavaScript置入,請將以下的code放到範本的head區裡面:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post #hiden{
display:none;
}
</style>
<script type='text/javascript'>
function has_id_hiden(postid) {
var elm = document.getElementById(postid);
var nodelist=elm.childNodes ;
var i=0;
while(i != nodelist.length){
if (nodelist.item(i).id=='hiden')
return true;
i++;
}
return false ;
}
</script>
</b:if>

在此請先存檔一次,如果順利過關表示你的code是沒問題的。
接著請按下「展開小裝置範本」,一般人會想要放的位置應該是文章內文的最後面吧?如果是,請在裡面尋找類似的code

<p><data:post.body/></p>


在找到以後,請將他改成以下的code:(其中中文的部分是可以自由修改的喔^^


<p>
<div expr:id='"doc_"+data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script type='text/Javascript'>
if(has_id_hiden('doc_<data:post.id/>')==true) {
document.write("<a expr:href='data:post.url' title='
繼續閱讀'>繼續閱讀</a>");
}
</script>
</b:if>
</p>

基本上,這樣就完成囉!請儲存以後去看看你的Blog有沒有正常運作囉!

如果是新手但仍賞光採用我的code的人,在放入這些code以後,在撰寫文章時只要將想隱藏的部分用hiden標記給夾起來,在首頁就不會出現囉:

要顯示的部分
<div id='hiden'>
要隱藏的部分
</div>

雖然可能已經過時了,但仍希望所有的舊Blogger使用者都能藉此快速的轉換到Beta版來,享受一下即時發布的爽度!如果以後有空,我會寫一篇關於新舊版範本的比較和注意事項,如果有空,如果有空

ps. 以上的code是假設你只有在"首頁"需要這個功能,如果你希望在Label下也有這樣的功能的話,請將所有的<b:if cond='data:blog.url == data:blog.homepageUrl'>改成<b:if cond='data:blog.pageType == "index"'>即可。