星期日, 11月 12, 2006

用 webSnarp 在網頁上顯示小預覽圖

webSnarp 2.0 是個提供網頁預覽圖服務的網站,詳情請上該網站去了解... 底下有提供一些小玩具,可以在網頁上加上一些特殊功能,讓滑鼠經過連結的時候跳出該連結的預覽圖。

但是我試圖將它套用在 Blogger 上的時候,若是想在以前的文章上也套用該功能,就必須去修改之前的所有文章。想當然我沒那麼勤勞,所以就把其中 Link Preview V2 提供的 JavaScript 改了一下,放在這裡,有需要的人可以去下載來用。

不過有一點需要注意,因為是寫來套用在 Blogger Beta 上的舊文章的,所以我讓他掃描所有的網址,並依照一定的規則排除要跳出預覽圖的網址。詳情請見 websnapr.js 內的「excludeDomains」與「excludeExtensions」兩個變數。

這是適合 Blogger beta 的版本,請不要套用在其他地方。安裝的步驟如下:

  1. 這裡 下載 websnapr.tar.bz2
  2. 修改「websnarp.js」中的「myBaseURI」變數至您的網頁空間
  3. 將所有檔案放到自己網頁空間下,記得要放在同一個資料夾裡!
  4. 去 Blogger 範本中修改 html 的地方,找到 <title> 標籤,在底下插入: <style media='screen' type='text/css'>@import "[您的網頁空間]/websnapr.css";</style>
    <script src='[您的網頁空間]/websnapr.js' type='text/javascript'/>
最後,顯示出來的效果就像這樣