如何美化模板元件的外觀配置

這篇是有關模板結構每個元件定義的初淺說明，如何設計一個個獨特個性化的版面，這裡或許有些資訊你是可以參考的，但如果是剛加入blogger的新手，對語法不甚了解的朋友，請斟酌使用。

其實在Blooger模版上的每個元件除了基本的css設定外，都有他的獨一無二的定義名稱，會用b:widget語法來顯示，例如最主要的部落格標題(Header1)及文章本文(Blog1)區，如下所示，在後台是一定要存在的項目，這是在html區可以看到的：
<b:widget id='Header1' locked='true' title='部落格標題(標頭)' type='Header'/>
<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog'/>
而在官方的邊欄小工具裏，首先我們要知道不同的元件有不同的英文固定名稱，如下


常用的邊欄小工具：

<b:widget id='Profile1' locked='false' title='關於我自己' type='Profile'/>
<b:widget id='HTML1' locked='false' title='html/JavaScript元件' type='HTML'/>
<b:widget id='Label1' locked='false' title='文章分類(標籤)' type='Label'/>
<b:widget id='Feed1' locked='false' title='資訊提供' type='Feed'/>
<b:widget id='BlogArchive1' locked='false' title='網誌存檔' type='BlogArchive'/>
<b:widget id='CustomSearch1' locked='false' title='搜尋此網誌' type='CustomSearch'/>
<b:widget id='BlogList1' locked='false' title='我的網誌清單' type='BlogList>'/>
<b:widget id='AdSense1' locked='false' title='廣告' type='AdSense'/>
文字、圖片及網址連結
<b:widget id='Text1' locked='false' title='文字' type='Text'/>
<b:widget id='Image1' locked='false' title='圖片' type='Image'/>
<b:widget id='TextList1' locked='false' title='清單' type='TextList'/>
<b:widget id='LinkList1' locked='false' title='連結清單' type='LinkList'/>
社群功能的元件
<b:widget id='Followers1' locked='false' title='追蹤者' type='Followers'/>
<b:widget id='BlogList2' locked='false' title='我追蹤的網誌' type='BlogList'/>
多媒體元件
<b:widget id='Slideshow1' locked='false' title='投影片' type='Slideshow'/>
<b:widget id='NewsBar1' locked='false' title='新聞影片' type='NewsBar'/>
<b:widget id='VideoBar1' locked='false' title='視訊列' type='VideoBar'/>
其他
<b:widget id='Subscribe1' locked='false' title='訂閱連結' type='Subscribe'/>
<b:widget id='BloggerButton1' locked='false' title='Blogger按鈕' type='BloggerButton'/>
<b:widget id='Poll1' locked='false' title='意見調查' type='Poll'/>

這裡要注意的是在Blogger的模板裡，每一個widget id都是唯一的，不能夠重複，有時你定義模板的CSS時可能會發現，有的定義前面是 # ，有的定義前面是 ‧ ，這在HTML用法是不同的，
# 代表這是一個id定義，元素是唯一的
‧代表這是一個class定義，則是可以多種套用

要怎麼說比較容易讓大家瞭解，簡單的說明，就是把id看成是一個人，而class是他穿著的外表，所以這個人在世界上是獨一無二的，但是他的外表卻可以隨著天氣變化，或是環境不同有著不同的穿著。

而同一性質的id，在模版裡通常我們是用1.2.3數字來區別，譬如我們常用的Html/Java Script小工具，我們常會看到有HTML1、HTML2...甚至到HTML98，還記得上次BLOGGER套用模版發生的錯誤嗎?當時就是官方模板，在我們還沒有加入任何元件前，就把一些常用的定義加以設定，例如Label1、HTML1、Feed1、等都自動設定，所以當我們套用新的模板時，就會出現2個ID重複，所以沒法套用，所幸這個問題後來解決了，但有些元件id重複套用，如果是在外觀的處理上，並不會出現問題，但我們儘量還是用class來定義會比較好些。

