此次更新增加了iPlay99在二次改版中，為了找尋適用的 Blogger template（中文則稱為模版、樣版或範本），四處搜尋而找到的一些不錯的下載網站，而在搜尋過程中，也發現到有很多新款的 Blogger範本的設計相當的別出心裁，希望看完本文，你可以找到自己喜歡的範本，打造自己心目中的 Blogger 喔！

另外，有一點必須注意的是，模版有分很多種：For website、For Blogger、For WordPress Blog…等等，本文的連結皆已連到 For Blogger/BlogSpot 的目錄裡，如果你自己逛時，記得要確認檔案合不合適喔。

在文章最後附上Blogger template xml檔案的使用教學，初學者一定要看喔。

更新誌：090207更新，新增了 8 個下載酷站！

本站「iPlay99線上玩樂誌-Blogger 站」改版歷史（所使用的 Blogger template）

1. 羊男MetaMuse - 三欄式 3 column 模版Gadget
2. Geckoandfly - Andreas04
3. OurBLOGGERTemplates - 某個三欄式範本
4. iPlay99於2009-3月搬至 wordpress，blogger template就暫停更新囉

Blogger template註解說明

• 個人評比：★★★★★，以iPlay99個人觀感評定網站所提供範本的品質高不高，及搜尋介面的便利性所得到的綜合評分，這個分數僅供參考
• 有、無直接預覽圖或demo：該網站是否在文章清單即有提供範本預覽圖片，而不用花時間點入文章內頁才能看到內容，畢竟這影響到讀者在搜尋的方便與否
• 有、無提供Tag分類：該網站是否有使用 tag標籤來進行分類，像 iPlay99一開始找都直接找「3 Coloums（3欄式範本）」的分類，對於要找特定類別的Blogger範本的人十分有幫助

推薦酷站 No.1：Btemplates

• 個人評比：★★★★★★
• 有直接預覽圖；有提供Tag分類
• 說明：這個網站應該算是第一個專業導向的 Blogger template 供應網站，而且它的介面也特別設計過，如同展示櫥窗一般，讓讀者能相當方便的瀏覽所有的 Blogger 範本外觀，並予以評分，你一定可以相當輕鬆自在的找到你想要的 Blogger template！

Made in Spain Demo site | Download

Notepad Chaos Demo site | Download

推薦酷站 No.2：eblog templates

• 個人評比：★★★★★★
• 有直接預覽圖；無提供Tag分類，但有高分推薦、高下載數量推薦兩種模式
• 說明：eblogtemplates，一個iPlay99覺得有與 Btemplates一拼實力的網站，它提供Blogger 與 Wordp兩平台的高品質範本，不論是在數量、品質、讀者操作上都相當棒，而且在各 Blogger 範本介紹頁面裡，也註明了該範本所具修的特點，例如下拉式選單…等，另外該站除了提供樣版，也有許多blog的技術文章，iPlay99強烈推薦！

Blogging Pro Template Demo site | 部份高品質範本欲下載者需在該網站免費註冊

iWork Template Demo site | Download

推薦酷站 No.3：Blog and Web

• 個人評比：★★★★★
• 有直接預覽圖；無提供Tag分類
• 說明：這個站是葡萄牙文的網站，它算是一個綜合站台，除了提供很漂亮的範本之外，也有許多關於經營部落格的技術教學文章，有興趣的一定要試試。

這裡有Google 線上翻譯所翻的英文版本：Blog and Web英文版本

O2 Demo site | Download

Smashing Demo site | Download

Blogy-columnas Demo site | Download

Simpress2 Demo site | Download

推薦酷站 No.4：BlogCrowds

• 個人評比：★★★★★
• 有直接預覽圖；有提供Tag分類
• 說明：這個站所蒐集的模版風格上都比較偏向傳統、中規中矩的感覺，不過在品質上都蠻不錯的。

Marinee Demo site | Download

推薦酷站 No.5：OurBLOGGERTemplates

