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>

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

AdSense繁體中文支援論壇

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

Google AdSense支援論壇（繁體中文）
Google AdSense支援論壇（簡体中文）

在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>
就可以將多出來的空白列去掉了，修改後的結果。

Blogger和Picasa已整合

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

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

有雜誌風格的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已經被我遺忘很久了。

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。

來取一個有Web 2.0味道的名字吧!

處於Web 2.0的時代，凡事都要有Web 2.0的痕跡；我之前在Ajax Loading Gif 線上產生器所介紹的網站，它在Banner上面有加上一個“BETA”的圖樣，旁邊還註解：「Hay! This Service is Web 2.0」，除了加上“BETA”字樣之外，最好還要有圓角的按鈕，就像我在更勁爆的「超級無腦安裝Blogger外掛功能」中所使用的一樣，另外再取一個有Web 2.0味道的名字也不錯喔！

Web 2.0 Name Generator就是一個線上名稱產生器。看看下面的列表，是不是有Web 2.0的味道：

• Yanu
• Topicfly
• Blueopia
• Taba
• Realclub
• 23storm
• Vimia
• Yojo
• Twiyo
• Digibridge
• Voovee
• Flipware
• 42bridge
• Zazu
• Mybird
• Chatshots
• Truva

還沒想到好的名字，到Web 2.0 Name Generator來找一個吧！