2007年3月28日

Gmail繁中也可以收外部信件了

用Gmail收外部信件,原本必須將使用語言轉換為英文才能使用,我之前就已經把我所有外部信件全部都設定好了,不過每次要收外部信件時,都要把使用語言換來換去,所以我常常一個多星期才收一次信,但是不知道什麼時候,繁中的Gmail也能收外部信件,我也是今天進到帳戶才發現的,設定方法很簡單,下面我來做個小小的說明。

  1. 首先登入Gmail,進入畫面右上角的“設定”,選擇“帳戶”這個分頁標籤:


  2. 在畫面下方可以發現多了一個“從其他帳戶取得郵件”,之前只有使用語言切換為英文時才會出現,現在繁體中文也可以了,選擇“新增其他郵件帳戶”來設定外部信箱:


  3. 接著輸入外部信箱的位址,再按下一步:


  4. 接下來填入剛才所輸入帳戶的密碼,而在下方有四個選項可供選擇;第一個可以將信件保留在原郵件Server上,第二個則是讓Gmail連線到郵件Server時以SSL進行進線,第三個是當信件收到Gmail時可以為該信件加入一個標籤以供辨別,第四個則是當信件收取到Gmail時不會在收件匣顯示,而直接封存:


如果要再加入新的郵件帳戶,只需再重覆以上四個步驟即可,Gmail最多可以設定5個外部信件帳戶,我現在所有的信件已經全部用Gmail收取了。

至於為什麼要全部用Gmail收呢?因為我外部的信箱有三個是用HiNet的,而HiNet的垃圾郵件之多是有目共睹的,而其他的信箱想免除垃圾郵件的困擾還要自己手動設定,試問各位每天有那個閒功夫將每一封的垃圾郵件加入黑名單嗎?至少Gmail在垃圾郵件的郵件的篩選這一方面真的不錯,我現在除了IE之外,可以也可以將Outlook封存了。

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年3月25日

Hacks In Lifetags:Label/Archive Page's View

上次修改Josh's Lifetags已經快半個月了,剛好晚上睡不著,就來繼續之前的工作;我在Hacks In Lifetags:Read More有提到過我是用直接展開的方式,其中還有另一個考量,在文中第一個步驟有加載一個JavaScript,而這個JavaScript也可以用在這個Hack上面,這是我在文中所沒有提到的。

Peek-A-Boo的修改方法如下:(參考文章:Peek-A-Boo view of posts in label/archive pages
1、加載JavaScript(如果已經有的話請略過)
<script type='text/javascript'
src='http://www.anniyalogam.com/widgets/hackosphere.js' />

2、這個步驟有點複雜,所以我將全部的程式碼貼上:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td><td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>


<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>


<b:include data='post' name='post'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

將紅色部份加入範本內即可。

然而,如果你只想在Label/Archive的頁面只Show出文章的Title而不想Show出文章內容,作法則是更簡單。
1、首先找到下面的程式片段:(參考文章:New hack to improve your label/archive pages
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>

2、將上列的紅色部份以下列程式碼取代:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


以上兩種方法,提供給各位做參考。

2007年3月23日

AdSense繁體中文支援論壇

於Google AdSense也許很多人還有很多疑問,除了在各個專門探討Google AdSense的網站或Blog尋找解答之外,現在又多了一個新的管道;在Google 網上論壇中Google AdSense開了一個繁體中文的支援論壇,也許可能才開始不久吧,群組人數只有60個,但這對於AdSense的繁體中文使用者來說卻是個好消息,相對於AdSense的簡體中文論壇人數已經有四千多人,繁體中文的支援論壇只能算是一個剛出生的小Baby。
Google AdSense支援論壇(繁體中文)
Google AdSense支援論壇(簡体中文)

2007年3月15日

在Blogger加入表格會出現空白列

然之間所遇到的一個問題,當你在Blogger的文章中加入表格時,如果照正常的html語法的寫作方式的話,會發現在表格之前無端的出現一大片的空白列,以我的測試用Blog為例:正常語法,該表格的html語法如下:

<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>


解決方法其實非常簡單,只要將表格的每一個標籤之間的空格全部刪除,如下:
<table width="200" border="1"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td>
</tr><tr><td> </td><td> </td><td> </td></tr></table>

就可以將多出來的空白列去掉了,修改後的結果

2007年3月10日

Blogger和Picasa已整合

然Blogger Buzz在3月8日就己經發佈這個消息,不過我一直沒時間去看看他所謂的整合是怎麼一回事,今天利用了一點時間看了一下,卻發現沒什麼改變,想了一下,決定把「語言偏好設定」改為“English(United States)”,再進去相簿看看。

沒想到“語言”這麼一改可不得了,想不到Blogger和Picasa的整合竟是這麼徹底,因為我之前在Blogger上傳的圖片,現在在Picasa全部找得到,這下子可不得了,有些圖片因為修改的關係,曾經上傳了3、4次,而在Picasa也有3、4張相同的圖片,不過還好Picasa的空間已經提高到1GB,所以不是得大的問題,只不過這下子又有新的事要處理了,要另外再找時間把重覆的圖片修掉。

2007年3月9日

有雜誌風格的Blog文章ⅡFor Internet Explorer

於我之前在有雜誌風格的Blog文章的方法在IE下顯示有問題,想要在IE顯示出這個效果,我想只有使用<span>再指定class。為什麼要用<span>呢?因為<SPAN>...</SPAN>所包圍起來的物件不會換行,這樣才會有我想要的效果出現。

方法如下:
1、加入以下css於]]></b:skin>之前:
.cap {
float:left;
color:white;
background:#00CCFF;
border:1px solid;
font-size:60px;
line-height:60px;
}

