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

2009年5月19日

懶人繼續閱讀(v2.x)無腦安裝上線

今天晚上花了一點時間,將CJH大大的繼續閱讀懶人加強版v2.x的安裝程式完成,關於繼續閱讀懶人加強版可以在CJH大大的blog有詳盡的解說,我在這就不再多做說明。而原本在安裝頁面的v1.x版,我也會撤下;有一點要注意的,就是v2.x版已和BloggerExt核心脫離,之前我曾將BloggerExt和v1.x版合在一起,有使用過的,建議全部移除,再重新分別裝上BloggerExt和繼續閱讀懶人加強版v2.x版。


下方的圖示將會帶你到快速安裝頁面,
在該頁面上選擇「繼續閱讀懶人加強版」的標籤



參考文章:
[BLOGGER]繼續閱讀懶人加強版 最新版本 v2.2.1(2009.5.8)
[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]安裝教學
[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]參數設定說明
[BLOGGER]繼續閱讀懶人加強版 - [版本2.x]常見問題Q&A

2008年1月28日

移植Neo中的Recent Posts及Label Post

你有聽過「Neo」嗎?不要跟我說就是駭客任務的Keanu Reeves;Neo是由Ramani所設計的Blogger Template,特色就是利用AJAX和JSON來進行頁面的讀取,而不用進行頁面的轉換,節省讀取的時間,想知道到底有多快的不妨到Hackosphere去試試看。

但是Ramani為了節省讀取的時間,拿掉了很多文章區塊的Tag,這也是我不想直接套用的原因,不過Recent Posts及Label Post到是可以很輕鬆的移植過來,至於文章區塊的移植就必須好好研究一下他的JS。

想要移植Recent Posts及Label Post,必備的就是Neo.js(請按右鍵–另存新檔),因為我只要一小部份的功能,所以修改js是必須的,待有時間好好研究一下這支js,知道如何套用文章區塊後,其他的功能還是能用的到。

首先利用任何編輯器(記事本、Dreamweaver…)開啟所下載的Neo.js,尋找
disp = disp + '<a href="javascript:updatePost(' + i + ');">' + entry.title.$t + '</a><br/><br/>';
以下列程式取代disp = disp + '<a href="' + postPermalink[i] + '">' + postTitle[i] + '</a><br/>';儲存後,將Neo.js傳至網路空間(例如:Google Page Creator),並將下列程式片段加載到Template中的</head>上方:
<script language='javascript' src='http://joshnotepage.googlepages.com/Neo.js'/>
<!-- configurable parameter to control the number of posts in the second column of Neo -->
<script language='javascript'>
var numPosts = 10;
</script>
上方紅色字的程式位址請務必要改,因為上面那是我編的,而“numPosts = 10”則是要在Recent Posts所顯示的文章數,這裡的設定是10篇,可以自行設定。

接著開啟Template(記得展開小裝置範本),尋找:
<a expr:href='data:label.url'><data:label.name/></a>
改為:<a expr:href='"javascript:fetchLatestPosts(\"" + data:blog.homepageUrl + "\",\"" + data:label.name + "\");"'><data:label.name/></a>
接來將下方程式片段放到任一個</b:widget>標籤之後,<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<DIV id='LabelDisplay'>
<DIV id='LabelTitle'>
</DIV>
<DIV class='widget-content' id='LabelPosts'>
<SCRIPT language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', &#39;&#39;);</SCRIPT>
</DIV>
</DIV>
</b:includable>
</b:widget>
儲存Template後,你就會擁有Neo中的Recent Posts及Label Post功能了。我之所以會想把這二個功能做移植,主要還是看上其中的“文章導覽切換”,當同一Label的文章超過你所設定顯示的篇數,還能以“Newer”和“Older”來做切換,這是一般Recent Posts所沒有的。


2007年4月5日

「繼續閱讀懶人加強版」無腦安裝完成(UpData 4/8)

在徵求原作者同意後,我便開始製作「繼續閱讀懶人加強版」的自動安裝頁面,利用清明節的假期,外面又冷的不想出門,待在家裡把這個安裝頁面完成,這個「繼續閱讀懶人加強版」能夠自動套用而不必再加入任何特殊標記就能夠有“繼續閱讀”的功能,主要的功能如下:

繼續閱讀方面:
  1. 可選擇延展/收合(Expand/collapse)或直接連結兩種方式
  2. 可自訂繼續閱讀顯示文字
  3. 自動判定文章內容階層,不會有切不完整的情況發生
  4. 可設定各頁面(首頁、標籤(tag)分類頁、blog存檔頁)
  5. 不同的檢視方式,有三種:全文、摘要、標題
檢視方式快速切換:
  1. 自動產生「全文|摘要|標題」的連結,可直接點選並快速切換檢視方式
  2. 連結名稱可自訂
  3. 擺放位置可自訂(需改範本HTML)
