完完整整的教你更換blogspot模板

為什么為blogspot更換模板

以前來過的朋友會發現，鄙人的blogger整個模板煥然一新，不知道按各位看官的標準，比前一個如何？上一個是傳說中的mac風格模板，是鄙人某一次路過色彩斑斕的部落格的時候拿下來的。但是那個版有個很大的弊病，就是對自己空間的要求太高，必須要有個能原圖輸出的空間，雖然這個問題現在是解決了（在第二部分里面奉上）但是從顏色到hack，都不盡如人意，那時的我到處找著blogger達人們的文章，仍然不如意者十有八九，最終仍然有載入太慢的問題，另外，那時鄙人期待中的幾大功能不能完美呈現，比如

首頁摘要顯示
更新時間提示
標簽云（label cloud）
回復的順序編號顯示
如現在你看到的上面那一排的標簽（Navbarmenu）

另外還有這么幾個問題

更換了favcion之后，在火狐里我的訂閱按鈕消失了
長時間內，找不到“快速編輯”和“郵件發布”這兩個按鈕，但是代碼里仍然存在
載入非常的慢（主要因為圖片都和js都來自于別人的空間，另外實在太多多余代碼）
編輯里的代碼錯誤（以前hack造成的）

個人因素

鄙人是一個HTC touch HD和HTC Touch Diamond兩臺機加在一起一共刷了100+次rom的鳥人
鄙人的ipod touch 一共越獄玩了五次
鄙人喜歡換女朋友，至今第七個（今年20歲）
……（還不夠嗎）

以上是鄙人換模板的原因
而同樣選擇了blogspot的你，如果至今還在用blogspot自帶的那些毫無個性的模板，就實在太對不起blogspot的自由了，就好像跑到了西方還天天看中國的ccav一樣，是可恥的浪費行為，是自作虐的行為，是毫不利己專門利google的行為……我強烈的推薦您為了更好的享受blogspot帶來的自由，一定要換掉那些官方的模板，這一點都不麻煩，只不過是在管理界面（比如http://draft.blogger.com/home）點擊【版面設置】然后再點擊【修改html】找到【從硬碟的檔案裡上載範本：】然后把在網路上找到的xml檔上傳，就是這么簡單
予按：原始的模板也可以做以下那些hack，您若有那樣的堅持，也可以直接往下面看
當然，這個世界上還有一種人叫做高手，如果您等不是存心來笑話鄙人的淺陋，就還是關了此頁吧，當然，也歡迎指教
我的這個模板來自于http://btemplates.com 那里面有很多值得推介的東西，請自去下載使用，在審美方面鄙人雖然異常在行（比如說炮兵團有活動請我就沒錯）但是鄙人很不喜歡寫《值得一試的N個blogger模板》之類的水文字，鄙人要將有限的精力，盡量放在無限的風月和反共反華上！（寫到這里，挨了某奧地利美女的一拳，Meine Leherin 說了，還必須有D～e～u～t～s～c～h）

在導入xml檔案之前的工作

呃鄙人方才說的導入方法估計人人都會，但事實上會有很多的問題，比如說，您的blogspot已經不再是處子之身，被您插滿了“小裝置”。或者下載的模板里面帶有各種各樣的圖片【jpg、png、gif】等等等等，甚至還有后綴為【.js】的文件，而不愿送佛送到西的做模板的高手們只講了【最好將這些上傳到自己的空間】但是你環顧一看，并沒有免費的空間可以外鏈這些……唉，鄙人也曾經是小白中的一員，深知各位的痛苦，如果您有幸google到我這里來，那么您幸福了，這些全部都可以解決，而且，全部費用！
注：編輯.xml檔案可用微軟office的組件或者是記事本

第一，擁有自己的blogspot網站logo（favicon.ico)

這個鄙人之前的文章（點這里）寫過，但是在兩周后的今天，鄙人在換此新模板的時候發現了一個問題，即

×\facvion.png(ico)為facvion文件的地址

所放置的位置非常重要，事實上，

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