而關於id和class有什麼不同，可以參考♣梅問題‧教學網【Minwt】♣的[CSS]id與class別再傻傻分不清楚，有更詳細的說明。

你可能會問要知道這些要做什麼用?
我所知道的是可以改變某些元件的屬性，或是個性化自己的版面，再深入的話，則是可以變化自己模版的配置，不過這要和b:section同時做變動，這個是較為深入的技巧，以後有機會再談。

譬如從這句
<b:widget id='Profile1' locked='false' title='關於我自己' type='Profile'/>
除了id，你可以看出什麼，這裡有個locked='false'敘述，這是表示這個元素是可以移除且可拖曳，點選這個widget你會發現後台有一個移除的按鈕，但如果你設定為locked='true'，則這個widget是無法移動，會被固定住，而且是無法移除的，這個元件沒有了可拖曳的框框，


而且原先有的移除按鈕，你會發現不見了，如下圖這樣，


所以我們套用一些網路上提供的模板，你會發現有的設計者把有些元素，設成ture，例如廣告或是有些商業連結，讓你無法移除，這時如果知道這個設定的方法，就可以移除一些你不想在模板上出現的東西，。

另外這也是一個可以個性化自己邊欄元件的方式，之前綸太郎寫過一篇如何利用捲軸讓邊欄（Sidebar）元件縮短的文章，就是利用這樣的設定來改變每個元件不同的面貌，只要對不同的元件加入一個新的定義也是可以達成不同的效果，譬如想讓設定的捲軸不一定要一樣的高度。

譬如原來的新手建議閱讀元件， 他的外觀就如隨機閱讀及最新迴響的樣子，


我想讓他有不同的外觀顯示，改成如下面這樣，


這時我們從後台的程式碼用新手推薦閱讀為關鍵字找到這行語法，
<b:widget id='HTML11' locked='false' title='新手推薦閱讀' type='HTML'&g;t
知道這個元件的定義名稱為HTML11，大小寫是不一樣的元件ID，這是要注意的。
所以我們就可以新增這個HTML11的相關連定義，如下圖這樣，這樣你的邊攔就會有不同的變化，例如有的人喜歡，紅橘黃各為單元背景顏色，或是一個有背景一個無背景的交錯顯示，都是可以自行運用的。

這裡可以發現blogger模板的每個內容定義都是用widget-content來設定，所以我們加入以下新的定義，就可以將你的個別widget來產生不同的顯示效果。


如果你有使用先前綸太郎介紹的縮短元件的方式，你可以發現用直接定義的方式，就可以不用去後台Html裡，找到該元素的widget-content，用<div class="scrolling2">去套用他，感覺會比較方便些。

其實以上的設定，綸太郎認為比較適合在不同的元件想有不同的捲軸高度來運用，例如先前談到的都是用一個class(.scrolling2)來定義所有的捲軸大小，這裡你就可以用自訂的方式來產生，另外不同性質的元件，例如多媒體及讀者Feedback的單元，都可另外設計較活潑的外觀顯示，或許比較麻煩，但想要有個獨特性的模板，我想從這裡來發展也是個可以利用的工具。

延伸閱讀：
如何利用捲軸讓邊欄（Sidebar）元件縮短
幫邊欄的網頁元素(widget)，自訂不同的漂亮圖示
閱讀全文 ►►►

用FBML工具來製作你的Facebook粉絲歡迎頁面---多媒體篇

在Facebook上架設粉絲專頁的朋友越來越多了，但如何讓粉絲停留在你的專頁上，閱讀更多的資訊，我想是身為每一個使用者應該關心的事，發現很多人只是把它當作轉貼自己網誌RSS或是twitter和plurk匯入的另一個介面，覺得有點可惜，發現還是有很多利用的空間。

本篇要介紹的就是利用FBML來編寫你的粉絲專頁，加入多媒體的介面，讓你的頁面更活潑與多元媒體化，其實Facebook系列寫下來，我想真正會利用的人並不多，說真格的，高手們可能已經在開發Facebook小遊戲或是程式了，對我而言可以利用這個工具來編寫頁面，就是目前努力的方向，也當成自己的學習紀錄本跟大家分享，或許有的人也想自己設計一個圖文並茂的粉絲頁。

