
今天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.
閱讀全文 ►►►