• 個人評比：★★★★★
• 有直接預覽圖；有提供Tag分類
• 說明：OurBLOGGERTemplates這個站所提供的網站都是原創的，範本的列出方式還蠻豪邁，直接給你一堆預覽圖看，此外在tag標籤分類上也相當仔細，在尋找上會方便許多，但是沒有提供 demo site，而是以大張的圖片顯示網站細節。iPlay99二次改版的範本就是從這個站取得的。

Columnus Demo site | Download

推薦酷站 No.6：Falcon Hive

• 個人評比：★★★ ★
• 有直接預覽圖；無提供Tag分類
• 說明：Falcon Hive這個站提供一些自製或是由Wordpress等其它平台改寫而來的Blogger template，品質與美感都有一定的水準，而且網站上也提供一些 Blog 技術性的文章。

Alpha Demo site | Download

推薦酷站 No.7：GeckoandFly

• 個人評比：★★★★
• 有直接預覽圖；無提供Tag分類
• 說明：GeckoandFly這個站它提供的範本數量並不多，但是由於它本身的範本被 Blogger／BlogSpot 採用做為基本範本，因此在文件架構上算是最不易出錯的，而且其中幾個Blogger template 的評價也相當的高。

K2 Demo site | Download

推薦酷站 No.8：Jackbook

• 個人評比：★★★★
• 無直接預覽圖；無提供Tag分類
• 說明：Jackbook的站長他會固定釋出由Wordpress等其它平台改寫而來的Blogger template範本，品質具有一定水準，該站除了提供樣版，也有許多blog的技術文章。

itheme Demo site | Download

一般Blog皆適用的外掛教學：影音多媒體播放、聊天等

Blog Tips - embed flash 張貼 flash 的語法

MyFlashFetish - 簡單取得快速分享 Flash Mp3 Player 使用教學

Twitter的有趣玩法 - Twitter balloon

五種Email、網路服務小貼紙產生器Generator

一般Blog皆適用的參考文章：RSS訂閱、分析流量相關

Blog SEO - 替自己的 blogger 設定 sitemap網站地圖

寫Blog的必備工具 - Feedburner的使用導覽筆記

Blog Tips - RSS Feed 訂閱處理方式

Blog Analytics - 幫自己的部落做統計分析

部落格上的創用CC授權Creative Commons介紹

Blogger Template專用模版下載連結

Blogger template 專用模版下載讓你抓不完及使用教學

Blogger 語法解說、參考文章

Blogger改造 - 入門介紹及前置動作

Blogger - 啟動「加入網頁元素」功能的語法

Blogger - 版面配置的網頁元素標記widget說明

Blogger Hacks：Blogger的專用修改，替Blogger 增加功能、美化、優化等。

Blogger Hack - 替文章加上「繼續閱讀Read More」功能

Blogger Hack - 增加FunP/黑米(HEMiDEMi)推文按鈕

Blogger Hack - 自訂活動的網址列圖示favicon

Blogger - 快速編輯Quickedit與郵件轉寄EmailPost消失了？

Blogger Hack - 讓側邊工具列sidebar可以展開摺疊

Blogger Hack - 回到最上層

Blogger Hack - 在部落格中加上書籤訂閱貼紙

Blogger 美化 - 近期文章/文章標籤超連結以區塊形式變色

Blogger - 近期文章 (Recent Posts)要用哪個

Blogger Hack - 在文章中貼上程式碼code範例

Blogger - 還原 widget 的修改設定功能quickedit

Blogger Hack - 連結提示圖示

Blogger CSS - 首字變大的效果

funp 的標籤：blogger hacks tutorial，教學文章，feedburner，rss，analytics

Technorati 的標籤：blogger hacks tutorial,教學文章,feedburner,rss,analytics

雖然天底下沒有不透風的窗，但是畢竟小老百姓只是把上網衝浪當成休閒活動，文筆也不及專業作家，東湊西湊，「拼」好了一篇文章放在自己的網站或作業裡上自嗨，似乎也無傷大雅～

註：講得應該夠隱晦了吧…

遙想當初，三千六百萬年前，還在讀書的時候，寫報告還不就是上網去 Google ，要多大本有多大本…而我很懷疑現在有幾個學生是親自打出學術性報告的…嗯，比例原則…