這三行代碼，決不能像我原文提到的那樣，去掉其中的任何一行，比如去掉第一行，確實可以使網站標志正確顯示，但是，會使瀏覽器自帶的探測rss訂閱的功能不起作用。而任何介紹替換部落格的facvion的人，都沒有提出這個關鍵的問題，鄙人也不想多耗時間說明這個問題，只寫下唯一正確的換favicon的方法，即如下所示

   <b:include data='blog' name='all-head-content'/>
    <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxvhTpLxcVME7J0BFw5JYM280NtY0PDxgwo6sE9Se7vgecdXQAguATcdIZi9m2SBmmwZvBJ0ncbMXVTn84eh3mH4vj1YW2zcVLleCUOlzj7qmr9I4lHO_ICz_Tk1I8sYXvlrR18oQrgM/s800/favicon.png' rel='icon' type='image/x-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxvhTpLxcVME7J0BFw5JYM280NtY0PDxgwo6sE9Se7vgecdXQAguATcdIZi9m2SBmmwZvBJ0ncbMXVTn84eh3mH4vj1YW2zcVLleCUOlzj7qmr9I4lHO_ICz_Tk1I8sYXvlrR18oQrgM/s800/favicon.png' rel='Bookmark'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyxvhTpLxcVME7J0BFw5JYM280NtY0PDxgwo6sE9Se7vgecdXQAguATcdIZi9m2SBmmwZvBJ0ncbMXVTn84eh3mH4vj1YW2zcVLleCUOlzj7qmr9I4lHO_ICz_Tk1I8sYXvlrR18oQrgM/s800/favicon.png' rel='shortcut icon'/> <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*

換的方法是，搜索上面代碼的第一行（保證都有）然后按我的示范添加進去后面三個link的部分。當然，作為您自己的部落格，肯定要替換掉我的那個鏈接，用來鏈接ico/png圖片的網盤請看下文

鄙人的favcion

必須是和我一樣的大小為【16×16】像素的【.png/.ico】格式的名為favicon的圖片

第二，擁有自己的可以外鏈任何后綴名文件的網盤空間

為什么要用自己的空間鏈接圖片和其他？
難道您想把你的部落格圖片和jave是否正常顯示的生殺大權交給他人嗎？那怎么是熱愛自由特立獨行的人的作風？！
鄙人當時為了共享《中國即將崩潰》這一本曠世奇書，到處尋找可以方便熱血漢奸好友的直接下載網盤，皇天不負有心人。這東西還真是有，而且免費，有如下恐怖的優勢：免下載工具（直接下載要什么工具？），上傳管理也是輕松無比，不限單文件大小（總量最高3G，做blog太夠了）。
這就是要隆重推薦的

d r o p b o x

提示：它的功能Skydriver也能做到，但是遠沒那么方便
先提示，這東西注冊是要推薦鏈接的，鄙人這里有的是，想看到請先爬文

按鄙人免費送您的地址前往后，需要下載安裝軟件客戶端來註冊使用，註冊完成後會在你的電腦上建立一個目錄，將你的文件放到這個目錄下，Dropbox會自動幫你同步更新到你的 Dropbox網絡存儲空間中。
獲得外鏈方法：

在自己電腦的同步文件夾里，鼠標右鍵點擊你要分享的文件，在Dropbox彈出菜單中選擇“Copy public link”即可複制外鏈鏈接，注意：文件必須在Public目錄下才能分享和外鏈。你也可以登陸Dropbox網站，在線上傳管理你的文件。

Dropbox最新活動：邀請一名好友加入Dropbox可額外獲得250M存儲空間，最多可獲得3G額外存儲空間，加上註冊送的2G空間，免費用戶可擁有5G容量的免費網盤了！
注冊推薦鏈接獲得方法：
請前往鄙人部落格頁面頂上的【工具條】處，移鼠標至【資源共享】，然后彈出【dropbox】請點鼠標中鍵前往注冊
其余：圖片可以用picasa圖床，任何小于50M的東西都可以用skydriver，使用方法在俾文《無足掛齒的一點點技術，為您的部落格改變logo》中有敘述

您的xml中的鏈接大部分都是googlepage的，那是好東西，只是關閉注冊了，非常遺憾

