今天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='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
如下圖這樣，
這樣你的回應編號應該就能正常顯示了，但我想當初設計者設計時還沒有大頭的出現，所以綸太郎提供這方法，是我自己研究出來的，可能有些模板不適合，大家可以互相討論看看。
延伸閱讀：
設定留言回應編號，讓部落格互動更活潑
閱讀全文 ►►►
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 != "true"'>,</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
閱讀全文 ►►►
之前有介紹一個網站，
Wowzio，可以用縮圖表示最新文章的元件Widget，但目前這個網站要寫信去申請邀請函才能使用他們的元件，不然我還蠻喜歡他的設計的，目前找到一款也是類似的功能，跟大家介紹。
不過要使用這個元件，後台設定有一項是要開放的，就是開放全文輸出的Rss Feed，
後台→設定→網站提供→網誌文章資訊提供，要設定完整，才能產生作用，如果設定簡短縮圖沒法跑出來，會顯示一張預設的圖，如下圖這樣。
我想看到這一點應該很多格主就放棄了，譬如我就是，不過如果你原先就是全文輸出你的Rss，就沒差了。(文章下方有提供不用全文輸出Rss，也可以顯示縮圖的最新文章，慢慢看下去唄。)
如何設定呢?
進入後台→版面配置→網頁元素→新增小工具→新增HTML/JavaScript ，然後輸入下列程式碼即可。
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://你的網址.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
裡頭的css設計大概如下，
http://i43.tinypic.com/orpg0m.jpg
是文章沒有圖案時，預定出現的圖片。
boxwidth = 298;
你的邊欄寬度
borderColor = "#ffffff";
背景顏色
thumbwidth = 40;
thumbheight = 40;
縮圖的寬和高
summaryColor = "#666";
摘要文字的顏色
numposts = 5;
要秀出幾篇最新文章
home_page = "http://你的網址.blogspot.com/";
你的部落格網址
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
這個js檔，網址
http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js
作者建議將它下載後，放到你自己的空間使用。
另外程式碼裡的背景顏色或是文字顏色，有時跟你的sidebar css設定有關，所以顯示不一定是你所設定的顏色，這是要注意的，譬如我的連結為什麼會變成綠色的，因為我的版面css有設定
#sidebar strong, #sidebar b {
color: #8BCB2F;
}
如果文字是粗體的就以綠色顯示，如果你有同樣問題的朋友，可以找找看自己的模板是否有這樣的設計。
如果有開放全文輸出Rss的朋友，也可以嘗試看看這個附有圖片的最新文章小工具，我想也是不錯用的，速度也很快。
2009.10.29更新，感謝網友flower佛心提供的資訊，Blogger後台也有提供的小工具，不是在基本系列，而是在精選系列區，
網頁元素→新增小工具→按下"精選"，會出現"Recent Posts"，有兩個，第二個才是有縮圖的最新文章小工具，這個就沒有限定要設定全文輸出的Rss了，設定也彈性些，不過沒法自己修改成自己想要的顏色或是文字大小，還有在IE7底下無法呈現，不知是我的瀏覽器的問題或是程式本身的bug，大家可以參考一下。
參考來源：
Recent Posts with Thumbnails Widget for Blogger
閱讀全文 ►►►
過去曾經有人問到
如何鎖右鍵來防止別人複製自己的文章，其實這玩意只能防對電腦一竅不通的朋友，無所謂防君子，因為君子也不會去竊取別人的文章吧，Google搜尋一下就有很多破解方式，所以真的只是防止電腦小白或是懶得搜尋資訊的人吧。
方法非常簡單，
進入後台→版面配置→網頁元素→新增小工具→HTML/JavaScript 新增 ，
然後輸入以下程式碼即可。
<script language="JavaScript">
<!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="Function Disabled!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){ alert(message); return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
其中Function Disabled!可以改成任何你想顯示的文字，
不管柔情勸說或是Kuso調侃甚至威脅恐嚇，隨你高興，例如
複製拷貝他人文章前,請尊重智慧財產權!
注意你的文字敘述，內若有標點符號，最好是轉到英數底下的標點符號使用，例如逗點要以,表示，而不是以，表示，不然標點符號會變成亂碼的。
如何解除有這種鎖右鍵的網站呢?
我想很簡單，這裡就不再多敘述了，網路搜尋一下就有了。
當然綸太郎的文章是不適合鎖右鍵的，不然那些程式碼讀者怎麼拷貝到自己的網站上呢?其實Ctrl+C(複製)和Ctrl+V(貼上)兩個簡單的動作，但真的很傷認真寫文章的站長或是創作者，適當的引用與摘錄是可以的，但是整篇照抄且未註明來源就真的是網路害蟲了，彼此尊重才能擁有更好的網路倫理吧。
參考來源：
How to stop visitors from stealing your blog content.
閱讀全文 ►►►
你要編輯頁籤的區塊都要進入"編輯粉絲專頁"這個功能頁裡面，