不過，再換個角度想想，因為網路的便利性愈來愈明顯，上網「看似可借用」的資料一大把，但對方或第三者「發現」你「不告知而借用」的機會也相對提高。

• 老梗：情色網站指控Google侵犯圖片版權
• 範例一：人氣妹性感照 e再被盜用
• 範例二：吳淡如否認抄襲 蔡祐吉要社會公論

而且，Blog AD服務的興起，「不小心部份採用」這個行為似乎…嗯…這檯面下再說吧

咳…嗯…話題結束，進入正題

一般來說，網路上最常見到的創用 CC ─ Creative Commons授權圖示如下：

「姓名標示─非商業性─禁止改作 2.5 台灣版」的網頁標示圖片

http://creativecommons.org/licenses/by-nc-nd/2.5/tw/

這張圖片它意味著：

您可自由：

• 分享 — 重製、散佈、展示及演出本著作

惟需遵照下列條件：

• 姓名標示. 您必須按照作者或授權人所指定的方式，表彰其姓名；但不得以任何方式暗示其為您（或您使用該著作的方式）背書。
• 非商業性. 您不得為商業目的而使用本著作。
• 禁止改作. 您不得改變、轉變或改作本著作。

如果你覺得上述的授權方式不符合你的需求，也可以看看底下這幾個，找一個適合自己作品的授權方式去用吧：

：姓名標示 2.5

：姓名標示─非商業性 2.5

：姓名標示-非商業性-相同方式分享 2.5

：姓名標示-非商業性-禁止改作 2.5

：姓名標示-相同方式分享 2.5

：姓名標示-禁止改作 2.5

其它相關的檔案及資料可以看這裡：

創用CC標示圖形介紹：這裡列出了你「網頁標示圖」裡看到的圖樣，及其意義說明。

創用CC核心授權：這裡你可以查詢創用CC授權在其它媒體上宣告形式，及音樂宣告、文字宣告、圖檔宣告的下載

其實，如果你是個守法的好國民，好學生、好孩子、好職員、好……你上網去衝浪，然後你想在自己的部落格當中寫篇玩樂心得文，你可以在你的落部格上加上自己認可的創用 CC ─ Creative Commons授權，讓別人知道你的分享型式，當然你以後想「借用、採用別人著作」時，也別忘了詢問一下對方的意見，告知一下。

前言：之前在

Blog Tips - embed flash 張貼 flash 的語法

文章當中講到了在 blogger上張貼 flash 的語法使用方式，不過沒有說到要如何張貼使用Flash Mp3 Player的方法，現在就來說明。

在網路上尋尋覓覓，好用漂亮的Flash Mp3 Player 蠻多都要收費的，免費的像知名的JW flash mp3 player ，好用但是外觀只有一種，又覺得有點可惜，所幸托 web2.0 的福，現在想要自訂一個漂亮的 Flash Mp3 Player 已經不是那麼的難了

本文主要講的是透過線上網站所提供的服務，使用者僅需要上傳 mp3音樂檔案，接著再將連結網址複製貼上，即可輕鬆產生張貼語法，快速分享，不需要去搞啥 xml playlist 之類的東東。

本文所要介紹的網站

• MyFlashFetish：它提供十幾種 Flash Mp3 Player 面板以供選擇，而且還可以自訂顏色，讓你的 Flash Mp3 Player 不再與別人長得一樣，也方便與部落格配色做搭配。 (可以自訂顏色我覺得很讚，這是其它同類型網站較少看到的功能)

MyFlashFetish 的 Flash Mp3 Player 使用教學：

1、註冊：

請先點擊 Sign Up 進行註冊，它的註冊很簡單，資料填一填就立即可用了。

使用信箱登入後，就可以新增自己的 Flash Mp3 Player 了

2、挑選面板

MyFlashFetish 提供十多樣 Mp3 Flash 播放器面板供選擇，而每個播放器的旁邊都會註明可否自訂顏色外觀（Custom colors）或是顯示歌曲播放清單（Playlist view），按 Create Now 建立。

3、播放清單 - 自訂上傳或搜尋新增：

如果你沒有 Hinet 空間的話，這裡推薦你兩個可外連的空間，你可利用它上傳 mp3 音樂檔案，不支援中文檔名，記得改成英文的。

