2006-12-25

在 Blogger 裡加入 Google AdSense

Google AdSense 推出繁體中文版後,付款方式也可以使用小額的美金支票,友人加入 Google Adsense 也因此增加了一點不無小補的收入,我看了自己的 Counter,這樣的訪客流量應該也可以玩一下吧!所以也去申請了。過兩天果然接獲通知申請成功,馬上拿自己另外一個測試的 blog 來玩,搞定!接著就正式安裝起來。三種類型我都有裝:AdSense for Content (直接顯示圖文廣告)、AdSense for Search (透過搜尋置入廣告)、以及 Google 推薦 (推薦 Google 的相關產品),彈性很不錯,置入廣告並不會和自己的 Blog 版型樣式有什麼衝突,根據 AdSense 產生的程式碼我還是有稍作修正,準備要正式開張斂財囉!

我做的修改有兩個特別的地方:首先,我用 AdSense for Search 取代部分我原來的搜尋元件(本來只有 SiteSearch,現在不但結合廣告,還多了原 Google 的網站搜尋,這真是一舉數得!不過再強調一次,找不找得到內容端看 Google Search Engine 有沒有 cache 你的 page,不要再問我為什麼搜尋引擎找不到自己的文章了),接下來另外拉一個獨立的網頁元素(Page Element),裡面就只貼廣告的 Javascript,搞定!不過因為我愛用 Firefox,內建的 Adblock Plus 會把 AdSense 一併自動地檔掉,所以自己用 Firefox 看這個模組會空有標題卻空無一物,有點奇怪,既然愛用 Firefox 就順便替它做廣告吧!因此放上推薦下載的官方 Logo,即使 AdSense 的廣告被擋光,該模組裡面還是有東西,看起來就不會突兀囉!想和我一樣裝 AdSense 的可以參考類似的作法。

首先,我把原來的 Google SiteSearch 程式碼改成下面(僅供參考,如果整個剪貼抄去的話就是替我賺錢喔),比起之前的 SiteSearch 更多一點彈性(Web Search + Blog Search,還可以自訂高度 50 pixels 或 100x100 的 Logo!我儘量不改 AdSense 給我的原始碼,有需要也可以套用一些 CSS style):

<!-- SiteSearch Google -->
<form action="http://www.google.com/custom" target="_top" method="get">
<input value="abintech.blogspot.com" name="domains" type="hidden"/>
<label for="sbi" style="display: none">輸入您的搜尋字詞</label>
<input maxlength="255" id="sbi" value="" name="q" type="text"/>
<input id="sbb" value="搜尋" name="sa" type="submit"/>
<label for="sbb" style="display: none">提交搜尋表單</label>
<input id="ss0" value="" name="sitesearch" type="radio"/>
<label for="ss0" title="搜尋網頁"><font color="#ffffff" size="-1">Google</font></label>
<input id="ss1" checked value="abintech.blogspot.com" name="sitesearch" type="radio"/>
<label for="ss1" title="搜尋 abintech.blogspot.com"><font color="#ffffff" size="-1">This Blog</font></label>
<input value="pub-2957923128429638" name="client" type="hidden"/>
<input value="1" name="forid" type="hidden"/>
<input value="big5" name="ie" type="hidden"/>
<input value="big5" name="oe" type="hidden"/>
<input value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof" type="hidden"/>
<input value="zh-TW" name="hl" type="hidden"/>
</form>
<!-- SiteSearch Google -->

接下來我拉了一個廣告推薦模組 (RECOMMEND + AD),裡面 Firefox 的圖從這裡來的,不過連結我指向了台灣 Mozilla,接著貼入 AdSense for Content 的 200x90 五欄的文字廣告,另外再拉兩個 Google 推薦:附加 Google 工具列的 Firefox 以及宣告本網站透過 AdSense 增加收益的連結(程式碼 step by step 就會產生),打完收工,這樣就搞定了!不過以我的訪客數量,不知道要多久才能收到支票呢~(好心的大爺們,沒事多來我的 Blog 晃晃吧~)

延伸閱讀:
孤狗大神變財神?(Google AdSense懶人包)

回應: 1

 

2006-12-15

在文末加入文章訂閱圖示