上傳.xml模板檔案的同時如何保持原先的【小裝置】

本人是臉皮很薄的人，必須承認的是，從這段之后，就基本上是到處剽竊而來的成果，但是這段的重要性足夠和地下那些hack相提并論，特別是您如果不是blogspot了無牽掛的新手，那么一定會有很多的小裝置，有些還是部落格中特別重要的一部分，比如統計流量的啦，google analytics埋伏的代碼啦，你自己設置的問卷調查啦（比如我右邊這個政治傾向調查）如果因為一次更換模板就被中斷，那是非常可怖的。如何避免呢，鄙人有個非常簡單的辦法。請容我慢慢介紹
所謂小裝置，在不展開的情況下就是如

<b:widget id='HTML9' locked='false' title='Heifenbrug 的分享項目' type='HTML'/>

的一行代碼，當你在修改html頁面上載新模板之后，如果原先有小裝置，那么此時一定會顯示：

下列小裝置即將被移除
兩個選項：確定，取消
請注意：千萬先不要選，或者點取消

一個最簡單的備份他們的方式即是，在上傳xml檔案之前，不展開原有小裝置代碼，先拿個寫字板復制好全部的如上所示的小裝置的代碼，注意一點，紅字部分是唯一的，各個代碼之間不重復。然后上傳檔案，出現【提示，以下小裝置即將被移除】的時候，按Ctrl+F鍵，搜索以下代碼

<b:section class='sidebar' id='sidebar'

或者

<b:section class='lsidebar'

und so weiter
然后把所有你的小裝置代碼貼在這一行的后面，按底下方框的“保存”于是，他們都不會被移除掉，（以后可以具體調整位置）這是根據blogspot服務器的記憶特性的重大發現，堪稱喜歡對模板始亂終棄的各位的大福音。
可能會提示你“標記×××的代碼重復”改個編號就是了。

鄙人認為很必要的Hack

鄙人有言在先，您做這些hack，最好一項一項來，每做一個前，都備份模板，這是好習慣，不然事情很可能會有些不太妙的走向

給留言增加“樓”的編號

不管是中國還是呆丸，鄉民都用“樓”來表示第幾層留言，一些讓人眼紅的旺博里總有怪人喜歡搶【頭香】和【沙發】，雖然這東西不合鄙人的價值觀，但是——天生缺少這種功能的blogger確實讓人比較不爽，比如回答別人的問題想點個“幾樓”得心算，實在很煩。還好有人發現了這個辦法，雖然我這樣不爭氣的沒幾篇回復過十的家伙是不怎么用得上，但是諸君都前途無量，還是提前裝上它好。
當然這個問題不少人也有發現（追根究底是 Blogger 的樣板語言裡，有迴圈語法卻沒有顯示迴圈 Index 的變數），既然如此，那只好手動塞 Javascript 程式在該迴圈外和迴圈內，單純做個計數器就能夠搞定，不過坊間的改法看起來比較不友善，因此這裡用比較簡單的方式來處理這個問題（鄉民們也比較容易剪貼來用）。
首先定義這個回應編號計數器的宣告和計算。登入管理介面，切到版面配置、修改 HTML 樣板原始碼（要展開小程式範本），在程式碼 <head> 區段內（</b:skin> 標籤後、</head> 標籤前），塞入以下 Javascript 程式：

<script type='text/javascript'>                

//<![CDATA[                 

<!-- Function used for generating the index number for each post: ShowCommentIndex() -->                 

var CommentIndex = 0, CommentPostID = '';                 

function ShowCommentIndex(PostID) {                 

  if (CommentPostID != PostID) {                 

    CommentIndex = 0;                 

    CommentPostID = PostID;                 

  }                 

  document.write(++CommentIndex);                 

}                 

//]]>     

</script>

接下來決定在留言內，要顯示回應編號的位置。基本上只要放在產生所有留言的迴圈「後面」就行了，那一行是：

<b:loop values='data:post.comments' var='comment'>

舉例，我把留言編號放在該篇留言的最後面 (comment-footer 區段裡、留言的時間後面，如同上面的例圖一樣)，顯示編號的程式碼放的位置和內容如下：