放入多媒體，包含影片、Flash檔案及照片的幻燈片(Slideshows)或音樂MP3：

在Facebook嵌入影片或是swf檔，fmbl的tag稱為Fb:swf

【放入Youtube影片】

語法為
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/v/xxxxxxxxxx' imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />

其中
http://www.youtube.com/v/xxxxxxxxxx
裡面的xxxxxxxxxx就是Youtube影片的ID，譬如這一部影片
http://www.youtube.com/watch?v=SkUXmodrV58
所以你的網址就是
swfsrc='http://www.youtube.com/v/SkUXmodrV58'
而imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg是顯示的圖片
而width='340' height='270' 也是可以修改的，就看自己的設定。

因為Facebook他會捉其中的影片當作首頁圖片顯示，而不是直接顯示youtube的影片介面，需要按下圖片後才會顯示介面，這是不同於其他Youtube影片在其他平台顯示的方式，所以這個img你也可以放入自己自己喜歡的圖片來用，寬度width及高度height要配合就是了。

呈現方式，



【放入Picasa幻燈片】

怎樣知道你的幻燈片網址，進入picasa後台介面，在右手邊有個選項，按下"內嵌投影播放"


選擇大小，找到語法，



語法類似以下這樣，
<embed type="application/x-shockwave-flash" src="http://picasaweb.google.com/s/c/bin/slideshow.swf" width="400" height="267" flashvars="host=picasaweb.google.com&hl=zh_TW&feat=flashalbum&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fallen%2Falbumid%2F1231213235%3Falt%3Drss%26kind%3Dphoto%26hl%3Dzh_TW" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

我們找到host=後面的紅色語法把它加到fbml的語法裡即可，

<h1> 按下圖片開始播放!</h1><br/><fb:swfswfbgcolor="000000"imgstyle="border-width:3px; border-color:white;"swfsrc='http://picasaweb.google.com/s/c/bin/slideshow.swf?host=picasaweb.google.com&hl=zh_TW&feat=flashalbum&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fallen%2Falbumid%2F1231213235%3Falt%3Drss%26kind%3Dphoto%26hl%3Dzh_TW'imgsrc='按下的圖片網址'width='400' height='267' />

如果你的picasa網址不是picasaweb.google.com而是其他國別，記得上方的picasaweb.google.com要改成你自己國家的網址，例如加拿大的是picasaweb.google.ca

呈現的樣子，

【插入音樂MP3】

語法為，
<fb:mp3 src="http://音樂網址.mp3" title="歌曲名稱" artist="演唱者" album="專輯名稱"/>
呈現方式，

測試頁面可以參考以下網頁，目前暫時放著。
FMBL教學

自從成立粉絲專頁後，綸太郎儘量不要把它變成一個RSS發布的平台，而是真正能與喜歡自己文章的朋友有互動及交流的機會，但是目前好像大家的習慣還是趨向較靜態的，較常遇到的就是遊戲及測驗的邀請或是加入，只是這兩個我目前都沒有興趣，只能按下"略過"，其實一直在想怎麼樣好好利用這個在台灣已超過500萬人口使用的平台，加入也才半個月，覺得這是一個很好研究討論的園地，慢慢的發掘吧。
閱讀全文 ►►►

Blogger和WordPress兩相宜的模板資源---WP Blogger Themes

最近找到一個模版資源網站--WP Blogger Themes，同時提供Blogger及WordPress的模板，如果有同時使用兩者的朋友，可以兩相對照研究看看，模板是怎樣轉變套用的。

網站：WP Blogger Themes

WordPress給我的感覺就是很專業且功能完備的部落格系統，但鑑於每次改版時一些Plugin要放的語法是在php裡面，說真格的很多都看不懂，還是Blogger的html比較親切，所以就懶得更換，但是很喜歡的WP模板設計，所以這個網站大概就是為了我這種人產生的吧，真是感恩作者提供這些資源。