在這我只是在cap前多加了一個“.

2、編輯文章時第一個字要用<span class="cap">和</span>包起來。

其實這兩個方法差不多,只不過要打的字多了一些,我個人比較懶了一些,只好委屈一下用IE的朋友了,畢竟IE已經被我遺忘很久了。

2007年3月4日

Hacks In Lifetags:Read More

說我前幾天又開了一個Blog,之前曾思考過Josh's Note所要走的方向,是要走綜合路線呢?還是單純的就以Blogger的設計、修改等等的資源為主,幾經熟慮後,我決定以後者為未來Josh's Note的方向,所以又開了一個Josh's Lifetags,就是為了將二者的性質做區別。

Josh's Lifetags所使用的樣版正以我在The Blogger WorkShop所找到的樣版,主要是因為這個樣版沒有加入任何的Hacks,所以我可以邊動手加入邊在這邊做記錄,除了自己能做筆記之外,還能提供給剛接觸Blogger的朋友做個參考。

今天我先對“Read More”來做修改。

通常“Read More”可以分為二種,一種是將隱藏的文章段落直接展開,另一種連到該文章的頁面,為了比較這二種對於頁面載入的時間,所我決定將這二種一個一個加入,再決定要使用那一種。而載入時間的計算就使用FireBug這個Firefox的附加元件。

首先是直接展開的方法;參考文章:Blogger hack: Expandable posts with Peekaboo view

1、將下列程式加入</head>之前:
<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />

2、尋找下列的程式:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>

將紅色部份取代為
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
3、尋找<div class='post-body'>,在下方加入:
<b:if cond='data:blog.pageType == "item"'>
4、尋找<p><data:post.body/></p>在下方加入下列程式:
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

5、將文章段落想隱藏的部份用<span id="fullpost">和</span>包起來。

再來換連結的方法;參考文章:Blogger Beta 繼續閱讀功能改良

1、將下列程式加入</head>之前:
<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>

2、尋找<p><data:post.body/></p>,在下方加入:
<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>

3、將文章段落想隱藏的部份用<div id="fullpost">和</div>包起來。

接著來比較二者的差別:
直接展開:
連結:由上面二個圖可以發現二者載入所花的的時間其實差不多(載入時都有將暫存清除),由此可知,隱藏起來的段落還是有下載到Cache之中,但是就以文章的瀏覽的方便性來說,以直接展開的方式較為方便,因此我決定直接展開的方法來做為Josh's Lifetags的“Read More”功能。

另外Read More還有以外掛的方式,可以參考更勁爆的「超級無腦安裝Blogger外掛功能」,以及一個同樣是以外掛的方式,但是不需在文章編輯時加入特殊標籤,而是以文章的行數來自動隱藏,請參考[BLOGGER]繼續閱讀懶人加強版(for Blogger New) 最新版本 v1.4.1