LinkWithIn 顯示部落格其他相關文章

在部落格文章中，顯示訪客可能感興趣的其他相關文章

官方網站：LinkWithIn
參考文章：LinkWithIn ~ 用縮圖顯示網站的相關文章

Google Analytics 訪客流量行為分析

下列網址教學安裝Google Analytics追蹤碼，
另外並加裝網站速度追蹤程式碼

連結網址：Google Analytics 流量分析新增網站速度統計，安裝追蹤碼教學

Page2RSS 訂閱沒有提供RSS訂閱的網站

對於不提供RSS訂閱的網站，只要將網址貼到Page2RSS，
便會出現Page2RSS提供的RSS訂閱文章的網址了
Page2RSS提供Chrome擴充套件，也可直接至該官方網站直接使用

官方網頁：Page2RSS
官方網頁(Chrome擴充套件下載)：Page2RSS
參考文章：Page2RSS 搞定無法訂閱RSS的網站
##ShowAll##

Code Snippet plugin for Windows Live Writer 撰寫高亮程式碼外掛

Windows Live Writer是微軟開發用來方便撰寫部落格的軟體，評價相當好
撰寫的程式碼欲使其高亮化，需要使用外掛，
主要分成Code Snippet和SyntaxHighlighter的格式
前兩種可預覽，較為方便

1. Code Snippet plugin for Windows Live Writer

2. Insert Code for Windows Live Writer
3. SyntaxHighlighter for Windows Live Writer

參考文章：發布技術文章 (Windows Live Writer + 程式碼插入外掛程式)
##ShowAll##

Windows Live Writer 部落格寫作軟體

好用方便的部落格寫作工具，可支援各大部落格


官方下載：Windows Live Writer

ColorSchemer 網頁架站自動配色工具

協助你選擇網路架站的所需的相關配色，
點選一顏色，就會自動幫你找出相關的配色

連結網址：ColorSchemer

20個提供大量精美ICON向量小圖示網站

架設網站所需的ICON圖示，
一些大量ICON圖示搜尋下載網站
每個網站都有非常大量的精美小圖示喔！

1. ICON FINDER
2. ICONES.PRO
3. IconSeeker
4. iconPot
5. ICONS
6. FIND ICONS
7. PC.DE
8. iconnice
9. SOFTICONS
10. Mr.Icons
11. Icon Archive
12. Free Icons Download
13. iconlet
14. ICONZER
15. Icons Etc
16. Free Icons Web
17.ICON WANTED
18.Open Clip Art Library
19.iconpng
20.VeryIcon

參考文章：Icon Download 三個最棒的圖示搜尋引擎,免費網頁素材圖庫下載
IconArchive － 專業圖示搜尋引擎，超過二十萬個免費圖示下載
【Free Icons Download】高質量ICON圖示下載站免費ICON圖示下載【ICONS】超過12萬個精美質感圖示任君選擇
Icones.Pro 搜尋下載數萬個ICON、電腦圖示 
Iconfinder 搜尋、下載10萬個超精美ICON、圖示
3 個「圖示（icon）搜尋器」讓你輕鬆找到合用的圖示
Find ICONS 搜尋、下載30萬個ICON圖示
Iconizer 下載「客製化」的ICON圖示
Icons Etc 提供超過12萬個免費圖示，可打包下載
Free Icons Web 超過 200,000 個高品質圖示素材免費下載
Icon Wanted 收錄超過 20,000 種免費圖示的搜尋引擎
真正完全免費的線上向量圖形庫—Open Clip Art
IconPng 中文圖示搜尋引擎，數萬種圖示免費下載
VeryIcon 免費下載超過 20,000 個 PNG、ICO 圖示
##ShowAll##

將Blog Archive樹狀日期分類收合起來

使用Blogger小工具「網誌存檔」
預設的樹狀結構會將最新文章的樹狀展開
> 年
   > 月
     > 標題
     > 標題
     > 標題

將它收合的方法：
##ReadMore##
到「修改HTML」的網頁找到這段代碼
<li expr:class='"archivedate " + data:i.expclass'>
用下列代碼取代
<li expr:class='"archivedate collapsed"'>

但這樣還沒結束，
搜尋代碼找到9660這個數字，
將它改成9658，就可把箭頭改成收合的方向

如何將文章列表/摘要，「繼續閱讀」使用感想

終於完成了部落格列表和展開的功能，
這簡單的功能我關鍵字怎麼找這麼久，真折煞了我
在網路上看了幾篇「繼續閱讀」的語法，
「繼續閱讀」的目的就是讓文章只顯示幾行內文的摘要
##ReadMore##
1. Blogger 的「繼續閱讀」
這是最基本的方法，
如果當初知道有這功能，
我也不會雞婆去嘗試這麼多語法了
參考文章：Blogger 推出繼續閱讀功能


2. 羊男的「繼續閱讀」
其實製作稍微有點複雜
功能跟Blogger的一樣，直接使用Blogger的就好
參考文章：Blogger Beta 中 Read More 與 Archive 只顯示標題作法