以下提供一些範本，有興趣的可以自己下載下來玩玩。

● Curtain
這個模版是透明漸層的，感覺很古典優雅，使用的小圖示，也很復古，背景波紋設計，感覺似乎有窗簾在後面微微飄動。


● Mystique


這個模版我最想學的就是他邊欄的Tabs分頁設計，滑鼠一點，頁面就滑出來了，很炫，也很節省空間，但是看過原始碼，要想學會我想還要很長的時間。


● SoulVision
牛皮紙撕裂的頁面，最近很常利用在模板上，非直線的毛邊設計感覺很有質感，這個模版幫你將Social Links (社會書籤)都設計好了，細微處的特殊設計我很喜歡。


他有個姐妹站，
Wordpress To Blogger
大多是雜誌型的專業模板，要使用的朋友可能要有相當的基礎，屬於高階模板的應用，目前我還沒練到那個階段，只能看看而已，跟大家分享，而且要下載，需贊助作者10元美金，所以大家看看原始程式碼，可以自己學到一些Css的技巧吧。

● WP New Mag

閱讀全文 ►►►

期間限定的美女時計

美女時計最近好像很風行，接著還有型男時計，這是日本imagenavi.com公司實驗室推出的服務，不同於bijin-tokei的美人時計，imagenavi.com主要是以宣傳該公司高品質的寫真素材，還有利用寫真圖片創造出各種效果的服務為主。

網站：imagenavi.com

美人時計(期間限定)

將以下程式碼貼在部落格上即可，
<script src="http://imagenavi.jp/lab/blogparts/scbp1.js" type="text/javascript"></script>
動物時計



歲時計



imagenaviブログパーツ - 小玩意設定頁面
很簡單，只要設定背景、顯示的圖片類型，最後再產生程式碼，貼在部落格上即可。

閱讀全文 ►►►

幫自己設計個版權所有的小方塊單元

這小東西是綸太郎在Jacky的部落格上看到的，覺得不錯用，跟大家介紹，在你的文章後面放上一個版權所有或是作者的簡介，提醒閱讀者或是加強讀者印象的一個單元，如果有需要的朋友，也可以自己練習設計看看。

原始模板的語法來源：
Download WooThemes “The Gazette Edition” Converted for Blogger Free---Bloganol

我要利用的是裡面 .author_info，作者資訊的單元，
原始模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本"
【第一步驟】
先在CSS程式區，新增author_info這區(只要放在]]></b:skin>之前即可)，加入下列定義：
/* Author_info
----------------------------------------------- */
.author_info {
float: left;
width: 90%;
margin: 10px;
padding: 10px;
font-size: 12px;
background: #eee;
border: 1px solid #ccc;
}
.author_info h3 {
margin-bottom: 10px;
}
.author_info p {
line-height:1.5em;
}
.author_photo {
float: left;
margin: 0 10px 0 10px;
background: #fff;
}
.author_photo img {
border: 1px solid #939393;
}
細項説明如下圖，


定義好外觀，接著就是要把他放到單篇文章裡面，這個可能就要比較深的技巧，因為每個人的版面不太一樣，要想放在哪裡，就要找到該位置。

由於我們不要在首頁出現，而是要出現在單篇文章最後面，所以前後一定要用
<b:if cond='data:blog.pageType == &quot;item&quot;'>
及
</b:if>
把語法包圍起來，這樣就不會顯示在首頁，而是在單篇文章呈現時才會跑出來。
所以找到該放的位置，通常是在
<div class='post-footer-line post-footer-line-3'/>之前，
有的模板是在post-footer-line-2或是post-footer-line-1，就看你頁尾單元的配置，自己找看看。

【第二步驟】
加入以下語法
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<h3>本文作者:XXX</h3>
<p><span class='author_photo'><img src='大頭圖片網址'/></span>版權所有，請勿複製。</p>
</div>
<div style='clear: both;'/>
</b:if>
大頭的圖片，最好以60px*60px大小為宜，像我文章上這樣的大小。