• http://www.fileden.com/
• http://boxstr.com/

自訂上傳歌曲：這裡你可以設定播放資訊，右邊紅框是你所上傳的 mp3 檔案連結，左邊紅框則是播放器所要顯示的歌曲資訊

註：歌曲資訊不支援中文，打中文會變亂碼，如果想要有中文選單，只有自己上傳播放器這個做法，因為我很少聽中文歌，而且漂亮的播放器實在很少（很多都要收費），變成要漂亮，就沒中文，要中文就不漂亮的情況，所以這做法以後有空再寫…

註：只接受副檔名為 mp3 的檔案格式，有需要請先自行轉檔

搜尋新增：你可以用搜尋的方式找歌，再將它新增至播放清單裡，不過使用別人的歌曲，容易流量超過，還是自己上傳比較妥當

4、Mp3 Flash Player 面板設定

這裡你可以設定面板的配色(如果該面板有提供這個選項的話)，直接點選下面的配色就會自動套用

這裡你可以變更 Mp3 Flash Player 面板的樣式，直接點選直接變更

這裡你可以設定播放方式，建議不要使用自動播放，讓使用者自己選擇，公開讓別人使用是指該 Mp3 Flash Player 是否出現在你的帳號資訊頁面供人使用。

全部都改好的話，就可以按 Get Codes 來取得Mp3 Flash Player 的張貼語法了

或者你也可以直接點選 Blogger 的按鈕，填完帳號密碼，即可直接新增 Blogger 的 Widget。(建議不要，它會亂丟)

講完，收工。
Technorati 的標籤：flash mp3 player,MyFlashFetish

當滑鼠移動過去時，會變色，而且滑鼠不必碰到連結，以區塊的方式來感應變色。

這個算是美化的小技巧，做法並不會太難，但是我覺得蠻漂亮的，效果也不賴，其實我最初是在放形浪High看到這個效果的，可是當我試著實作時，在 Firefox 是成功了，可是 IE 卻沒用，試了好幾個方法都沒用，這篇文章就擱在那邊了，不過最近又看了一些文章，終於OK了，可以在 Firefox 與 IE 兩者正常顯示。

沒辦法，數據顯示 這裡的訪客七成使用 IE

請進到「範本」>>「修改html」>>勾選「展開小裝置範本」，並在 </b:skin> 之前加上 CSS 語法如下所示：

註1：如果你是使用網路上一些用 javascript 寫成的文章列表、回應 hacks，那可能有些細節要再自行修改。

註2：在做之前請先 Ctrl+F尋找一下，你是否有 .sidebar 這個元素，如果沒有，找看看 rightXXX、leftXXX之類的，我自己的也不叫 .sidebar，只是因為 .sidebar 算是 blogger template 的預設命名，較多 blogger template 使用，所以使用它，而如果找不到 sidebar 也找不到 rightXXX、leftXXX，呃…留言吧

.sidebar .blockcolor a {
display:block;
}
.sidebar .blockcolor a:hover {
background:#D7EBEF none repeat scroll 0%;
}

接著請 Ctrl+F 尋找「文章標籤」、「近期文章」（你自己取的 Widget 中文名稱），會看到＜div xxxxx 的語法，如下所示：

<b:widget id='Feed1' locked='false' title='iPlay99近期文章' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
底下省略…


080203更新註記：因為 LVChen 的留言，所以改變一下原本的做法

把紅字 widget-content 改成 blockcolor

把紅字 widget-content 改成 widget-content blockcolor 即可兩者兼顧到，這樣就不怕使用者如果有裝什麼其它 hacks 要調用 widget-content 會出問題了

<b:widget id='Feed1' locked='false' title='iPlay99近期文章' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content blockcolor'>
<ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<b:loop values='data:feedData.items' var='i'>
底下省略…

改完之後，預覽看看吧，近期文章應該正常，但文章標籤可能會變成底下這種情況，文章數量都跳到下一行了。

這時請 Ctrl+F 尋找 (<data:label.count/>) ，應該只找得到一個，除非你有改過，請將紅字(<data:label.count/>) 搬到藍色的 </a> 之前，這時再預覽看看，應該就ok了。