3. Xavier的「繼續閱讀」
一個最簡單的方法來自動製作「繼續閱讀」
而且之後撰寫文章也不用另外插入程式碼，
當然，功能也是最簡易
參考文章：Blogger繼續閱讀終極懶人版

4. CJH的「繼續閱讀」(好用)
這是目前部落格在使用的「繼續閱讀」
要簡單可以很簡單，要複雜，參數設定也很多
最重要的是有文章/展開合併的功能
其他套好像都沒有這功能
缺點就是速度實在太慢了，要想辦法調整了
參考文章：[BLOGGER]繼續閱讀懶人加強版 最新版本 v2.2.1(2009.5.8)

5. 加快CJH的「繼續閱讀」
讓圖片不要讀入快取
不過我撰寫的筆記沒有多少圖片，就不研究了
參考文章：blogger「繼續閱讀plus！」功能講解！


我的補充：
使用CJH的「繼續閱讀懶人加強版」，
教學並沒有提到如何讓"完整 | 摘要 | 標題"這一串字右移
對於不熟網頁語法的我就很頭痛了
我仿照該站長部落格的方式右移
在版面配置/編輯網頁/修改HTML內，展開小裝置範本並找到這串代碼
/* Posts
----------------------------------------------- */
在下方加入這段語法，參數就自己嘗試啦！
.read-more-controller {
margin:0 28px 0 43px;
font-size:85%;
}

嵌入高畫質YouTube影片語法到部落格

在嵌入的YouTube語法，
有兩段屬於該影片的網址，
HQ畫質，網址後面加上&ap=%2526fmt%3D18
HD畫質，網址後面加上 &ap=%2526fmt%3D22

SiteStates 顯示訪客IP,計數器,PR值,流量管理

有計數器和紀錄IP，這功能好

連結網址：SiteStates
參考文章：Site States－提供顯示訪客IP,計數器,Google PageRank(PR值),流量管理功能

在Blogger上，使用彩色漸層標籤雲

標籤雲的文章很多，想要用得越漂亮，步驟越複雜
我用了一個簡單不華麗的標籤雲
網路上教學文章一堆，但是教學文章是要寫給不會用的人看的，
莫名其妙少了一個步驟，或一堆寫得不清不楚的，寫來幹麻啊！
下面是我參考的一篇寫得夠清楚正確的

參考文章：三步驟把blogger的標籤,改造成標籤雲(Tag Cloud)
補充：
在參考文章中的步驟3，"找到這一列程式碼 (注意, 後面是 /> 結束哦!)"
如果沒有在樣板程式碼中看到"/>"，
必須先儲存，再將"展開小裝置範本"的打勾先取消
備註：節錄一段程式碼，是用在我Blogger中所做的變數設定
var maxFontSize = 20; //最大字型
var maxColor = [255,64,64]; //漸層起始顏色
var minFontSize = 10; //最小字型
var minColor = [255,127,0]; //漸層結束顏色
var lcShowCount = true; //顯示文章篇數

樹狀分類產生器

Blogger只有提供標籤，功能上稍顯不足
我的Blogger的Categories，即是用此方法

連結網站：樹狀分類產生器
參考文章：網站、部落格「樹狀分類產生器」

在文章中顯示程式碼，加上顏色和框架

比較常見的有兩種方法，為了搞這個，花了點時間
原先是用SyntaxHighlighter的外掛來顯示程式碼，
因為他的樣式比較好看，
但在Blogger使用，會遇到一些奇怪的問題，
我一直弄不出來，不想再debug了，就用另一個方法了
不過要顯示程式碼仍然是相當繁雜的工作
（一）加上框架
步驟一
先在Blogger中找到版面配置->修改html
在html樣板程式碼內搜尋到/* Variable definitions這一行
將下方的程式碼貼在/* Variable definitions上方CODE { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; line-height: 1.2em; }

步驟二
在文章中將程式碼置於<code class="ref">程式碼</code>區塊中即可

參考文章：[筆記]在文章裡顯示優質的程式碼區


（二）加上顏色
前面步驟已將框架完成了，若想將程式碼加上顏色，可接著繼續做下列方法
步驟一
在html樣板程式碼內搜尋到;<head;>這一行
將下方的程式碼貼在;</head;>上方

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/><script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/> 

步驟二
繼續搜尋 <body>，將其直接改成<body onload='prettyPrint()'>
步驟三
在文章中將程式碼置於<code class="prettyprint">程式碼</code>區塊中即可

參考文章：在 Blogger 中使用 google-code-prettify 顯示程式碼


（三）備註
在撰寫持程式碼時，會有一些特殊符號，需改寫成html能夠接受的代碼
"&"寫成"&amp;"
"<"寫成"&lt;"
">"寫成"&gt;"
" "寫成"&nbsp;"

（四）完成範例
將上述兩個方法合併即可讓程式碼有框架和顏色地顯示，
在文章中將程式碼置於<code class="prettyprint">程式碼</code>區塊中即可#include <stdio.h>
void main()
{
  int a=10, b=20;
  printf("%d",a+b);
}

2010/08 note
另一個搭配Windows Live Writer來撰寫程式碼的方法，在文章中漂亮地張貼程式碼