當然如果你覺得每篇文章都加入的方式不喜歡，你也可以用新增小工具來加入，第二步驟就改為，在後台新增一個Html/JavaScript單元，然後放入
<div class="author_info">
<h3>本文作者:XXX</h3>
<p><span class="author_photo"><img src="圖片網址"/></span>版權所有，請勿任意轉載。</p>
</div>
顯示大概下圖這樣，


其實官方的小工具，裡面也有一個"簡介"，也是類似的功能，但是限於官方所提供的資料，而我介紹的這個是可以自定你想要告訴讀者的訊息，既然Blogger這麼自由好用，當然就自己來設計看看，也是不錯的。

當然背景也可以用圖案設計，就看個人的巧思了，以下是不同顏色的配置，可以參考看看。




這裡面的敘述文字完全你可以自己來寫，看想要告訴你的讀者什麼話，版權宣告或是歡迎訂閱，甚至來信加上email地址都可以，就看格主自己的需要了。

參考來源：
Empty - Jacky.C.J.Yeh
閱讀全文 ►►►

用FBML工具來製作你的Facebook粉絲歡迎頁面---撰寫篇

上一篇談到用FBML工具來製作你的Facebook粉絲歡迎頁面---安裝篇，接下來就開始來寫FBML的歡迎頁面，FBML改變了HTML的一些用法，刪除及限制一些語法使用，但是可以和你的個人帳號作更為緊密的連接。

FBML允許的Fbml及Html標記語言，請參考Allowed FBML and HTML Tags，這部份對我們製作一個美美的頁面有關係，所以比較重要，當然你也可以自訂你自己的tag(Custom Tags)，但目前在實驗階段，有興趣的朋友自己再研究。

【個人資料ID】

首先製作你的粉絲頁面，首先要知道的就是你的uid碼是什麼，這個還蠻好用的，uid就是user id，登入你的帳號，在個人檔案上面，在大頭上面按右鍵查看鏈結網址，就可以看到類似，http://www.facebook.com/album.php?profile=1&id=123456789018882
後面的一長串紅色數字就是你的uid碼，這個當你想呼叫的你的大頭或是個人資料很好用， 當然也可以呼叫別人或是粉絲專頁的資料，相關語法如下：

秀出你的大頭
<fb:profile-pic uid="你的id數字" width="60" height="60" linked="true" />
或是
<fb:profile-pic uid="你的id數字" size="normal"/>


width、height可以自己設定，linked="true"，代表滑鼠有超連結作用，可以連到你的個人頁面，如果設linked="false"就不會有超連結作用。
Size=”normal”，設norma則就像FB個人檔案顯示的大小一樣。
秀出你的帳號名字
例如Chang Allen，如果在登入的情形下，你看到的會是you，別人看到的才會是你的名字。
<fb:name uid="你的id數字" />

這個呼叫他人資料的tips可以放在你的粉絲專頁裡，就看你怎麼利用。

【初始語法】

接下來正式寫一個歡迎頁面時，首先將以下語法寫在最前頭，
<div style="position: relative; overflow: hidden">
最後頭再加上</div>
樣式大概就像
<div style="position: relative; overflow: hidden">全部語法內容</div>
就是將你的網頁語法，以一個區塊顯示，裡面你也可以在設定和左右的邊距，例如margin-left:15px;(距離左邊15px的寬度)，就是將你寫的全部語法，用以上div語法包覆起來，形成一個區塊，這樣就不會有超過頁面的顧慮，因為有的人可能是將語法從其他html編輯器剪貼過來的，如果超過寬度，可以自動隱藏，版面也不會走樣。

【定義CSS】

