博客网 >

將圖示檔案上傳到可外連空間:

透過前面兩個服務,我們已經製作出了符合規格的Favicon圖檔(16X16的ico和gif),而如果你想在Blogger使用它,就必須先將圖檔上傳到一個可以外連的空間(可外連,才能讓你把圖檔連到自己的部落格使用),當然,這個空間必須支援外連時顯示ico和gif,而且提供的外連網址結尾也是ico、gif檔案名稱。

符合這些要求的「免費」空間服務裡,微軟的「SkyDrive」是很值得推薦的一個選擇。來到SkyDrive,按下﹝開始使用﹞。

favicon-07

申請註冊一個新的空間帳戶,或者使用你的MSN帳號直接登入,你就可以擁有5GB的免費網路空間

favicon-08

進入你的個人SkyDrive頁面後,你會在下方看到一個「公開資料夾」,表示放在這裡面的圖檔都是可以公開被其他人連結看到的。你可以在這個公開資料夾底下建立一個新的資料夾來專門存放部落格需要的圖檔。

favicon-09

進入其中一個公開的資料夾中,選擇上方工具列的「新增檔案」來上傳你的Favicon圖檔,我這邊分別上傳了剛剛製作的靜態ico檔案,和動態gif檔案。

favicon-10

上傳好需要的圖檔後,如何在SkyDrive裡面獲得可以外連的圖片網址呢?首先點擊某個圖檔,接著點擊上方工具列的「開啟」

favicon-11

這時候就可以獲得該圖檔的獨立顯示網址,例如:「http://....livefilestore.com/........./favicon.ico」。把這段網址先複製下來,等等要設定到Blogger的後台中。

favicon-12

 

在Blogger後台設定Favicon:

前面我們已經完成了圖檔設計、圖檔上傳,並且獲得了圖檔的連結位置,那麼接下來我們就是要把Favicon的圖檔連結加入到部落格後台中,讓你的部落格開啟時能夠被瀏覽器偵測到Favicon。

以Blogger為例,進入〔版面配置〕-〔修改HTML〕,我們可以在這裡自訂版面內容,包括加入Favicon的連結。不過在進行任何HTML的修改前,記得先「下載完整範本」,把你目前的範本備份下來,以後修改時不小心發生錯誤,才可以透過重新上傳來還原。

favicon-13

接著就是最後的步驟了,我們必須把Favicon的圖檔連結加入HTML當中,加入的語法如下

<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon'/> 
<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>

以電腦玩物使用的Favicon為例,就會寫成這樣:

<link href='http://ki6xfa.blu.livefilestore.com/y1pCUPmfVpzKvuusmZL6f-oxV17ai-K-HGGBZ2oT0MdQPpgbW_RAgpgcUb9k8WmOvec139CAyYAwn8/favicon.ico' rel='shortcut icon'/> 
<link href='http://ki6xfa.blu.livefilestore.com/y1pwcZjamU1G8HTc1oGGnssEoPE0mA0WOMl1OOhsVR2xZDRqWg6mvzLsHoK6dvWuBAIAOmo0xA_Ch8/favicon.gif' rel='icon' type='image/gif'/>

把上面兩段語法加入到HTML範本內容裡的<b:include data='blog' name='all-head-content'/>之後,</head>之前(最好直接放在</head>之前)。

附註:原本是加在範本內容的<head>和</head>之間就可以,但是從昨天開始(2008/10/23)在Blogger中如果favicon程式碼跑到<b:include data='blog' name='all-head-content'/>之前,在瀏覽器中就顯示不出你的Favicon。

favicon-15

讓我們進一步解釋兩段語法的功能:

<link href='剛剛獲得的ico圖檔連結' rel='shortcut icon'/> 
<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>

假設你只想要使用靜態的ico圖檔,那麼只要加入第一行<link href='剛剛獲得的ico圖檔連結'rel='shortcut icon'/>這段程式碼就可以了,這樣你的部落格在所有的瀏覽器中都可以顯示出Faviocn。記得圖示檔案的格式必須是「ico」,這樣使用IE的用戶才能看到你網站的圖示。

而如果你想使用動態的gif圖標,那麼就還要再多增加第二行<link href='剛剛獲得的gif圖檔連結' rel='icon' type='image/gif'/>這段程式碼,這樣Firefox瀏覽器就能讀取到Gif動態檔案,能夠在網址列、書籤當中看到動態的圖示,不過並非所有瀏覽器都支援顯示Gif檔的Favicon,所以記得先添加第一行的程式碼。

完成上述動作後,儲存你修改過的範本,重新開啟瀏覽器來讀取你的部落格,就可以看到網址列、書籤上出現網站的專屬圖示囉!(via)

<< 我为游戏狂 / Dell XPS One推出,配... >>

专题推荐

不平凡的水果世界

不平凡的水果世界

平凡的水果世界,平凡中的不平凡。 今朝看水果是水果 ,看水果还是水果 ,看水果已不是水果。这境界,谁人可比?在不平凡的水果世界里,仁者见仁,智者见智。

中国春节的那些习俗

中国春节的那些习俗

正月是农历新年的开始,人们往往将它看作是新的一年年运好坏的兆示期。所以,过年的时候“禁忌”特别多。当然,各个地方的风俗习惯不一样,过年的禁忌也是不一样的。

评论
0/200
表情 验证码:

大笨熊

  • 文章总数0
  • 画报总数0
  • 画报点击数0
  • 文章点击数0
个人排行
        博文分类
        日期归档