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

作者

添加修改文章的時間提示

鄙人的部落格充滿了讓“堂堂正正的中國人”前來《中國不高興》的內容，有時也分享些書什么的，有時補充點什么資料和新的下載鏈接，在沒有這種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>的前面，其實他兩很近的

<script type=’text/javascript’>

// Label Cloud User Variables

var cloudMin = 1;

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

</script>

然后尋找<

<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&gt;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 = &quot;<data:label.name/>&quot;;

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] &lt; cloudMin){

continue;

}

for (var i=0;3 &gt; 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(http://lh5.ggpht.com/_xQo3SUszuug/SWyqG9n1G8I/AAAAAAAAARo/_ePknIN4Pqo/Code_BG.gif) 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>之前的）,修改模板先请先备份!

<script src=’ http://dl.getdropbox.com/u/761343/javascript/blogger_open_new_blank.js‘ type=’text/javascript’/>

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

<a expr:href=’data:post.url’>

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

<a expr:href=’data:post.url’ rel=’external’>

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

查找

<a expr:href=’data:link.target’ ><data:link.name/>

選擇修改为

<a expr:href=’data:link.target’ rel=”external”><data:link.name/>

即添加 rel=”external” （帶空格）

至此大功告成保存模板。

注：對於日誌中自己添加的鏈接還是會在原窗口打開,這是由於Blogger本身插入的代碼所致,如果同樣想實現新窗口打開的效果,目前Luke只能提供一個比較笨的方法:

在撰寫時切換到“修改Html”，然後將鏈接代碼做如下改動:

<a href=”http://lukexzt.blogspot.com/”>鏈接</a>

變成

<a href=”http://lukexzt.blogspot.com/” rel=”external”>鏈接</a>

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

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

引用自 痴人痴语: 存档/标签页仅显示标题及小改进

鄙人覺得他那種方式甚好，所以就不掠人之美，這里放上鏈接，有興趣的自己去看，鄙人這種方式則太麻煩，如果有人有需要，我再單獨寫一篇出來

页码： 1 2

《完完整整的教你更換blogspot模板》有2条评论

  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？

    回复

发表评论