完完整整的教你更換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)

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

<link href=’×/favicon.png’ rel=’icon’ type=’image/x-icon’/>

<link href=’×/favicon.png’ rel=’Bookmark’/>

<link href=’×/favicon.png’ rel=’shortcut icon’/>

×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=’http://lh3.ggpht.com/_TRAjUsvHYZs/Sakwc4S-VdI/AAAAAAAAFRQ/lWTqeyjX9B8/s800/favicon.png’ rel=’icon’ type=’image/x-icon’/>

<link href=’http://lh3.ggpht.com/_TRAjUsvHYZs/Sakwc4S-VdI/AAAAAAAAFRQ/lWTqeyjX9B8/s800/favicon.png’ rel=’Bookmark’/>

<link href=’http://lh3.ggpht.com/_TRAjUsvHYZs/Sakwc4S-VdI/AAAAAAAAFRQ/lWTqeyjX9B8/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 - 2G支持外链免费网络硬盘

按鄙人免費送您的地址前往后,需要下載安裝軟件客戶端來註冊使用,註冊完成後會在你的電腦上建立一個目錄,將你的文件放到這個目錄下,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就是頭,愛放哪放哪,另外,前幾行的代碼是回復時間,如果您有用,也盡可拿去使

2 thoughts on “完完整整的教你更換blogspot模板

  1. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    Joannah

    http://linuxmemory.net

  2. Thanks
    but my Elglish is pool
    Linux?that’s something I ignoran。Most Taiwanese use MAC or MW
    You can understand chinaese?

Comments are closed.

Proudly powered by WordPress | Theme: Journey Blog by Crimson Themes.