藝廊式的部落格模板(Blogger templates)

最近看到一個很不錯的模板(Blogger Templates)，結合雜誌型與圖片展覽型的模板型態，方便利用，有興趣的朋友可以試用看看。

網頁：Ferias Blogger Template - BTemplates
展示網頁
下載網頁

這個模版有幾項特色，
1、雜誌型的模板，首頁的文章圖片自動縮小

這是使用JavaScript Hacks製作出來的效果，因為都是針對英文字作設計，所以受限於中文字的字數，有些文章縮寫字數不一定符合要求。
如何設定字數，找到以下的語法，加以修改即可。
summary_noimg = 440; 沒有圖片的摘要字數
summary_img = 360; 有圖片的摘要字數
img_thumb_height = 140; 圖片的高度
img_thumb_width = 140; 圖片的寬度
如果有裝這個Hacks，你先前的繼續閱讀功能會失效，會以這個的設定為主，所以通常字數我都會設很小，例如設
summary_noimg = 100;
summary_img = 80;

2、標頭區可安裝廣告(468*60)

一開始安裝，你會發現版面上多了一個160*600的廣告，這是安裝在標題右側的廣告位置，你可已在後台小工具找到AdSense這個設定，將它改成468*60的格式即可配合整個版面的設計，或是移除，放置其他的小工具，這個區位的定義是#header-right。

3、標頭區下方有圖片展示空間，替換圖片容易


之前綸太郎有在在部落格下方加個雜誌版型的圖文導覽列這篇文章裡提到怎樣設定長條型圖片展示，增加部落格的吸引力，

而這個作者用了更方便的方式，我們只要編輯後台上方標題為"Lorem ipsum dolor"那四個小工具的設定，就可以隨時替換圖片與連結，而不用到html去修改。

後台設定小工具，



完成後的模樣，


4、意見回應區作者頭像的設定，無法正確顯示


由於這個模版製作時應該是沒有考慮到現在Blogger官方已經釋出頭像顯示的功能，所以你如果設定意見區頭像要顯示，格式上會有些錯亂，所以想使用這個模版，目前設定最好是設成不顯示大頭，算是這個模版最大的缺點，我有試著修正過，但是無法成功。

5、相關文章功能(Related Posts)


這個模版很貼心，已經設計好相關文章的列表顯示，會以相同標籤的文章為基準。

以上就是這個模版的介紹，算是多功能性的模板設計，熟悉模板配置的朋友，可以試用看看。

善用版面空間做AdSense廣告配置

網站的編排通常會以有限的空間作最有效的利用為原則，當然適當的留白也是很重要，但如果你的部落格不是以設計為主，而是一般的部落格而且有放Google AdSense時，這時留白的空間就可以利用網站CSS編排設計，來適當運用這些空間了。

通常我們會在本文的下方或是上方放入Google AdSense的廣告，這時你會發現右手邊空了一大塊，這時我們就可以妥善的運用這塊地方，放入你想配置的單元。

通常找到#main-wrapper { 就可以知道你的本文寬度為多少，以本站來說width: 600px;
而一般的AdSense通常我們會放大矩形336*280或中矩形300*250，當然還有小矩形250*250，在AdSense 支援中心裡有說明，我應該使用哪種廣告格式？

我們發現最有效的廣告格式為：336x280 大矩形、300x250 中矩形以及 160x600 寬幅摩天大廣告。

所以以綸太郎的部落格而言，最多可以擠到兩個300*250的廣告，不過並非放滿三個廣告收益就會越大，所以我選擇了放一個大矩形廣告搭配上隨機文章，作為單篇文章下方的廣告單元，不過一直以來都覺得樣式很醜，


今天研究了一下，也跟大家分享怎樣利用CSS編排，來設計一個適合你自己版面的廣告單元，當然不放廣告也可以，你可以放相關文章或是和社會書籤搭配都可以，就看你自己的運用。

先來說明概念，這個廣告單元就如以下面的圖片所示


將一個大單元裡面，劃分成兩個小單元，一個是廣告，一個是隨機文章
整個大單元我們以 .post-extra定義
廣告我們以.post-ads
隨機文章我們以 .post-random
這些定義名稱，你可以自行定義，看得懂即可。
以下是綸太郎定義的相關CSS語法，我的語法配置都是以我自己的模板做範本，如果你要設定，請修改成你自己要用的語法，因為每個人的模板大小、位置都不同。