但是這「繼續閱讀懶人加強版」無法和和阿土伯的繼續閱讀功能並存,所以我下一個動作就是要將這兩者整合,如果你等不及了,就先用吧!
UpDATA 4/8:
已將「繼續閱讀懶人加強版」整合入「超級無腦安裝Blogger外掛功能」裡面,阿土伯版和懶人版只能二選一進行安裝,而原本單獨安裝懶人版的方式也保留。

UpDATA 4/14:
增加「只有繼續閱讀」的安裝方式。


下方的圖示將會帶你到快速安裝頁面,
在該頁面上選擇「繼續閱讀懶人加強版」的標籤



文章參考:
[BLOGGER]繼續閱讀懶人加強版(for Blogger New) 最新版本 v1.4.2(2007.3.15)
[BLOGGER]繼續閱讀懶人加強版 - 完整安裝 教學
[BLOGGER]繼續閱讀懶人加強版 - 只安裝繼續閱讀 教學
[BLOGGER]繼續閱讀懶人加強版 - 參數設定說明

2007年4月4日

「超級無腦安裝Blogger外掛功能」功能更新

因應阿土伯的blogger_ext2版本更新至0.6.2版,利用了點時間將安裝程式做了更新,因為改的很匆忙,沒有Debug很徹底,如果各位在用安裝使用後有發生錯誤,請留言給我,待週末有空時一併來處理,這個版本新增了社群書籤的功能,而在安裝頁面中,我有把各個社群書籤分開,讓使用者可以自行選擇想要加入那一個社群的書籤按鈕,這一次我利用阿土伯的blogger_ext2 0.6.2版加入安裝程式的新功能如下:

  • NavBar原先只能完全隱藏,blogger_ext2 0.6.2版新增浮動隱藏和完全隱藏的選項
  • 新增社群書籤功能,預設放置位置在post-icons這個<span>區塊的後面,以<span>區塊包起來,預設class為post-bookmarks。
  • 共有七個社群書籤可供自行選擇,HEMiDEMi預設為選取。

如果你曾經安裝blogger_ext2之前的版本,請先將舊的widget刪除,再安裝最新的版本。
UpDATA 4/8:
已將「繼續閱讀懶人加強版」整合入「超級無腦安裝Blogger外掛功能」裡面,阿土伯版和懶人版只能二選一進行安裝,而原本單獨安裝懶人版的方式也保留。


下方的圖示將會帶你到新的blogger_ext2快速安裝頁面


文章參考:
輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!
部落格會笑了!Blogger Smiley!
blogger_ext2.js 加速篇–全面換用Google Code
blogger_ext2.js 0.6 版本發表
自由選擇你想安裝blogger_ext2的功能
blogger_ext2.js 0.6.1 版本發表
更勁爆的「超級無腦安裝Blogger外掛功能」
blogger_ext2.js 0.6.2 版發表

2007年3月27日

利用JavaScript加密文章內容

曾經使用過有名大站的人,或許會很喜歡它的文章密碼鎖定這個功能(至少我一些朋友不肯離開有名大站就是因為Blogger沒有這個功能),我曾經在Blogger Hacks的Wiki上看到一個「Encrypted blog posts」,這是一個利用JavaScript將文章內容以Advanced Encryption Standard (AES) 256 bit加密,就以我那低空飛過的密碼學的認識來說,安全性是足夠的,加密過後的文章會以不規則的英文顯示,當你想要看原始的文章內容,則需要輸入一串加密時所使用的Key(自行設定的字串),所以當你忘記key的內容,就無法看到原始的文章內容。

當初之所以沒有用這個Hack,是因為我覺得既然要在Blog上PO文又何必怕被人看呢?但是在跟朋友強力推薦Blogger時,卻又常常被以文章沒有保密的功能而加以回絕,昨天因RaRaYA的留言又讓我想起了這個Hack,於是決定將這個Hack的用法寫出來,順便看能不能打動我的朋友也加入Blogger的行列。