<dd class='comment-footer'>                

   <span class='comment-timestamp'>                 

     @ <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>                 

       <data:comment.timestamp/>                 

     </a>                 

     <b:include data='comment' name='commentDeleteIcon'/>                 

   </span>                 

   <!-- Fixed for display comment index -->                 

   | <data:commentLabel/> #                 

   <script type='text/javascript'>                 

     ShowCommentIndex(&#39;<data:post.id/>&#39;);                 

   </script>                 

</dd>

其實新加的關鍵是上面的倒數第六行到倒數第二行，如果編號想顯示在別的地方，請自行變更那五行的位置就行了（想改字型大小、顏色或靠哪一邊，請自己定義那一段的 CSS 樣式）。
提示一下，footer是腳，那么head就是頭，愛放哪放哪，另外，前幾行的代碼是回復時間，如果您有用，也盡可拿去使

添加修改文章的時間提示

鄙人的部落格充滿了讓“堂堂正正的中國人”前來《中國不高興》的內容，有時也分享些書什么的，有時補充點什么資料和新的下載鏈接，在沒有這種hack之前，只能在文章標題上做點手腳，這很麻煩（因為 Blogger 的樣板變數，Post 裡只有發表的 timestamp，並沒有更新的時間..）
不過有人發現，可以從文章單獨的feed里面抓出修改時間這一重要的信息來，接下來不過就是再弄個jave程序讓它顯示的問題
這個設想已經成功（廢話，不然我發出來干嘛）。顯示文章最後的更新時間如下圖所示

其中理論多半也讓您看不懂，所以繼續傳統：一樣複製、貼上、修改就能用這個功能了。打開管理介面、版面配置、修改 HTML 樣板原始碼（一樣要展開小程式範本），在程式碼 <head> 區段內（</b:skin> 標籤後、</head> 標籤前），塞入 Javascript 程式：

<script type='text/javascript'>                

//<![CDATA[                 

<!-- Function used for generating the last update time for each post: showPostUpdateTime() -->                 

function showPostUpdateTime(json) {                 

  var updateTime = json.entry.updated.$t;                 

  var publishTime = json.entry.published.$t;                 

  if (updateTime.substr(0,10) != publishTime.substr(0,10))                 

    document.write(' | 更新於 '+updateTime.substr(0,10)+' '+updateTime.substr(11,5));                 

}                 

//]]>                 

</script>

說明一下，這段 Javascript 的工作原理是：先取得該文章的「發表時間」和「更新時間」，如果「日期」一模一樣，那麼就不顯示更新時間（因為我覺得，在發表文章的同一天內對內容做一點修改無可厚非，可能只是打錯字）。如果日期不一樣，那麼就顯示該文章最後更新的日期和時間。（如果要改顯示格式、內容和判斷規則的，自己修改這段 Javascript，不要再來找我客制化了！實在是很喜歡搞個性但是不會調java的人，鄙人告訴你一個終極的方案，把“更新于”三個中文字改改也成）
接下來，要把觸發以上 Javascript 的函式呼叫塞到原始碼裡，這裡主要也是決定這段更新時間要顯示的位置。以這的範例來看，我把最後更新時間放在「發表時間」的後面，而且，只有在顯示該篇文章全文的時候，才會顯示出來（所以首頁看不到，判斷規則可以參考這篇文章）。所以先找到顯示發表時間 (<data:post.timestamp/>) 的區段，插入紅色的那個程式：

<span class='post-timestamp'>      

  <b:if cond='data:top.showTimestamp'>       

    <data:top.timestampLabel/>       

    <b:if cond='data:post.url'>       

      <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>       

      <!-- Fixed for display post update time -->       

      <b:if cond='data:blog.pageType == &quot;item&quot;'>       

        <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;callback=showPostUpdateTime&quot;' type='text/javascript'/>       

      </b:if>       

    </b:if>       

  </b:if>       

</span>

那個 if 的判斷句就是檢查是不是「顯示文章全文」的狀態，如果到處都想看到「更新時間」，那麼把該 if 判斷拿掉就行了。（<b:if cond……>和其中一個</b:if>）我就是這么干的
作者言：

會想加這項資訊，主要也是想標示文章最後的更新時間，自己在整理筆記時，才知道上次更新的時間，閱讀時也能知道這篇是不是 Po 完就沒動過的舊文章，對於值得一看再看或會修改的文章，這項資訊很有參考價值，對於愛 Po 流水帳、或是 Po 完連自己都不一定會再看的 Blog 來說，這項功能就完全用不到囉～

hack之后消失的【快速編輯】和【電子郵件發布】的復原

hack到現在，如果你運氣不大好，應該就會發現：Post 尾巴 Blogger 內建的「快速編輯」和「電子郵件發佈連結」的圖示消失了【「快速編輯」是在文章後面多一個「鉛筆」的圖示，在管理帳號「登入」的狀態下，可以點圖示直接編輯該篇文章；「電子郵件發佈連結」則是允許讀者將正在閱讀文章的連結、透過點擊按鈕方便寄送到自己或朋友的電子郵件信箱。】

這兩個基本上都是 Blogger 原來就有的功能，不用 Hack，只要透過管理介面開啟就行了（版面配置 -> 網頁元素 -> 選擇「網頁文章」模組右下的「編輯」）：

原則上一旦有設定，每篇文章的文末 (Post-footer) 區段裡，就應該要有這兩個功能圖示的樣式程式碼，類似這樣：（要「展開小裝置範本」才看得到，以下第一段是「快速編輯」、第二段是「電子郵件發佈連結」）

<!-- quickedit pencil -->      

<b:includable id='postQuickEdit' var='post'>       

  <b:if cond='data:post.editUrl'>       

    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>       

      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>       

        <span class='quick-edit-icon'>&#160;</span>       

      </a>       

    </span>       

  </b:if>       

</b:includable>

<!-- email post links -->      

<b:if cond='data:post.emailPostUrl'>       

  <span class='item-action'>       

  <a expr:href='data:post.emailPostUrl' title='Email Post'>       

    <span class='email-post-icon'>&#160;</span>       

  </a>       

  </span>       

</b:if>

功能正常的話，文末應該會有像這樣的圖示：

hack之后這兩小東西消失是因為圖示的鏈接錯誤（可以算作blogspot的一個bug）原理不想講了，直接上方法
在定義 CSS 樣式的區段裡面即(<b:skin> </b:skin> )，直接插入以下幾行，就能覆蓋官方的 CSS 圖檔連結、解決這個問題了：

.email-post-icon {      

background: url("http://www.blogger.com/img/icon18_email.gif") no-repeat left;       

padding: 9px;       

}       

.quick-edit-icon {       

background: url("http://www.blogger.com/img/icon18_edit_allbkg.gif") no-repeat left;       

padding: 9px;       

}

當然，如果有自己喜歡的圖示（給出的是官方的），可以把以上的圖檔連結換成自己的，更能一勞永逸解決問題。

為blogspot部落格加上漂亮的標簽云【label cloud】

這個我更是懶得說明為什么要這么干，你可以看看鄙人部落格的右邊，那些關鍵字，按照文章的多少決定了其大小，這玩意被hack一族稱之為“標簽云”。如果您覺得這樣好看，那么就按地下的步驟做，如果不喜歡，那么跳過。

第一步，在編輯html的頁面（別打開小裝置），按Ctrl+F查找下面這東西

]]></b:skin>