/* Post-Extra廣告配置及隨機文章單元*/
.post-extra {
width:580px;
height:300px;
background: url(圖片網址) no-repeat 5px;
margin-top: 5px;
}
.post-ads {
float:left;
width:340px;
height:290px;
overflow:hidden;
padding-top: 5px;
}
.post-random {
float:right;
width:230px;
height:270px;
overflow:hidden;
}
.post-random a {
color: #B6EBEB;
}
.post-random ul{
padding:0 5px 0 0;
margin: 30px 0 0 0;
list-style:inside;
}

大單元(.post-extra)的背景圖我以580*300的背景圖為主，


因為我的背景顏色為白色，而且我不想要讓Google AdSense的背景有顏色，然後在隨機文章的背景區位有個藍色的背景圖，到時候我只要調整隨機文章出現的文字區域就能和背景圖相配合。

記得如果你有使用背景圖，相關的高度及寬度一定要標示出來，例如
.post-extra {
width:580px;
height:300px;
如果高度(height:300px;)沒有標示，圖片會顯示部份而已。

廣告(.post-ads) 和隨機文章(.post-random)，
這兩者很重要，一定要設定一邊在左 float:left; 一邊在右 float:left;
還有兩者加起來的寬度width:340px;+width:230px;要小於總寬度(.post-extra)width:580px;，記得有padding及margin都要算進去，然後超出的部分我們不顯示overflow:hidden;。

至於語法裡的
.post-random a {
這是設定隨機文章連結的顏色，因為原先是藍色，那搭配背景又是藍色，一定沒法明顯顯示，所以就多加了上面這個定義，將超連結的顏色設定為淺藍色，加強顯示。

另外.post-random ul{
這是項目單元(ul)的設定，因為如果沒有設定的話，在IE7和Firefox的顯示是不同的，在IE7看不到項目符號●
所以多加了這一個定義，每個人的模板不同，不一定你的不用加就可以顯示了，再則因為我設計的圖片已經有"隨機文章"的字樣，所以margin: 30px 0 0 0;要設定與上方相距30px。

當然Css設定完成就是要更改Html的配置了，先前我們都有提到要使某單元出現你要的css效果，就是以div將他圈住套用，當然這裡也是一樣的，我們找廣告單元，通常搜尋"pub-"這四個字即可，就能找到你的AdSense語法出現的地方，不過我想應該大家都會找，因為也是自己放進去的，但如果你是利用後台的網頁元素小工具新增廣告，這篇就不適用了。

原始模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本" ，找到AdSense 單元
然後用div將相關語法給套住即可，
<b:if cond='data:blog.pageType == &quot;item&quot;'><br/>
<div class='post-extra'>
<div class='post-ads'>
336x280 Google AdSense廣告語法
</div>
<div class='post-random'>
隨機文章語法
</div>
</div>
</b:if>
<div style='clear:both;'/>
你可以看到紅色的div套住了綠色及深藍色的div區塊，這就是我們要達到的效果，前後再用
這個<b:if cond='data:blog.pageType == &quot;item&quot;'> 和</b:if>套住，之前我們已經在幫自己設計個版權所有的小方塊單元說明過，是讓這個單元在首頁不出現，單篇文章才出現的語法，所以記得你的div class是要放在這個語法下面，至於<div style='clear:both;'/>這是要清除格式的語法，這樣你就可以有個像綸太郎一樣的廣告單元配置了。


其實這個效果也是可以用表格(Table)做出來的，但較常利用在邊欄的小工具上，就是設計一個表格裡面放入兩個元件，如果想做的朋友也可以利用"Google文件"，自己設計也是可以的，簡單的也是可以利用，但還是建議用css作這樣類似表格配置的處理，一來變更較容易，再來程式碼也較少，網頁載入負擔較輕。

初學者建議還是了解相關的配置再來玩這一部份，有空可以看看"新手推薦閱讀"單元，不然你會有一堆問題等著解決，常有朋友說看了文章還是不了解，因為我想大家都看了自己想看的那一篇，但是前後的相關知識或是資訊還未學習完成，其實大部分我的文章都有提到，Google Blogger官方的說明---Blogger 說明，也很多參考資料，只要你有耐心慢慢看，善用Google搜尋來慢慢學習，我想總會融會貫通的，早晚可以打通你的任督二脈的，擁有一個你自己親手打造的部落格。

適用部落格模板的圖示組合

當我們使用了官方的模板或是其他網路設計者設計的模板時，有時也想換換裝，幫自己的部落格增添活潑的小圖示(Blog Icons)來替代文字說明或是襯托文字，讓主題更明顯時，圖案的設計相對來的重要，如果自己不會設計，以下有幾款是適合使用在部落格上的小圖示，跟大家分享。

張貼意見以其他文字或圖片代替

在Google Blogger的留言模式有整頁模式、彈出式視窗及最新的已內嵌下列文章三種，如果你不是使用內嵌留言的方式，而想以圖片或是其他文字替代官方的"張貼意見"按鈕，可以參考下列的作法。


原先模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本"
找到這句語法，
<data:postCommentMsg/>
你會發現有兩個地方會出現，要修改的是比較下方的那一個，就是語法裡面沒有width寬度和height高度的內嵌式(comment-form)語法。


要找到比較下方這個才對。


【文字顯示】
把<data:postCommentMsg/>換成你想要顯示的文字，例如"請留下你的意見"

【圖片顯示】
將
<data:postCommentMsg/>換成
<img src='圖片網址'/>
記得在Blogger的html語法裡，<img src="圖片網址"/>後面一定要有斜線/，不然模板會顯示錯誤，而無法儲存。

用圖片替代的方式，讓讀者可以輕鬆的知道要按哪裡留下他的意見，也是不錯的模板的小改造，如果喜歡我製作的圖片，請在圖片上按右鍵另存新檔，放到你自己的圖片空間裡，或是自己做個小圖也是可以的。


注意到張貼意見下方有個連結，就是訂閱的網址
訂閱：張貼意見(Atom)
綸太郎加上圖片後覺得有點礙眼，想把它消掉，怎麼做呢
一樣在後台]]></b:skin>之前加上這句定義，
.feed-links{
display: none;
}
這樣這個連結就會隱藏了，如果你的模版本來就有這個定義，那就不用新增了，直接加上display: none;的敘述即可。

但是這個連結是提供讀者訂閱的功能，一定要確定你的部落格有其他的連結按鈕可以訂閱，不然如果有些人不太會使用RSS功能，或者不知道從網址那裡按下橘色的RSS圖示就能訂閱，就會少了一個讓讀者訂閱的管道，這是要注意的小細節。

所以模板改造不用急在一時，大原則搞定，然後再慢慢修飾小地方，你也是可以擁有一個與眾不同的部落格的。

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

這篇是有關模板結構每個元件定義的初淺說明，如何設計一個個獨特個性化的版面，這裡或許有些資訊你是可以參考的，但如果是剛加入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粉絲歡迎頁面---多媒體篇

2010.8.21更新，
未來Facebook已經不再支援FBML語法，所以此篇教學內容已沒有作用，未來是以iFrame語法為支援對象，等綸太郎研究過後再跟大家分享。

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主要是以宣傳該公司高品質的寫真素材，還有利用寫真圖片創造出各種效果的服務為主。

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

這小東西是綸太郎在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 == "item"'>
及
</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 == "item"'>
<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粉絲歡迎頁面---撰寫篇

2010.8.21更新，
未來Facebook已經不再支援FBML語法，所以此篇教學內容已沒有作用，未來是以iFrame語法為支援對象，等綸太郎研究過後再跟大家分享。

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

2010.9.5更新，
Facebook以後將不會再支援FBML，而以IFRAME來支援，相關可以參考這篇
Facebook Markup Language (FBML)

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

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

2010.8.24更新，
這個Hacks在IE底下，無法正常顯示。

今天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帳號的人也急遽增加，我想應該會是個很好的平台，來宣傳行銷自己的部落格，作為與網友互動的園地。

在本文區上方加個導覽列(BreadCrumbs on top)有更新

BreadCrumbs是麵包屑的意思，也就是文章的導引列，可以詳細的列出此篇文章的上源結構的一種導覽方式，也是方便讀者想讀取同一分類文章的作法，有需要的人可以參考看看。

但這個導覽列有個缺點，就是如果一篇文章有多個分類，這個工具只會選擇一個分類顯示，目前已解決多種分類的問題，和標題出現兩次(可自行選擇導欄列要不要出現標題)的問題，在第三步驟的語法上修改，謝謝disorder網友熱心的提醒與教導，如下圖這樣。


設定方法有些複雜，但我想依照步驟慢慢做，應該就沒問題，呈現的方式類似這樣，裡面的關鍵字或是呈現出來的形式，則是可以自己再行設計，


切記，一定要先備份原始模版，因為放了這些語法，會導致整個主文區的html整個都不一樣，不是刪減就能挽回的，
進入後台→版面配置→修改Html→勾選"展開小裝置範本"，
第一步驟，
先加入導覽列的外觀型式css語法，放在]]></b:skin>之前即可，

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
border-bottom:3px double #e6e4e3;這是在導覽列下方有個雙線條的設計，這裡你可以改成你要的線條或是加上背景也是可以的。

