[Blogger] 讓非本站的外部連結, 自動開新視窗

Blogger如果要讓外部連結開新視窗, 都要手動自己加上target="_blank", 非常麻煩

所以寫了一個小程式判斷如果連結不是http://whhnote.blogspot.com開頭　就會另開視窗

展開小裝置範本後, 搜尋</body>

在</body>上面加上如下Code:

<script type="text/javascript">
jQuery("a").each(function(index) {
    var r = new RegExp("^http://whhnote");
    if (!r.test(jQuery(this).attr('href'))) {
        jQuery(this).attr('target', '_blank');
    }
});
</script>

Code中間的http://whhnote改成你自己網站的網址


我有用到jQuery, 通常Blogger應該都會讀取, 如果發現沒辦法用, 將以下code加在上面的Code的上面

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

[Blogger] 在文章上方顯示 麵包削 Breadcrumb

效果如圖所示

到後台-> Design(設計) -> (Edit) 編輯HTML


打勾 Expand Widget Templates (展開小裝置面版)


按Ctrl + F 搜尋 ]]></b:skin>

在該code正上方貼上CSS:

.breadcrumbs{ 
  padding:5px 5px 5px 0; 
  margin:0;font-size:95%; 
  line-height:1.4em; 
  border-bottom:4px double #cadaef; 
}

接著搜尋 <div class='post hentry

在code正下方貼上:

<!-- breadcrumb -->
<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<b:else/> 
<b:if cond='data:blog.pageType == "item"'> 
<div class='breadcrumbs'> 
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » 
<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> 
</b:if> » <data:post.title/>
</div> 
</b:if> 
</b:if>
<!-- breadcrumb -->

[Blogger] 加上文章列表ToC: Table of Contents

有了文章列表了，真棒!!!

Beautiful Beta: BlogToC Widget Released
http://beautifulbeta.blogspot.com/2007/04/blogtoc-widget-released.html

Shioy's Notepad - 筆記：加上文章列表（ToC: Table of Contents）
http://shiouhhc.blogspot.com/2007/08/toc-table-of-contents.html

[Blogger] 使用SyntaxHighlighter在網誌顯示程式碼

Step 0. 目前SyntaxHighlighter支援的程式碼

Brush name	Brush aliases
ActionScript3	as3, actionscript3
Bash/shell	bash, shell
C#	c-sharp, csharp
C++	cpp, c
CSS	css
Delphi	delphi, pas, pascal
Diff	diff, patch
Groovy	groovy
JavaScript	js, jscript, javascript
Java	java
JavaFX	jfx, javafx
Perl	perl, pl
PHP	php
Plain Text	plain, text
PowerShell	ps, powershell
Python	py, python
Ruby	rails, ror, ruby
Scala	scala
SQL	sql
Visual Basic	vb, vbnet
XML	xml, xhtml, xslt, html, xhtml

Step 1. 前置作業
下載SyntaxHighlighter的latest version, 我是用2.1.364

然後解壓縮後將src, scripts, styles資料夾上傳到你的免費空間。

我是放在HiNet的空間(用HiNet的ADSL那麼久，總要有點回饋。)

在此就不討論免費空間怎來了，反正上傳完後你應該會有個檔案的連結網址。
例：http://yourspece/src/shCore.js

Step 2. 到你的Blogger後台選[版面配置] -> [修改Html]
在最下面</body>前貼上以下代碼然後按儲存範本
P.S 下面我用的都是相對路徑，請自行改成正確的路徑，不然再怎貼都錯。

<link href='./styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='./styles/shThemeDefault.css' id='shTheme' rel='stylesheet' type='text/css'/>
<script src='./src/shCore.js' type='text/javascript'/>
<script src='./scripts/shBrushBash.js' type='text/javascript'/>
<script src='./scripts/shBrushCpp.js' type='text/javascript'/>
<script src='./scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='./scripts/shBrushCss.js' type='text/javascript'/>
<script src='./scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='./scripts/shBrushDiff.js' type='text/javascript'/>
<script src='./scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='./scripts/shBrushJava.js' type='text/javascript'/>
<script src='./scripts/shBrushJScript.js' type='text/javascript'/>
<script src='./scripts/shBrushPhp.js' type='text/javascript'/>
<script src='./scripts/shBrushPlain.js' type='text/javascript'/>
<script src='./scripts/shBrushPython.js' type='text/javascript'/>
<script src='./scripts/shBrushRuby.js' type='text/javascript'/>
<script src='./scripts/shBrushScala.js' type='text/javascript'/>
<script src='./scripts/shBrushSql.js' type='text/javascript'/>
<script src='./scripts/shBrushVb.js' type='text/javascript'/>
<script src='./scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.ClipboardSwf = './scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Step 3 使用方法. 在發表文章時加入下面代碼即可

<pre class="brush: language">
程式碼
</pre>

效果如下圖：