你可以自己用html寫頁面，有些會很費功夫，因為有些文字的修飾外觀語法可能是重複的，例如主標題、副標題或是引用的部份，這時我們就像blogger一樣，可以先下自訂文字的外觀CSS，這時就要先宣告他的定義，可參考Facebook Styles說明，例如我們設一個標題的css定義，
<style type="text/css">
.main-title {
font-weight: bold;
font-size:20px;
color: #0094E0;
text-decoration:underline;
}
</style>
就是用<style type="text/css">及</style>將css定義的元素放在裡面，做為宣告的作用，裡面要放幾個定義都可以。

然後你要使用這個.main-title定義時，就像以下這樣將你的文字用div把它包覆起來，
<div class="main-title"> blogger初始準備工作</div>
顯示就如圖下方，


【插入圖片】
<img src="http://圖片網址" width="高度" height="寬度" />

以上是比較重點的語法介紹，一些基礎的語法，你可以參考網路上html的教學幫自己寫一個簡單的頁面，或是利用編輯器將寫好的HTML內容貼到fbml都是可以的，如果不適用的他會秀出來，再將多餘的部分刪除即可。

其實FBML最大的用處是在製作Facebook的應用程式，例如一些遊戲(開心農場等等)、外掛、或是小工具等，對我們初學者或是粉絲頁面擁有者而言，我目前可以做到的就是利用這些語法來幫自己的Fbml網頁放上相片、幻燈片、影片或是音樂mp3等等，讓自己的粉絲專頁更豐富更多元化而已。

下一篇會繼續分享如何在Facebook嵌入影片及幻燈片等多媒體效果的作法。
閱讀全文 ►►►

用FBML工具來製作你的Facebook粉絲歡迎頁面---安裝篇

FBML（Facebook Markup Language），直譯就是幫你的臉書化妝的語言，什麼意思呢?就是讓你的Facebook的頁面看起來更美、更吸引人的工具，不再素顏見人吧，幫自己的粉絲專頁設計一個宣傳歡迎頁面(Welcome Page)，我覺得很實用，如果你也想擁有一個，跟著綸太郎慢慢實作吧。

當然還是從基礎談起，因為我也是完全不會這東西，不過是靠著憋腳的英文和對html及css一些的基礎知識來學習，因為中文教學對我而言都太難，什麼Script、Jquery、PHP、Client……那些我真的莫宰影，所以如果文章裡有錯誤，大家就一起錯下去吧(誤)，留言更正吧。

FBML是Facebook工具頁面(Facebook Application )的一個工具，這裡有著許多你可以加到Facebook的工具或是外掛，當然這有安全性的顧慮，因為有的要存取你的FB個人資料，所以建議儘量選擇星星比較多(利用率高)的工具來使用。

FBML，目前每個月有900多萬人在使用，應該是很受歡迎的工具，如何使用呢?這個工具只限粉絲專頁使用，個人頁面是無法使用的。

登入FBML後，按下加到我的粉絲專頁，


然後選擇你要加入的粉絲專頁，


加入後他會先顯示在頁籤頁面(就是右手邊塗鴉牆這邊的區塊)，你可以點選FBML他就會顯示在頁籤頁面了，排列順序可以用滑鼠拖曳完成。


在頁籤頁面是無法編輯你的資料的，只有刪除分頁的動作，

你要編輯頁籤的區塊都要進入"編輯粉絲專頁"這個功能頁裡面，


所以我們點選後，就會發現應用程式多了FBML – FBML這一區塊，


按下編輯就可以開始寫你的歡迎頁面了， 標題FBML可以改成你想要的文字，譬如"WELCOME"


如果你會寫html的話就可以開始寫了，下一篇會介紹如何簡單寫一個歡迎頁面的方式，以下是簡單的語法，大家可以先實做看看，fbml可以看成就是一個html的編寫器，怎樣把你寫的html變成畫面這樣而已。

<br/>空行
<p>段落文字</p>
<div align="center">文字或段落置中</div>
<strong>粗體文字</strong>
<font color="#C16100">文字顏色</font>
文字顏色及大小一起設定
<font color="#0000FF" size="+2">文字</font>
或是用<h3>文字</h3>，數字越大，顯示的字型越小