第二步驟，
找到<b:includable id='main' var='top'>這段主文區最上方語法，原始的語法是
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
在中間加入三行紅色的語法，變成如下列這樣，
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>
default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

第三步驟，
在<b:includable id='main' var='top'>之前加入以下這段語法，所以他呈現的地方是在主文區的上方，
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>»
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
»<span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
上面的紅色的Browse及Home是預設的文字，你可以改成你要的文字，一共有四組，例如瀏覽或首頁都是可以的，綠色的部份則是相關敘述，也可以改成中文，如下圖這樣，按下儲存，你的文章導覽列就出現了。


目前這項功能是將導覽列放在文章標題上方，如果你想放在文章末或是文章標題下方，目前我自己測試過，沒法達成，或許有高手再分享。

另外Abin也有介紹以年月份做分類的導覽連結列 (Year & Month Breadcrumbs)，因為有的人的分類標籤不只一種，喜歡這種方式的人也可以使用看看。

2009.11.3.10:00pm更新，
有網友提到標題重複兩次的部份，可以將第三步驟裡面的(紫色)
<span><data:post.title/></span>這部分刪除就可以不會有兩次標題的情形。

參考來源：
Make breadcrumb on top of post

如何讓文章無法反白選取，避免文章被抄襲

上次在如何防止他人複製文章的方法(鎖右鍵)，提到用鎖右鍵方式讓他人無法使用Ctrl+C來複製你的文章和圖片，破解方式比較簡單，而今天要介紹的則是讓人無法選取你的文章(Disable highlight text)，當然也就無所謂的複製貼上的問題，更多了一層保護自己文章心血的利器。