在預設的版型裡,每篇文章的結尾處,都可以透過管理介面去設定文章格式和功能(動作:版面配置->網頁元素->Blog 文章區塊->修改),像是文章的發表時間、要不要顯示作者、回應,或是一些項目的顯示用詞(comment->意見or回應),另外,還有兩個有圖示的功能:快速編輯(管理者用的)、郵件發佈連結(透過 email 轉寄該文章內容)。現在各種網路書籤的服務大行其道,能不能一樣加入一些圖示供讀者訂閱或收錄自己 Blog 的文章,最好還可以和系統版型的圖示整齊地擺在一起呢?網站的收錄(訂閱 Feed 或是加入"我的最愛"書籤)比較簡單,畢竟 Feed URL 或是網站網址都是固定的,直接寫死連結就好,但是文章的訂閱牽扯到該篇文章的「永久連結」,這一定要發表文章後才會產生的網址,這時候透過 Blogger 的 Hack 才能做到了。

首先瞭解一下版型這部分的程式碼。打開範本的 HTML 程式碼(要展開 Widget 範本),找下面這一行:

<span class='post-icons'>

顧名思義,在這個<span>標籤裡面定義的是文章相關的圖示,這一行下面,會看到關於 email post links(郵件發佈連結)或是 quickedit pencil(快速編輯)的原始碼定義,我們要做的就是在這些圖示後面加入能訂閱文章的圖示,同屬於 post-icons 的區塊中。

步驟很簡單,首先,因為我想讓圖示都靠右,而且連結不會出現底線,因此先自訂 span.post-icons 的 style (有些範本預設沒定義)。接著仿造系統的圖示的定義方法(預設系統圖示定義的樣式表請參考這裡,參考 .email-post-icon 的 Style),在範本裡 CSS 的區段內再加入這些小圖示的 Class 定義,程式碼如下:

/* Adjust post footer*/
span.post-icons {
  float: right;
}
span.post-icons a{
  text-decoration: none;
}

/* Post footer icons*/
.HemiDemi-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-HemiDemi.gif") no-repeat left;
   padding: 8px;
}
.funP-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-funP.gif") no-repeat left;
   padding: 8px;
}
.delicious-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Delicious.gif") no-repeat left;
   padding: 8px;
}
.Technorati-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Technorati.png") no-repeat left;
   padding: 8px;
}
.Top-icon {
   background: url("http://abinlee.link.googlepages.com/Icon-Top.gif") no-repeat left;
   padding: 8px;
}

從上面可以看到,我有五個小圖示(16x16),其中四個分別是用來加入 HemiDemi (黑米共享書籤), funP (推推王), Delicious, Technorati 四個書籤服務(HemiDemi 和 funP 是中文的),最後一個是利用 Javascript 讓閱讀的頁面跳到整個頁首,以上用到的圖片和參數要自行調整。

接著是重頭戲,貼入顯示圖示和連結的程式碼到文末去。先找到上面提到的那一行: <span class='post-icons'>,安排圖示的順序,像自己想看到的效果是:在首頁只顯示快速編輯和跳到頁首的圖示,當使用者點入特定文章的完整連結,才出現訂閱的圖示。所以在標籤 <span class='post-icons'> 和 <span> 之間,用下面的程式碼取代:

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

<b:if cond='data:blog.pageType == "item"'>

  <!-- email post links -->
  <b:if cond='data:post.emailPostUrl'>
    <span class='item-action'>
    <a expr:href='data:post.emailPostUrl' title='Email Post'>
      <span class='email-post-icon'>&#160;</span>
    </a>
    </span>
  </b:if>
 
  <!-- Bookmark icons -->               
  <a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&amp;url=" + data:post.url' target='_blank' title='Add to HEMiDEMi'>
    <span class='HemiDemi-icon'>&#160;</span>
  </a>
  <a expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url + "&amp;s=" + data:post.title + "&amp;via=tools"' target='_blank' title='Add to funP'>
    <span class='funP-icon'>&#160;</span>
  </a>
  <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Add to Delicious'>
    <span class='delicious-icon'>&#160;</span>
  </a>
  <a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank' title='Add to Technorati Favorites'>
    <span class='Technorati-icon'>&#160;</span>
  </a>
</b:if>

<a href='javascript:scroll(0,0)' title='Top of this page'>
  <span class='Top-icon'>&#160;</span>
</a>

搞定!所以在該文章的固定連結裡顯示完整文章的時候,最多會出現七個圖示(其中四個是書籤訂閱),而在首頁裡最多兩個圖示,分別是快速編輯和跳到頁首。(註:像 data:post.url/data:post.title 這種變數和前後 '+' 的空白不能刪掉,砍掉會有奇怪的錯誤發生。)沒有你要的書籤服務?可以參閱下面 Angelo 的文章,作者很用心地整理了大部分坊間有提供類似服務的程式碼喔~