註：如果 (<data:label.count/>) 被 <span>標籤包著，也要一起移過去喔。

<div class='blockcolor' id='toggle'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
(<data:label.count/>)
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>

以上，有問題歡迎提出~

Technorati 的標籤：blogger hacks,hyperlink,CSS

本篇文章不算教學，純粹只是回想、記錄自己開始寫部落格（從Pixnet 搬到Blogger）之後，Feedburner 的使用順序及經驗，提供新使用者導覽用：

• 我用 Feedburner 做了什麼

前言（俗稱：廢言）：為何用Feedburner

以目前 Feedburner 本身在市場上仍具有相當的佔有率來看，幾乎只要是有寫部落格、或其它網站服務的人，都可能會需要用到 Feedburner 的服務。

以新手來說，當你在網路上衝浪時，看到自己喜歡的站台文章，想知道後續消息，大概就三種方式

• 直接上網去看，花時間，浪費頻寬。
• Mail 訂閱，早期的做法，要等網站寄信給你，被動式的取得資訊。
• 透過 RSS新聞發送服務，利用 RSS Reader（RSS閱讀器）訂閱，可即時、主動的取得新聞內容。

Feedburner的好，對於一般使用者可能沒啥感覺，不過對站長、或重度網路資訊接收者來說，就大大不同了，以目前寫部落、架站的風氣，很多人都經營、擁有不止一個的網站，也許是性質不同、也許彼此是主站、分站、備份站的關係，又或者看到哪個 BSP（Blog Service Provider） 好用就搬家了，此時 Feedburner的RSS永久固定連結特性就有很大助益。

舉例：因為美女相簿的關係，我在無名有一部落格，但是後來無名服務爛到爆炸，所以我搬家到 Blogger，訂閱我 Feedburner 的人，就不會因為我搬家的緣故，而收不到文章，我只要在 Feedburner 的後台將無名的RSS改成 Blogger 的RSS即可，這樣就不怕讀者群流失了。

示意圖如下： 閱讀者A跟C都是地球人沒錯

一、註冊、使用 Feedburner：

關於Feedburner註冊、使用說明，如果看不懂英文，可以使用底下被官方停用的中文介面連結，翻譯有些蠻怪的，不過至少比看英文、鴉子聽雷要來得好：

FeedBurner中文介面

註冊完後，並燒製一個專屬的種子

不明白自己的 RSS 網址是什麼的話，可以參閱底下文章：

Blogger - 近期文章 (Recent Posts)要用哪個 by iPlay99

完成圖

不過，當我註冊了 Feedburner 之後，其實一開始並用不到，因為沒人光顧…

所以第一步當然是充實部落的文章內容囉，以及將你自己的 Feedburner 設定套用在 blogger 之上。

二、部落格初生時即可做的Feedburner設定：

一開始我調整了Blogger 後台RSS的連結，後來啟用Webmaster Tools設定Sitemap 的連結設定。關於後台設定與 Sitemap 設定，請參閱：

Blog SEO - 替自己的 blogger 設定 sitemap網站地圖 by iPlay99

接著，再加上自己的RSS ICON按鈕。

Blog - RSS Feed 訂閱處理方式 by iPlay99

到這裡，其實已經算是邁出第一步了，接著努力的寫文章，之後當我在 Feedburner 的後台，看到訂閱人數破蛋時，那種自我肯定的感覺其實蠻不賴的。

三、進行 Feed 最佳化

當部落格本身有了訂閱者之後，你可以開始動手設定 Feedburner 它本身提供的各項優化 Feed 的服務了，大多數的功能，其實都是把它啟用就會自動生效了，我僅舉幾個比較重要的功能來說明，其實比較有關的就內容優化Optimize及宣傳摘要 Publicize兩個頁面而已，賺取收益？還是努力寫文章吧。

內容優化 Optimize：

BrowserFriendly：可以將點閱者導向到較具親和力的訂閱/預覽介面。

FeedFlare：則是增加你 Feed 摘要內容的互動功能，它可以讓你在 Feed 文章摘要的末尾加上訂閱/分享的連結，其中國內的書籤訂閱服務，你可以參閱底下這篇文章