寫好儲存變更後，記得在塗鴉牆右手邊有個設定，按下後將"非粉絲訪客的入門頁面"改成你自己設的FBML頁面，譬如我的是"Welcome"，這樣一來沒有加入粉絲的進入你的頁面時，第一個看到的就是你的宣傳歡迎頁面，這樣整個工作大概就完成了。


網路上的教學影片，不過最後幾分鐘，作者好像是有點....


0與1謎詭世界Facebook的粉絲頁面



延伸閱讀：
如何美化Facebook粉絲專頁（使用Static FBML嵌入影音、圖文）
閱讀全文 ►►►

回應編號與留言者大頭無法並存解決之道

今天Steven來詢問我重新安裝模版後，原先的讀者的回應編號無法出現，看了一下原始碼，發現應該是最近blogger官方釋出大頭圖像的影響，原先的方式請參考設定留言回應編號，讓部落格互動更活潑，因為單獨回應的話也要寫上一大篇，乾脆寫成文章，不一定自己換模版時也用得到。

如果你在blogger最新改版後，有換模版且碰到這個問題，請利用下列方式，讓你的留言也有編號功能。

我以自己寫的這篇設定留言回應編號，讓部落格互動更活潑，來做比對說明，安裝更簡單了，如果你是新換的模板，記得原先的安裝要拿掉，用以下的方式即可，如果是舊的，應該Blogger會自行調整，不會有問題，因為我自己的是沒問題，也沒人來跟我反應過。