參考文章:
各大共享書籤代碼

更新:
2007/05/31 - 更改順序,拿掉 MyShare 的圖示,並取代成另外一個當下流行的 funP 「推推王」。

回應: 8

 

調整 Post footer 的回應連結

在首頁每篇文章的文末都會顯示目前回應(迴響、意見...就是 Comment)的數量,這些文字一併附連結讓讀者可以發表意見。不過習慣一些中文 Blog 系統的讀者常常一時找不到:「哪裡可以發表意見啊」,殊不知要去點那個有數字的「連結」,或是跳轉完整文章再看文末才會有「張貼意見」的字樣。我做的「小手術」只是把「張貼意見」的字樣特別拉出來,並加上圖示,讓讀者能比較容易找到發表回應的地方。

Blogger 裡面因應多國語文有很多顯示的字串都是定義成變數,不同語系字串之間比較容易轉換顯示,可惜並不是所有的字串變數都能讓使用者去更改和定義。舉例來說,就 comment 這個 term,變數名稱是:<data:top.commentLabel/>,西方語系裡還有複數型:< data:top.commentLabelPlural/>(應該就是加 's' 吧),在中文裡這兩個變數顯示的字串應該一樣,也讓使用者能自行定義(看是要叫它"回應"還是"意見"隨便你)。但是上面說的「張貼意見」字串也是變數: <data:postCommentMsg/>,但是使用者就沒有地方可以改它的對應中文字串囉!而在調整回應連結的時候,我也希望儘量少 hard code 中文進去,最好使用這類的既有變數才有彈性。因此改完範本以後會發現,在區塊裡面多了類似「張貼意見」的中文,但是更改的程式裡面卻沒有用到 hard code 的中文字喔!

原來的程式碼應該只有下面短短幾行:

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
  </b:if>
</span>

意思是:如果停留在首頁的時候,而且允許讀者能自由回應的狀態下,顯示發表回應的介面連結。如果回應數量是 1 則顯示回應的單數量詞,否則顯示複數的量詞(真怪,把程式翻譯成一段話)。我的調整是把以上這段 <span> 標籤內的內容,取代成下面的程式:

<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
     <span class='comment-link'>|</span>
     <span class='comment-link'><data:top.commentLabelPlural/>:</span>
      <b:if cond='data:post.numComments == 0'>
        <span class='comment-link'>0</span>
      <b:else/>
        <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <data:post.numComments/></a>
      </b:if>
    </b:if>
  </b:if>
</span>
<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:post.allowComments'>
    <span class='comment-link'>|</span>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img src='http://abinlee.link.googlepages.com/Icon-Comment.gif' border='0'/> <data:postCommentMsg/></a>
    </b:if>
  </b:if>
</span>

解釋一下,首先我加了 '|' 當作每項資訊的分隔符號(套用 class='comment-link' 是為了版面整齊),接著我把原來回應的格式:「1 回應」改成「回應: 1」,用的是複數型變數,即使是英文版型應該也不會很奇怪,最後多加了「張貼意見」的字串變數,並且在前面貼了一個小圖示,這樣讀者想發表回應的時候,是不是更直覺清楚,也很容易找到呢?

回應: 35

 

2006-12-14

在版面格式中放入小圖示

在 Hack Blogger 的過程中,改版型和調整範本的時候發現,原來放圖片貼圖示也是很有技巧的。舉例來說,文章裡面我們想貼圖,大多直接用標準的 HTML 語法,像是這樣的標籤: <img src="網址">,最多加一些參數調整。可是呢,很多的項目在 Blogger 裡面被模組化,定義在特定的 Class 或 ID 裡面,就不能用 <img> 這個標籤了。後來研究偷看到 Blogger 的系統圖示在 CSS 裡的定義方式,喔~原來是這樣,他用背景圖和 no-repeat 參數來貼圖示,而且還可以微調圖片的位置,CSS 還有模組化的好處(而且也沒辦法另存新檔偷你的圖示),實在是學到了啊!利用上述技巧替 Blog 版面格式的一些項目加些圖示吧!(整理如下,每個人的版型不同,以下程式並不一定都適用)

首先,在每篇文章的發表日期前面加上小圖示:

h2.date-header {
  margin: 0;
  padding: 0 0 0 15px;
  background: url("http://abinlee.link.googlepages.com/Icon-Date.gif") no-repeat 1px 2px; 
}

Sidebar 上不是會有一些條列式的項目嗎?在這些項目前面加上一個小圖示,條列起來更整齊更一目了然:

.sidebar li {
  margin:0;
  line-height:1.5em;
  background:url("http://abinlee.link.googlepages.com/Icon-Bullet.gif") no-repeat 3px .45em;
  padding:0 0 5px 15px;
}

個人 Profile 的連結一樣可以動手腳,在連結前面加一個圖示:

.profile-link {
  font: normal normal 82% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 0 0 15px;
  background: url("http://abinlee.link.googlepages.com/Icon-Profile.gif") no-repeat 0 0;
}

以上整理,如果要放到 CSS 的版面圖示,要用類似上面的方法來做才有彈性。好,那如果文章裡面的貼圖也想搞花樣呢?那還是要搞 <img> 標籤了。我舉自己的例子,像我想在文章的貼圖裡自動加線框,並保留一點點文繞圖的空間,範例如下:

.post-body img {
  padding:4px;
  border:1px solid #333333;
}

回應: 25

 

2006-12-13

幾個網頁跳轉的技巧

透過簡單的幾行 Javascript,就可以讓你的 Blog 文章在瀏覽版面的時候有更多彈性,這裡整理幾種方法:

1. 上一頁 (Previous page)

<a href="javascript:history.back()">Previous page</a>

也可以用這種:

<a href="javascript:history.go(-1)">Previous page</a>

裡面的數字 "-1" 如果改成 "-2", "-3" 之類的,就代表是要回到前兩頁、前三頁~

2. 下一頁 (Next page)

<a href="javascript:history.forward()">Next page</a>

同上,一樣可以改成:

<a href="javascript:history.go(1)">Next page</a>

3. 跳回頁首 (Top of page)

<a href='javascript:scroll(0,0)'>Top of Page</a>

就程式上來看的意思。要求瀏覽器自動往上捲,捲到絕對座標是 (0, 0) 頁首的位置

4. 跳回文首 (Top of post)

這個比較複雜,因為程式本身如果沒有處理的話,並沒辦法知道每篇文章的文首在哪裡。一般來說,每個文首的地方應該要有識別的標籤,像是 Post-ID,然後透過 Javascript 去找到該物件,讓捲軸捲到文首去,語法大致如下:

<a onclick='"javascript:document.getElementById(\"post-ID\").scrollIntoView(true);"' href='javascript:void(0);'>Top of Post</a>

中間那個 Post-ID 要自己搞定。如果是要用到 Blogger.com 上面,要改成這樣:

<a expr:onclick='"javascript:document.getElementById(\"post-" + data:post.id + "\").scrollIntoView(true);"' href='javascript:void(0);'>Top of Post</a>

只要把以上代碼塞到文末,或是頁尾,在瀏覽文章的時候頁面的跳轉就可以很方便了。(當然,前提是瀏覽器要打開對 Javascript 的支援)

參考文章:
網站建置百寶箱:上頁下頁
Blogger beta:"Top of Page"、"Top of post"

2006-12-11

計算網站開張天數

以下這段 Javascript 程式,用來計算特定時間與今天的差距,先抓出使用者電腦的時間,去和指定的時間做計算,最後在格式化成中文的年月日表現方式。原程式是英文的,改成中文版的人並不用心,沒有把程式最佳化一下,只把文字中文化,因為英文有複數要加 s 的問題,中文沒有,所以我就把程式改短一點,拿掉沒有用的判斷。放到 Blog 裡面,設定的指定日期只要是你寫第一篇 Blog 的日子,就可以拿來顯示 Blog 已經開站幾天了。

這一段是宣告定義的部分,可以放在最前面:

<script language="JavaScript">
//<![CDATA[
function HowLongSince(startyear, startmonth, startdate) {
  var DaysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  var today = new Date()
  var thisyear = today.getFullYear();
  var thismonth = today.getMonth();
  var thisdate = today.getDate();
  mstart = new Date(startyear, startmonth, 1);
  mend = new Date(thisyear, thismonth, 1);
  ydiff = thisyear - mstart.getFullYear();
  mdiff = thismonth - mstart.getMonth();
  days1 = (mstart - new Date(startyear, startmonth - 1,startdate))/(24*60*60*1000) - 1;
  days2 = (new Date(thisyear,thismonth,thisdate) - mend)/(24*60*60*1000) + 1;
  dayst = days1 + days2;
  if (dayst >= DaysInMonth[startmonth - 1])  {
    mdiff += 1;
    dayst -= DaysInMonth[startmonth - 1];
  }
  if (ydiff == 0 && mdiff == 0 && dayst == 0)
    message = "今天";
  else {
    if (mdiff > 11) { mdiff = 0; ydiff++; }
    if (mdiff < 0) { mdiff = mdiff + 12; ydiff--; }
    message = (ydiff != 0 ? ydiff + " 年" : "");
    message += (mdiff != 0 ? " " + mdiff + " 個月" : "");
    if (ydiff != 0 && mdiff != 0) message += "又";
    message += (dayst!=0 ? " " + dayst+" 天" : "");
  }
  return message;
}
//]]>
</script>

當要呼叫使用的時候,以下是使用的範例:(紅色的部分自己改日期)

<p>Established:
  <script language="JavaScript">document.write(HowLongSince(2006,11,3)); </script>
</p>

其他應用,可以用來倒數特定日子的到來、或是提醒紀念日,彈性就根據個人需要來調整囉!

回應: 15

 

2006-12-06

雜記 Blogger Beta 相關服務

玩 Blogger Beta 一陣子以來,越來越覺得它是個很有彈性的東西,不只是本身提供的功能,另外就是擴充性(Hack)以及其他工具的整合性,幾乎不比自己架站差了。不過也因為支援的工具太多,我也一直試圖去找適用我使用習慣的 Blog 流程,到此為止,差不多算是定案了,因此,在這邊整理並分享一下。

首先,因為 Blogger 的編輯介面有夠差,尤其所謂的 WYSIWYG 的工具,總自以為是地要幫我轉換換行<br>,如果我要剪貼程式碼,那根本就是爛給你看。所以,我在 Blogger 的發佈介面只開啟 HTML 的原始碼模式,別的地方寫好後再貼原始碼過來。而我使用的編寫工具,是 Writely,現在改名叫 Google Docs & Spreadsheets。雖然它也有一點點問題,就是為了編寫版面好看原始碼會塞一些空白進去,不過這樣不會影響版面和內容,這個線上文書編輯器用來寫 Blog 超好用,我在其他 Blog 也都是用這個當記事簿來寫。過程很簡單,就打字->排版(包括貼圖、塞連結、改格式)->切換到 HTML->貼入原始碼,後來又發現原來 Google 這個線上工具也支援直接發表到 Blogger Beta,實在太讚了(還是有小問題,就是標籤裡的格式 ID 會被濾掉),除了整合發表外,另一方面也可以拿 Writely 來做 Blog 文章備份,真的是好用!我也評估過用 FireFox 的 Plugin: Performancing、或是 M$ 的 Windows Live Writer,分別也都支援了 Blogger Beta,不過,說穿了他們都是離線編輯器,Performancing 也有自動轉換 <br> 的問題,最後還是棄之不用。

解決了文字編輯的問題,那圖呢?Blogger 提供的文章內圖片插入上傳是很簡單,但是圖片一旦上傳後不能管理也不能拿掉,最糟糕的是還會被動手腳(改檔名、壓縮),這並不是個好的方案。一開始我仿照別人的作法,把一些小圖放到我 Google Pages 的空間去,不過隨著未來圖片變大變多,用 Google Pages 來放也不是長久之道,因此我拆開來,我另外開通了 Google Picasa Web Album 服務,可以開相簿讓我整理大一點的圖片(缺點:只能放 .jpg),另外,在 Google Pages 上另外再開一個新網站(一個帳號多個網站的功能),專門用來放小圖(不限格式)和連結檔。聽起來很複雜喔!明明是一個 Blog 服務,為什麼編輯排版另外用一套、放小圖連結用也一套、放照片大圖又另一套?其實這些個服務都是 Google 的,一方面各有所長,也都有其便利性,當然穩定性也還值得信賴,在沒有更好的整合性 Solution 之前,我還是會這樣用下去的。(分久必合、合久必分?)

以上很多的評估動作消息來源都是來自 Angelo 的 Blog ,參考的連結如下:
Google Docs 可 Publish to Blogger Beta
如何快速加入Blogger Beta 到 Windows Live Writer
[FireFox 附加元件]Blog離線編輯工具 Performancing

回應: 6