讓讀者更方便收藏你的文章 FeedBurner的FeedFlare補充包 by 異塵行者

宣傳摘要 Publicize：

Email Subscriptions：原則上，現在蠻少人用了，不過還是提一下好了，它是讓使用者可以透過 E-mail 訂閱你的 Feed 網摘，你可以參閱底下的

Blog Tips - RSS Feed 訂閱處理方式 by iPlay99

PingShot：它可以幫你在有新文章發表時，告知各大搜尋服務。你可參閱底下的文章，瞭解這麼做有何意義。

Blogger - 近期文章 (Recent Posts)要用哪個 by iPlay99

FeedCount：則是新增一張小貼紙，標註你的訂閱者有多少。

Chicklet Chooser：這個則是提供一些預設的小貼紙，讓你可以貼在部落格上。

以上，講完收工。

Technorati 的標籤：feedburner,feedflare

• 語法由服務商提供，我想修改屬性語法
• 自己上傳 flash，我想自訂語法

都蠻基本的概念，因為難的我也不會

另外，本文不包含 flash 音樂播放，那個另外開一篇…

底下以 Picasa相簿所提供的 Slide 相簿語法為範例：

＜embed type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width="432" height="288" flashvars="host=picasaweb.google.com&captions=1&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fsandnfish%2Falbumid%2F5124894957156403921%3Fkind%3Dphoto%26alt%3Drss" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

現成的語法，通常能改的地方不多，大多都是改外觀，像是 width 寬度、height高度、CSS樣式表等等，這個做法在大多數地方都適用，像影片、圖片、flash等…

像這個 picasa 的 slide 相簿，我只改了它的大小，如果把大小的屬性拿掉也可以，它會以預設的大小來執行。

• 語法：height="數值" width="數值"
• 說明：數值可為正整數，單位為像素px。
• height：控制面板的高度
• width：控制面板的寬度

張貼自己上傳的 flash 語法：

首先，你必須找一個可以「外連」的空間，像免費的FileDen就蠻好用的，如果只是自用的話，5G 流量應該很夠了，或者是基本陽春款的GooglePages，讓你吃不飽又餓不死

當你上傳之後，將連結網址貼到 src= 之後，src 也是屬於最常用的屬性之一

• 語法：src="網址"
• 說明：「網址」的部份即為連結檔案的網址或路徑，可以是相對路徑或絕對路徑。

最單純的語法，這樣它其它的數值都會以預設值來呈現：結果這個時鐘的大小及背景都不適合使用，外面有一大層灰框

＜embed src="http://www.fileden.com/files/2008/1/21/1711517/ed_clock.swf" />

於是我自訂它的大小：加上 height 及 width 語法，接著又加上 flash 專用的透明背景語法 wmode="transparent 讓灰色底色不見

＜embed src="http://www.fileden.com/files/2008/1/21/1711517/ed_clock.swf" wmode="transparent" width="190" height="110"></embed>

想美化外觀或是定位可以使用CSS樣式表的 style 語法，或是自訂內部樣式表來處理。

（註：border 效果僅 IE 有效，僅做示範）

＜embed style="border-right: #c68e63 4px groove; border-top: #fcb47e 4px ridge; float: right; border-left: #fcb47e 4px ridge;  border-bottom: #c68e63 4px groove; height: 80px" width: 190px; src="http://www.fileden.com/files/2008/1/21/1711517/ed_clock.swf" type="application/x-shockwave-flash swf" wmode="transparent" />

參考網址：

embed基本語法

Flash Embedded in HTML

Flash content displays on top of all DHTML layers

第一個字變大(首字變大、首字下沉)手動加上樣式語法

做法一：使用 span 標籤

其實做法與 code 語法類似，請進到「範本」>>「修改html」，並將底下的css語法複製貼上到 </b:skin> 之前：

.fb {
font-size:280%;
font-weight:bold;
float:left;
margin-right:3px;
}

接著，在HTML編輯模式，手動用<span>語法將文章第一個字包起來即可，如下所示：

<p><span class="fb">測</span>試第一個字變大的效果，第一個字變大</p>