我在這裡有做了一篇Demo,建議各位先去看看,如果覺得這個效果不錯,再往下看這的Hack的做法。

  1. 前面提過這Hack是利用JavaScript以AES 256 bit將文章加密,所以第一步就是要將加密/解密用的Javascript加入範本中,所以請將下列的程式碼加入範本的</head>之前:
  2. <script src='http://vincentcheung.googlepages.com/blogjscrypt.js' language='JavaScript'></script>
  3. 到這個網頁將文章加密;“key”的欄位可自行輸入,也可以按自動產生,但是key的內容請一定要留著,因為文章的解密一定要用,如果忘記key的內容,我想大概也沒有人能解出原來的文章內容。

  4. “Plain Text”這個欄位輸入想要加密的文章內容,按下會在下方的“Cipher Text”產生加密過後的字串。

  5. 而要在Blog內顯示的做法,就像我在Demo頁面有二種,一種是顯示加密過後的內容,一種是隱藏加密過後的內容,方法如下:
    方法一(Demo1):
    <a href="javascript:Decrypt_text('unique_name');">Decrypt text(文章解密)</a>
    <div id="unique_name">這裡輸入步驟3所產生的字串</div>


    方法二(Demo2):
    <a href="javascript:Decrypt_text('unique_name', '這裡輸入步驟3所產生的字串');">Show encrypted text(顯示加密過後的字串)</a>
    <div id="unique_name"></div>

    而當你要解密時,按下上面所產生的連結時,會出現一個字串輸入視窗,將步驟2的key輸入就會將字串解密為原來的文章,所以當你只想讓特定的人士觀看你的文章時,只需要將步驟2的“key”給那個人即可,而不知道“key”的人所看到的不過就是一堆不相關英文字串,這樣就能有文章保密的效果了。
  • 在步驟4中“unique_name”代表的是Div的ID,請儘量取一個不會和別的Div重覆的名字。紅字部份一定要填入“Cipher Text”的內容,這是文章解密的依據。
  • “key”的內容一定要備份。

2007年2月26日

Blogger Hacked: AJAX Labels Reloaded

曾經使用在我Blog的Header下方的Tab的人,一定知道可以預覽該Label的前五篇文章,我是利用Kaie's Blog的[AJAX] AJAX Labels Cloud再上如何將你的Label做成Tabs所製作而成,今天在原作者Deepak那發現他又將Ajax Label的功能加強,不但增加分頁的功能,讓預覽不再只限於五篇,而且安裝更方便,並且修正在IE下的編碼錯誤。

我在這將方法稍做解釋:
1、進入編輯範本,打開小裝置範本,將下列程式碼加入]]></b:skin>之前:#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
將下列程式碼加入</head>之前:<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5;
var navFlag = 1; //ON by default
var feedLabel = "標籤訂閱";
var catLabel = "標籤:";
var closeLabel = "[x]關閉";
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

其中紅色部份可以自行設定,maxresults – 每一頁所顯示的筆數,navFlag – “1”表示開啟分頁“0”表示關閉;如果你之前已經有如入Ajax Label請跳到步驟4。

2、接著尋找下列程式碼:<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

取代為:<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>


3、在範本中找到你的Label1這個widget,找到下列的程式碼:<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>

取代為:<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>


4、你可以到原作者Blog的步驟4,按下來新增一個Html/Javascript的widget以便顯示Ajax Label的搜尋結果,並儲存範本;或者自行新增,將下列程式碼加入你自行新增的widget內:<div id="indicator" style="display:none">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/>
Loading...</div>
<div id="search-result" style="display:none"><a name="sres"></a>
<div class="search-close" onclick="javascript:Element.hide('search-result')">
<script type="text/javascript">document.write(closeLabel);</script>
</div><div id="show-result"></div>
<div class="search-close" onclick="javascript:Element.hide('search-result')">
<script type="text/javascript">document.write(closeLabel);</script></div></div>

如果你之前曾經加入過Ajax Label,請先移除舊的widget,再進行此步驟。

因為之前的版本最多只能顯示5筆,所以我才保留Label Cloud,另外再加入一個Tab來使用Ajax Label,套用這個版本後,可能要考慮將Tab移除或者將Tab轉為其他用途了。
UpData:2/27
修正一些顯示上的錯誤,如果你在2/27以前曾參考本文,請重新進行步驟2、3、4。
參考資料:Blogger Hacked: AJAX Labels Reloaded

2007年2月24日

讓comments也能顯示文章標題

最近滿多人在問,要如何在comments也顯示文章的標題?如果用feed和json的方法,很抱歉,目前似乎只能抓到文章內容,另外在Beautiful Beta中的Widget Installation and Downloads Page這裡的“Recent comments widget”,能夠依照網址來抓取標題,但是遇上中文標題就沒用了,因為目前Blog文章的網址是依照你文章標題的英文字來取的。

之前曾在水瓶子那裡看過他所用的方法:
  • 先抓取 comments 的 feed,內有標題的網址,再抓取藉由 comments 發佈到 gmail 信箱然後轉發到另一個部落格的 posts feed 去比對網址,取回標題。
覺得有點複雜而沒有採用,因為最近滿多人在問,所以又到他那去看了一下,發現他用上述的方法後,因為被Blogger.com認為是spam而檔掉,所以改採用新的方式:
  • 先抓取 comments 的 feed,內有標題的網址,然後再抓取 posts 的 feed 兩個去比對
而且也做成了元件提供大家使用 ,只要將下列二行放置到“新增html/javascript”的widget中即可:
<script>g_szBlogDomain='xxxxx.blogspot.com'; </script>
<script src="http://js.writers.idv.tw/rc.js"></script>

《記得要將紅色部份改為你的Blog網址》
資料來源:
JSON 應用(2):最新迴響的標題
奇摩購物中心-1111