這個對以文字為主題的部落格比較有利，文字部分因為有牽涉到顏色大小、字型及相關聯結等等，就算是看原始碼(如下圖)，也常常被切的亂七八糟，而且中文的標點符號會變成編碼，如下圖這樣，我想抄襲的人也懶得去擷取其中他要的文字吧，自然被抄襲的機會就大大降低，但當然他如果要套用你的文字設定，整篇抄走也是有可能的。


如何設定呢? 方式也很簡單，

進入後台→版面配置→網頁元素→新增小工具→新增HTML/JavaScript ，然後輸入下列程式碼即可。
<script type="text/javascript">

/***********************************************
* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>
按下儲存即可，建議這個元件的位置可以放前面些，讓他一載入網頁就發揮效用，因為他的程式碼是不會出現在網頁上的，所以擺在哪裡比較不會影響畫面的美觀。

其他部落格系統應該也可以使用，只要有支援Java Script語言的自由欄位，放入這些程式碼即可，有需要的朋友可以試看看。

P.S.綸太郎的教學文章目前是不會採用這個功能的，不然讀者就無法拷貝那些程式碼了。

2009.11.2更新，有網友提到，封鎖"這樣等同於「封鎖 Firefox」、「封鎖 Google 功能」"，我想利用的朋友也不是很樂意這樣用的，譬如推文網站，想推文的人可能因為沒法複製你的片段文字，就放棄推文，但我想以創作文章的人而言，被盜用文章是很ooxx的事情，還要花時間跟對方溝通，對方還不一定要將文章拿下，或許還不甩你，這是一種預防功能，要不要用我想每個格主心中都會自我衡量。

至於封鎖firefox的google功能，這就是對讀者有些不便的地方，因為在Firefox瀏覽器下，可以選取一段文字，然後按右鍵，會出現以Google搜尋「被選取文字」的功能，當然使用了這個無法選取的工具，這作用也就失效了，但其實這功能我自己也很少利用。

一方面想讓你的網頁或是部落格有可親性，但另一方面也要維持自己的心血不被別人抄襲利用，我想是創作者自己要衡量拿捏的，雖說破解方式還是有，但總是聊勝於無，減少一些枝枝節節的麻煩產生罷了，要不要放就看格主自己決定了，我只是想分享有這樣的功能的工具，稍微解決一些存在中的問題。
參考來源：
Disable highlight text on blogger