然后把地下那段東西放在它的前面，當然，必須在它（其實就是css區）的定位區域內，按照方便，就貼著放在前面好了

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

然后把地下一段東西放到上面那個標記后面，但是必須在</head>的前面，其實他兩很近的

然后尋找<

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

（不一定完全一樣，只要前半部分一樣就是了）
把這一小段替換為下面的一大段，或者你也可以在這里先保存下html，然后打開小裝置，用下面一大段完整替換上面那條小裝置的全部內容（到

</b:widget>

結束）

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
      if(a>b){
          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
             }
      else{
          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
          }
      return v
   }
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
     if (!labelCount[ts[t]]){
           labelCount[ts[t]] = new Array(ts[t])
           }
        }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
    if(ts[t] < cloudMin){
       continue;
       }
    for (var i=0;3 > i;i++) {
             c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
              }
         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
         li = document.createElement('li');
         li.style.fontSize = fs+'px';
         li.style.lineHeight = '1';
         a = document.createElement('a');
         a.title = ts[t]+' Posts in '+t;
         a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
         a.href = '/search/label/'+encodeURIComponent(t);
         if (lcShowCount){
             span = document.createElement('span');
             span.innerHTML = '('+ts[t]+') ';
             span.className = 'label-count';
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             li.appendChild(span);
             }
          else {
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             }
         ul.appendChild(li);
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
    }