做法二：使用 p 段落標籤與 first-letter 元素

一開始也是先定義 css 的語法，請進到「範本」>>「修改html」，並將底下的css語法複製貼上到 </b:skin> 之前：

#fb:first-letter {
color:#CCCCCC;
float:left;
font-size:280%;
font-weight:bold;
margin-right:3px;
}

接著，在HTML編輯模式，替文章一開始的<p> 段落標籤套用樣式，如下所示：

<p id="fb">測試第一個字變大的效果，第一個字變大</p>

以上，兩個做法，是我目前網路上找得到的，因為我想找全自動的，結果找來找去，原理都脫不了上述兩種做法，用 wordpress 自己架站似乎有外掛可達到全自動的功能，希望 blogger 的玩家也能寫一個出來造福大眾，要不然光想到還要修改過去的文章，感覺就很累，我想這個功能以後可能會用在文字較多的文章吧。

講完，收工。

參考文章：

http://www.w3schools.com/css/css_pseudo_elements.asp by w3schools

http://jteh.blogspot.com/2007/10/blog-post_08.html by Jackie

http://yanfeng.org/blog/380/ by 桑葚

Technorati 的標籤：第一個字變大,首字下沉,首字變大,blogger hack,css

Vanity is definitely my favorite sin

Al Pacino．The Devil's Advocate

在經營部落格一段時間後，文章量比較多了，我便替自己的部落加上統計分析 Blog Analytics 的服務。

常見的 Blog Analytics Tool 其基本功能是「統計訪客數量」，目前常見的 BSP（部落格服務提供商）像：樂多、Pixnet、無名…等，他們本身所提供計數功能，都會重覆計算，有失精確。

目前我使用過的分析工具大致來說有幾個（像Feedburner等整合附加型的暫不討論）：

Google Analytics：http://www.google.com/analytics/zh-TW/

並無提供類似 sitemeter 的小貼紙（widget）服務，只提供追蹤程式碼，就整體提供的統計分析功能來說，算是中規中矩，不過頂著google 的光環，它將來一定會愈來愈好，這是無庸置疑的，既然這是可預期的，那何不趁早熟悉它呢，何況統計所需的數據，是需要長時間累積的，網站上也都附上了詳盡且中文化的help說明，雖然較生硬，但我想看完還是有相當助益的。

Google Webmaster Tools：https://www.google.com/webmasters/tools/

請搭配 Google Analytics 使用，並登錄你的 Sitemaps ，提升你部落格在 Google 的評價及排名。

登錄 Sitemaps，你可以參考：

Blog SEO - 替自己的 blogger 設定 sitemap網站地圖 by iPlay99

Sitemeter：http://www.sitemeter.com/

就我所看過的部落格來說，它的普及率算蠻高的，也是我第一個使用的計數器，其所附帶的分析功能也蠻齊全的。

Spotplex：http://www.spotplex.com/

它本身有提供「近期受歡迎文章」的 Gadget 可供使用，蠻方便的，另外它的介面，我個人覺得看起來相當舒服。

GoingUp：http://www.goingup.com/

將滑鼠移上去小貼紙上面，它會彈出小視窗顯示訪客數量、頁面觀看數量、PR值及線上訪客等數值，蠻方便的。

MyPageRank：http://www.mypagerank.net/

看不懂英文的，你也可以使用對面的分析工具：

中國站長站：http://tool.chinaz.com/Index.asp

51la我要啦免費統計：http://www.51.la/

而在有了準確的訪客數量後，再做底下的統計分析項目也才有意義（如：訪客來源區域分析、造成訪客進入的原因分析、頁面點擊次數、訪客的停留時間…等），藉此可以瞭解你的訪客群來自地球上的哪裡、最受歡迎的文章有哪些、停留時間長短？進而改善自己部落格的缺失。