原先模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本"
先在CSS程式區，找到Comment這區(將它放在]]></b:skin>之前即可)，加入下列定義：
.comment-number {
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: 0px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 24px;
line-height:26px;
font-weight: bold;
}
/*since the numbers are actually links, we need to force the color properties*/
.comment-number a:link, .comment-number a:visited {color: #445566 !important; text-decoration: none !important;text-decoration: none;}
.comment-number a:hover, .comment-number a:active {color: #FF9933 !important; text-decoration: none !important;}
然後找到'comments-block'這個關鍵字，你會發現變成有兩段語法，一個是原先的意見區位的設定，另一個就是後來新增留言者大頭的區位，我們要修改的是第二段的'comments-block'，類似以下這樣，。
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
你在這中間(第二行)加上
<script type='text/javascript'>var CommentsCounter=0;</script>
就會變成，如下圖這樣，


然後再下方一點，找到
<data:commentPostedByMsg/>在下方加入以下語法即可，
<span class='comment-number'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
如下圖這樣，


這樣你的回應編號應該就能正常顯示了，但我想當初設計者設計時還沒有大頭的出現，所以綸太郎提供這方法，是我自己研究出來的，可能有些模板不適合，大家可以互相討論看看。

延伸閱讀：
設定留言回應編號，讓部落格互動更活潑
閱讀全文 ►►►

終於申請超火的Facebook‧粉絲募集中

昨天終於申請Facebook，其實發現把FB當作個人媒體也是不錯的，彌補部落格互動性較少的缺點，有時想囉唆幾句又怕佔版面，也沒什麼營養，目前台灣申請Facebook帳號的人也急遽增加，我想應該會是個很好的平台，來宣傳行銷自己的部落格，作為與網友互動的園地。

綸太郎Facebook的個人頁面：
http://www.facebook.com/luntailang
0與1謎詭世界的粉絲專頁
http://www.facebook.com/01misteryfans
東京封印的粉絲專頁
http://www.facebook.com/tokyoplayfans

由於觀看個人頁面，需申請Facebook的帳號才能進入觀看，但是Facebook的粉絲頁面卻是開放的，所以為了幫自己的兩個網站申請Facebook Page粉絲專頁，所以申請了Facebook，讓沒有fb帳號的朋友也可以看到最新發表的馬路消息或是資訊分享。

歸納一下，我個人覺得申請Facebook之後比較重要的幾點:
1、隱私權設定，有四大項要設定，也可以封鎖你不想看到的人。


這部份設定的步驟很多，不要怕麻煩，其中比較重要的就是個人資料的設定，剛開始設定時他只能設定朋友都可觀看，但如果你有朋友加入後，就可以進一步設定只有本人或是某些你指名的朋友可以看某些內容，所以有朋友後可以再來變更原先的設定也是可以的，其實一方面是避免自己的一舉一動都被朋友察悉，再來就是你常常狀態變更就會有新訊息出現在朋友的頁面上，對對方也是種困擾，像是洗板似的，這是我覺得要注意的地方。

2、申請自己的專屬網址，因為通常官方給你的是一長串網址，只要你的手機可以接受簡訊就行了，只要輸入你的電話號碼，大概5分鐘，facebook就會傳送簡訊提供你密碼，類似 xxxxxx std 的號碼給你，後面的std不是驗證碼，只要輸入前面6碼 xxxxxx，就可以在後台設定自己的專屬網址了，至於粉絲的專屬網址，聽說要有25個粉絲以上才能設定。
【靠林氏璧的加持達成了粉絲團專屬網址，謝謝他】
專屬網址申請的頁面，
http://www.facebook.com/username
詳情請參考，
Cyberpunk:如何設定Facebook粉絲專頁的簡短網址？

※ 接收簡訊的費用我不知道多少錢，下個月才會知道。


進入後台，最上方工具列→設定，選擇帳號設定，用戶名稱 更改，這時就會要求你要有手機號碼，跟著程序做即可，網址只能改一次所以要選定好，粉絲專頁網址設定也是在此。


3、如果你想完全隱身在Facebook裡面，讓網友經由你的名字連結都看不到你的資訊，這個設定就很重要，雖說要求要真名註冊，但我想很多都是用英文名的，人肉搜索上會有些困難，預設是會出現你及你的朋友的大頭及加入專頁(粉絲頁面)的資訊(如上圖)。

從後台，隱私權設定，搜尋介面，從這裡來設，讓你的能見度由自己來掌握。


搜尋能見度設所有人，另外再設定不提供朋友名單及身為粉絲的我愛看的頁面，在沒有帳號登入的情況下，就會像下圖這樣顯示，如果連大頭也不提供，單單一個英文名字是查不到什麼的，如果你比較重視隱私的話。


這裡我覺得有一個還不錯，就是最下方有個線上聊天室對話的工作列，如果你想開放聊天功能與網友對話，這裡就可以馬上實現，真的很方便，也不用有什麼Msn帳號或是其他軟體就可利用了，同時和不同的網友聊天應該頁面是不一樣的，這我還沒試過，也可是設定離線，暫時隱身。


而聊天室隔壁有個小框框，是為"通知"的小頁面，如果有最新的訊息要通知你就會出現紅色的數字，通知有幾則最新訊息，譬如有人接受你的交友訊息或是你曾經留言的頁面有人回應都會通知。


這就是綸太郎Facebook初體驗，分享自己覺得個人頁面裡面比較重要的基本功能，應該有申請的朋友都摸得比我還熟了，還蠻好玩的。

也歡迎大家加入0與1謎詭世界的粉絲專頁，至於我個人的頁面應該是不會有太多更新。

這是我的粉絲專頁Welcome介紹頁面，利用Facebook的Apps—FBML做成的，有機會再來分享了。



2009.11.9更新，
東京封印Facebook粉絲頁面，如果你喜歡日本旅遊，也歡迎您的加入，謝謝。


也感謝林氏璧和美狐團三狐的小天地的kunghc還在Facebook幫我宣傳，邀請大家加入，衷心謝謝他，如果想到日本自助旅行，一定要參考他的網誌，豐富又詳細的資訊，目前林氏璧的粉絲頁面即將突破1000人，灰熊給他厲害，真是驚人，也歡迎大家加入。

林氏璧Facebook粉絲頁面，
http://www.facebook.com/linshibifan

也謝謝加入我的粉絲團和訂閱網誌的朋友，感恩。

延伸閱讀：
Facebook 個人用戶隱私設定心得完整分享（歡迎補充與指教）---電腦玩物
閱讀全文 ►►►