lc2.appendChild(ul);
</script>
<noscript>
    <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>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>
</noscript>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

這一段可以自己去“個性化”其中[ , , ]是顏色代碼，三個數值分別是紅，錄，藍的值，從0，到255，三種顏色會按你調的自動呈現，可以根據自己部落格的背景顏色進行客制

RGB Color Code Chart
也可以用上面那個鏈接
---------------------------------------------------------------------------

如果哪天你也開始教如何hack blogspot，這里告訴你怎么顯示代碼

這個完全是轉載的

写了两篇Blogger教学，觉得写代码没有代码框实在不行。我开始对此很头痛，只能直接将文本代码转换html代码，然后贴上。现在弄明白了，其实很简单，就是要先在模板中加入一段CSS代码。
第一步：进入到控制台－模板－修改HTML ，不用打勾“扩展窗口小部件模板”。在模板内容里找到下面这段代码，你可以通过按Ctrl+F搜索“skin”两次找到 ]]></b:skin></head>
然后将以下的代码段拷贝加到上面代码的前面，就是那两个中括号前面。

CODE {      

display: block; /* fixes a strange ie margin bug */       

font-family: Courier New;       

font-size: 8pt;       

color:#33f;       

overflow:auto;       

background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0lYY77_X9qSMwEgvi2hRyptLJaHXwNxRBIM-VTIPcXqr9ELJLCg5ccoCSEJp5ArsNy0NTsTz9fo5XAAGB2Ia_xSV_x58apWzC_bzu8AudfJZ9TYnyiojzV2oUnYuVjMjG2N7ztuh4QM/) left top repeat-y;       

border: 1px solid #ccc;       

padding: 10px 10px 10px 21px;       

max-height:200px;       

line-height: 1.2em;       

}

第二步：在Html模式下，把文章中将要引用的代码前后分别用《code》和《/code》包起来，这样就可以显示成代码框了。
（予按：在livewritter中有個表格功能，如果你用livewritter寫作，那么，表格里的東西也會被自動轉為代碼標記）
注：请用HTML转换工具来转换您的代码，然后才将代码贴在Blogger里。不然< >里头的内容就会被Blogger的编辑器当成代码执行而不显示。

让Blogger在新窗口中打开链接,方便阅读

步驟——
1.下載相應的java代碼（我剛推介的網盤起作用了）。
js代碼下載：代碼（右鍵另存為）
2.将如下代码添加到Blogger模板的head部分之间（我是添加在</head>之前的）,修改模板先请先备份!

3.確保“擴展小部件”已經選上，查找：

選擇你想要新窗口打開的替换为：

4.此步为修改侧栏中的链接列表以新窗口打开链接的方式,参考并修改自Jason'blog:
查找

選擇修改为

即添加 rel="external" （帶空格）
至此大功告成保存模板。
注：對於日誌中自己添加的鏈接還是會在原窗口打開,這是由於Blogger本身插入的代碼所致,如果同樣想實現新窗口打開的效果,目前Luke只能提供一個比較笨的方法:
在撰寫時切換到“修改Html”，然後將鏈接代碼做如下改動:

變成

即添加 rel="external" (注意空格)

首頁只顯示摘要或標題而非全文

引用自痴人痴语: 存档/标签页仅显示标题及小改进
鄙人覺得他那種方式甚好，所以就不掠人之美，這里放上鏈接，有興趣的自己去看，鄙人這種方式則太麻煩，如果有人有需要，我再單獨寫一篇出來

2009年3月21日星期六