註：當然，Blog 的定位是自我抒發，或僅止於別人做，我也跟著湊熱鬧的話，以上觀點就不適用了，但是如同一開始的引言，艾爾．帕西諾(Al Pacino)於魔鬼代言人(The Devil's Advocate)裡講的一段話：「虛榮~是我最愛的原罪（Vanity is definitely my favorite sin）」，應該很少人「會反對」自己部落格的訪客很多。

其實像自己，寫了部落格才發現，○○ＸＸ的熊，爛芋充數、亂寫亂發的事過不了自己這關，過得了自己這關的好文章又難寫到爆炸，又要顧詞意簡潔，又要顧SEO，又要…真是討厭的適應期啊！！

接下來，當有了比較長期的數據統計之後，可能有底下幾件事要做：

• 美化版面
• 提高網站介面的親和性（User Friendly）
• 調整改善 Sidebar 側邊功能表的排列組合
• 改善 AdSense 的位置、形式、配色
• 將實用性較低、可替代的功能更換掉

以上所言，以sandnfish本人目前程度為主，將隨時間、觀點變化而更新，如有謬誤，還望不吝指正，萬分感謝。

以上，先說到這樣唄。

Technorati 的標籤：Blog Analytics,Blog Analytics Tool,部落格,統計分析分析

最近使用 Google Webmaster Tools 替自己的 blogger 掛上 Sitemap（網站地圖），這一步驟算得上是 Blog SEO 必做的基本動作。

由於 SEO 的相關文章網路上隨便找都一卡車，在此不多加解釋，僅簡單介紹一下「為什麼要替自己的網站設定 Sitemap（網站地圖）」

以 Google 搜尋引擎為例，Google 家的機器人程式叫做 googlebot，搜尋引擎會每隔一段時間就會派 googlebot 去你家做更新調查，查看你網站有無更新，有的話就把資料帶回去向搜尋引擎報告。

不過，因為 googlebot 很笨，它會像上圖一樣，到了你家（你的網站首頁）之後，從文章分類開始查：「文章1號…嗯，沒更新…接下來換文章二號…嗯，已經有了，也沒更新，接下來換3號…」，笨笨的從頭查到尾，很沒效率。

所以我們給它準備一張 Sitemap（網站地圖），顧名思義，它等於是給 googlebot 一份「近期更新列表」、或「導覽地圖」一樣，googlebot 不用再重頭到尾檢查一遍，只要看你的Sitemap 網站地圖，就知道有啥資料是新的，有哪些資料遺漏了，要把它帶回去，如此一來，不僅對你的網站效能有幫助，也可以減少笨 googlebot 迷路找不到資料的情形發生。

那麼要怎麼做呢，首先請到 Google Webmaster Tools 登入，新增你的blogger 網址

接著進行「驗證」

它會給你一段 Meta Tag code，像底下這樣：

<meta name="verify-v1" content="2bwuul/rpPBXdxofKefrdVlIl9R/552gb+JrL+LASWU=" />

接著進到「範本」>>「修改html」將它貼到<HEAD>的下方，如下所示：

<head>

<!-- Google meta -->
<meta content='2bwuul/rpPBXdxofKefrdVlIl9R/552gb+JrL+LASWU=' name='verify-v1'/>

驗證成功後，就可以增加 Sitemap了，你可以使用 atom.xml 或 rss.xml，它都接受。

新增完後，就等吧，過幾個小時，就看得到結果了。

另外，有一點要注意的，像我有申請 feedburner ，所以我在 blogger 後台也有設定feed 重新導向，但這會造成 Sitemap 網站地圖讀取錯誤。

註：多謝小茶的解釋，請於上圖 atom.xml 的後面加上 ?redirect=false 指令，即可讓 blogger 不要轉址至 feedburner ，這樣兩者就兼顧到了，照此步驟設定後，可無視底下的兩張說明圖片

atom.xml?redirect=false

請記得將以下設定清空。

提供參考，講完，收工。

註：因為域名上的限制，webmaster tools 不支援 pixnet、無名等部落格，想當初，這也是我搬家到 Blogger 的原因之一

參考資料：

Google Webmaster Tools 網站管理員說明中心

Google 101： Google 如何檢索網站、建立索引和提供網頁

Google工程師解釋Googlebot抓取網頁的原理 by Gseeker

Submit Blogger sitemap to Google Webmaster by bizwhiz

Technorati 的標籤：blogger,Sitemap,網站地圖,webmaster tools