Blog語法研究室: 8月 2009

2009年8月25日星期二

如何左右移動側邊欄位置

https://blogger-script-study.blogspot.com/2009/08/blog-post_25.html?m=0

你有沒有過這樣的經驗，在 Blogger 的標準版型或在網路上看到一個喜歡的兩欄式板型，但是它的側邊欄卻是在左手邊，可是我就是喜歡側邊欄放在右邊的板型，無奈之餘只好放棄或是勉強用用。

現在沒有關係了，只要簡單幾個步驟就可以輕鬆的變換側邊欄的位置，無論你是想要側邊欄放在左邊或是右邊都可以如你所願。

寫在前面

本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
更改 Blogger 的板型(template)前，請記得每次先備份自己的【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。

更改板型－移動左側邊欄為右側邊欄

修改前的板型(側邊欄再左邊)	修改後的板型(側邊欄在右邊)

1. 打開 Bolgger 板型之後，先找到【div#main {】，然後重新定義其「文章主欄」及「側邊欄」樣式的定位即可。

定義 sidebar 欄位中的 float 為 right，則側邊欄就靠右；反之亦然。
定義 main 欄位中的 float 為 left，則側邊欄就靠左；反之亦然。
要注意：勿同時設定 sidebar 及 main 同時為 left 或同時為 right，這樣會讓他們重疊在一起。

2. 通常「文章主欄」會稱為 main 或是 main-wrapper，而「側邊欄」則會稱為 sidebar 或是 sidebar-wrapper。

3. 如果有設定導覽列選單的板型，也要適時的調整其位置，導覽列應盡量避免放置魚側邊欄的正上方，否則畫面看起來會很擁擠。如果導覽列是放在標題列之中則令當別論。

4. 請注意：所有的指令後面都要接一個「半形分號(;)」當作結束，如果忘記打的時後，系統會自動認為到下一個(;)前都是指令螞，所以並不會發出警告，而且還可以執行及儲存板型，但卻會造成指令執行不完整，而出現意想不到的結果，所以板型存檔後，要是看到了預期外的畫面出現，就是看看是不是忘記這個「半形分號(;)」了。

▼ 修改前的板型內容。

程式碼

@media all {
div#main {
    float:$endSide;
    width:66%;
    padding-top:30px;
    padding-$endSide:0;
    padding-bottom:10px;
    padding-$startSide:1em;
    border-$startSide:dotted 1px $bordercolor;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
div#sidebar {
    margin-top:20px;
    margin-$endSide:0px;
    margin-bottom:0px;
    margin-$startSide:0;
    padding:0px;
    text-align:$startSide;
    float: $startSide;
    width: 31%;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
}

▼ 修改後的板型內容 (紅色為更改的部份)，注意文字必須正確。

程式碼

@media all {
div#main {
    float:left; /* 定義文章主欄對齊的方式改為靠左(left) */
    width:66%;
    padding-top:30px;
    padding-$endSide:0;
    padding-bottom:10px;
    padding-$startSide:1em;
    border-$startSide:dotted 1px $bordercolor;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
div#sidebar { /* 這裡定義側邊欄的樣式 */
    margin-top:20px;
    margin-$endSide:0px;
    margin-bottom:0px;
    margin-$startSide:0;
    padding:0px;
    text-align:$startSide;
    float: right; /* 定義側邊欄對齊的方式改為靠右(right) */
    width: 31%;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
}

▼這是板型修改後的成果。

回到 Blogger 部落格技巧總整理

2009年8月24日星期一

如何於Blogger增加部落格導覽列選單頁籤

https://blogger-script-study.blogspot.com/2009/08/setup-browser-menu-for-blogger.html?m=0

製作導覽列選單或頁籤，相信是很多部落客想要的功能，因為好的導覽列選單可以讓使用者更方便的瀏覽你的網站，增加其停留在你網站的時間，並減少網頁的跳出率，但是 Blogger 的標準板型裡並不提供導覽列選單，由國外下載的板型又不見得符合自己的需要，所以這篇我們就來研究看看如何在 Blogger 的標準板型中增加導覽列選單/頁籤。

寫在前面

本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
更改 Blogger 的板型(template)前，請記得每次先備份自己的【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。

更改板型－新增導覽列選單或頁籤

修改前的板型	修改後的板型(出現導覽列選單了)

1. 打開 Bolgger 板型之後，先找到【/* Variable definitions】，然後新增兩組顏色常數定義。這是為了方便以後我們想要更改側邊欄標題顏色時，只要來這邊更改即可。

第一組變數定義「導覽列選單的字型樣式」(變數名稱：menufont)。
第二組變數定義「導覽列選單的背景顏色」(變數名稱：colormenubackground)。
第三組變數定義「導覽列選單滑鼠滑到時背景顏色」(變數名稱：colormenubackgroundhover)。
第四組變數定義「導覽列選單字型顏色」(變數名稱：colormenutext)。
第五組變數定義「導覽列選單滑鼠滑到時字型顏色」(變數名稱：colormenutexthover)。

▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。

程式碼

/* Variable definitions
   ====================
   <Variable name="sidebartitlecolor" description="SideBar Title Color"
             type="color" default="#FFFFFF" value="#FFFFFF">

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。

程式碼

/* Variable definitions
====================
<Variable name="menufont" description="Menu Text Color"
type="font" default="normal bold 100% 標楷體,Arial", value="normal bold 100% 標楷體,Arial">

<Variable name="colormenubackground" description="Menu Background Color"
type="color" default="#B8A80D" value="#B8A80D"> /* 導覽列選單背景顏色 */

<Variable name="colormenubackgroundhover" description="Menu Background Color While mouse on it"
type="color" default="#80B0DA" value="#80B0DA"> /* 導覽列選單滑鼠滑到時背景顏色 */

<Variable name="colormenutext" description="Menu text Color"
type="color" default="#FFFFF" value="#FFFFFF"> /* 導覽列選單字型顏色 */

<Variable name="colormenutexthover" description="Mouse on Menu text Color"
type="color" default="#0000CF" value="#0000CF"> /* 導覽列選單滑鼠滑到時字型顏色 */

2. 再用搜尋功能找到【body {】，要在【body {…}】之後定義選單的的樣式。

第一組變數定義「導覽列選單的背景顏色」(變數名稱：colormenubackground)。
第二組變數定義「導覽列選單滑鼠滑到時背景顏色」(變數名稱：colormenubackgroundhover)。
第三組變數定義「導覽列選單字型顏色」(變數名稱：colormenutext)。
第二組變數定義「導覽列選單滑鼠滑到時字型顏色」(變數名稱：colormenutexthover)。

▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。

程式碼	body { margin:0px; padding:0px; background:$bgcolor; color:$textcolor; font-size: small; } #outer-wrapper { font:$bodyfont; }

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。

程式碼

body {
margin:0px;
padding:0px;
background:$bgcolor;
color:$textcolor;
font-size: small;
}

/* === Menu start === */
#menu {
    width: 66%; /* The value shall be same as main-wrapper */
    height: 40px; /* 導覽列選單的方塊高度 */
    margin: 0 auto;
    float: right; /* 將導覽列選單定位靠右，如果沒有設定會造成選單不能定位 */
    margin-top: -10px; /* 定義導覽列選單距離部落格標題的上下位置，可以試著調整看看，-50px應該會放到部落格標題裡面吧! */
}

#menu ul {
    margin: 0;
    list-style: none; /* 沒有清單前置符號 */
    line-height: normal;
}

#menu li {
display: inline;
}

#menu a { /* 定義導覽列選單的樣式 */
    display: block;
    float: left;
    height: 20px;
    padding: 5px 15px 5px 15px; /* 文字在導覽列選單中的位置 */
    text-transform: uppercase; /* 自動轉換為大寫英文 */
    text-decoration: none;
    font: $menufont; /* 設定字型樣式參考 menufont */
    margin-top: 5px; /* 定義上方物件的距離 */
    margin-left: 3px; /* menu item 間的間隙 */
    color: $colormenutext; /* 主選單的文字顏色 */
    background:$colormenubackground; /* 主選單的背景顏色 */
    -moz-border-radius: 5px; /* Radius corner for Firefox only */
    -webkit-border-radius: 5px; /* Radius corner for Safari and Chrome only */

}

#menu a:hover { /* 當mouse移到選單項目連結時的文字及背景樣式 */
    text-decoration: underline; /* 定義導覽列字形會出現底線 */
    color: $colormenutexthover;
    background: $colormenubackgroundhover;
}

#menu .first a { /* 定義第一個選單項目的樣式 */
background:$colormenubackground; /* 導覽列選單的背景顏色 */
}
/* === Menu end === */

#outer-wrapper {
font:$bodyfont;
}

3. 第三步驟，利用搜尋功能找到第一個【</b:section>】，然後在</b:section> 及 </div> 之間後新增一段程式碼。這段程式碼就是想要出現在導覽列選單上的選單文字。

假設導覽列選單的項目為：

這裡只要使用 UL 及 LI 指令即可。其他的樣式多已經在第二步驟定義好了。
程式碼中的【#輸入網址位置】必須輸入真正的相對應的網址位置。
程式碼中的 Title=’…’ 內可以填入更多想要讓讀者知道的資訊，這些資訊會在滑鼠滑到其上方時出現。

▼ 修改前的板型內容 (藍色文字為「側邊欄標題修改時」新增部份)。

程式碼	</b:includable> </b:widget> </b:section> </div> <div id='content-wrapper'>

▼ 修改後的板型內容 (紅色為新增部份)，注意文字必須正確。

程式碼

</b:includable>
</b:widget>
</b:section>

<div id='menu'>
    <ul>
        <li><a href='#輸入網址位置' title='部落格最新文章'>最新文章</a></li>
        <li><a href='#輸入網址位置' title='可以留言和我交換連結'>交換連結</a></li>
        <li><a href='#輸入網址位置' title='可以多了解我一點'>想認識我</a></li>
    </ul>
</div>

</div>
<div id='content-wrapper'>

▼這是板型修改後的成果。

回到 Blogger 部落格技巧總整理

2009年8月22日星期六

為側邊欄的標題框加上圓角

https://blogger-script-study.blogspot.com/2009/08/border-radius.html?m=0

「圓角框」總給人一種舒服的感覺，所以如果可以在自己的網頁中加入圓角框，除了可以增加親和力，也可以為自己的網頁加分，但圓角框卻是很多程式設計師的惡夢，一般較簡單的方法是使用預先畫好的圓角框圖形並把它設定為背景使用，但這種方法卻只能適用在固定頁面大小的網頁及部落格版型，當然也不是不能解決，就是麻煩了點。還好CSS3的草案中新增了一個叫 border-radius 的屬性，可以讓程式設計師輕鬆的作出圓角形狀，可惜的是目前只有 Firefox、Safari、及Chrome 支援此功能，Opera 及 IE8.0都不支援。

本篇文章就先分享如何用使用 border-radius 達成圓角框的效果。由於我們之前已經有設定過側邊欄標題的背景顏色，所以我們就援引側邊欄的標題方框例子，並把它改造成圓角框。

寫在前面

本文章所介紹的修改方法，都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型。
更改 Blogger 的板型(template)前，請記得每次先備份自己的【Blogger 範本】，才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。
本篇文章所採用的方法僅適用於 Firefox、Safari、Chrome等瀏覽器，不適用 IE(含8.0)、Opera。

更改板型－側邊欄標題背景框加圓角

修改前的板型	修改後的板型(是否親和多了)

1. 一樣用搜尋功能找到【sidebar h2】，然後在定義側邊欄的地方新增兩行字。

適用於 Firefox 的圓角框指令，半徑為 8 個點。 -moz-border-radius: 8px;
適用於 Safari, Chrome 的圓角框指令，半徑為 8 個點。-webkit-border-radius: 8px;
以上兩個指定都是試定整個方框的四個角為圓角，另外也可以單獨設定個別的角落為圓角
- -moz-border-radius-topleft 適用於 Firefox, 設定左上角為圓角
- -moz-border-radius-topright 適用於 Firefox, 設定右上角為圓角
- -moz-border-radius-bottomleft 適用於 Firefox, 設定左下角為圓角
- -moz-border-radius-bottomright 適用於 Firefox, 設定右下角為圓角
- -webkit-border-top-left-radius 適用於 Safraiire, Chrome, 設定左上角為圓角
- -webkit-border-top-right-radius 適用於 Safraiire, Chrome, 設定右上角為圓角
- -webkit-border-bottom-left-radius 適用於 Safraiire, Chrome, 設定左下角為圓角
- -webkit-border-bottom-right-radius 適用於 Safraiire, Chrome, 設定右下角為圓角
- 這裡有三個圓角框的例子，就是使用個別設定圓角框的指定達成的:

▼未加側邊欄背景框程式碼的原始板型內容

程式碼	#sidebar h2 { color:$sidebarcolor; margin:0px; padding:0px; font:$headerfont; } #sidebar .widget {

▼ 已經加了側邊欄背景框程式碼的板型內容 (參考如何更改Blogger側邊欄的標題成為有背景的文字進一步了解)

程式碼	#sidebar h2 { color:$sidebartitlecolor; background-color:$sidebartitlebgcolor; margin:0px; padding-top:3px; padding-bottom:3px; padding-left:30px; font:$headerfont; } #sidebar .widget {

▼修改後的板型內容(紅色為新增或修改的部份)，注意文字必須正確。

程式碼	#sidebar h2 { color:$sidebartitlecolor; background-color:$sidebartitlebgcolor; margin:0px; padding-top:3px; padding-bottom:3px; padding-left:30px; font:$headerfont; -moz-border-radius: 8px; /* 適用 Firefox 的圓角框指令 / -webkit-border-radius: 8px; / 適用 Safari, Chrome 的圓角框指令 */ } #sidebar .widget {

▼這是板型修改後的成果。

回到 Blogger 部落格技巧總整理

2009年8月16日星期日

訂閱最新文章

https://blogger-script-study.blogspot.com/2009/08/email-subscriptions.html?m=0

歡迎來到訂閱『最新文章』頁面，如果你對本部落格的文章有興趣的話，可以透過以下幾種方式訂閱『最新文章』。

對於本部落格的舊文章，可以連到 Blogger 部落格技巧總整理，這裡有點像是本站的 sitemap，整理了本部落格的相關文章，也歡迎使用【搜尋】功能找到所想要的文章。

1. 使用電子郵件訂閱最新文章：

2. 使用 Bloglines 訂閱最新文章

3. 使用 Google Reader 閱讀最新文章

2009年8月14日星期五

新增部落格到【我的觀察】清單，追蹤【部落格觀察】成長

https://blogger-script-study.blogspot.com/2009/08/observe-lookurstw.html?m=0

當你開始使用【部落格觀察】之後，相信你會有興趣隨時留意關心自己的【部落格觀察】名次及成績，基本上【部落格觀察】的頁面並沒有非常清楚的告知部落客如何使用【部落格觀察】的一些功能，這裡就教大家如何加自己及別人的部落格到【我的觀察】清單。

【我的觀察】清單可以用來觀察自己並比較別人的部落格成長的軌跡，看看彼此的名次排行，也可以點選進入更詳細的資料，看看為何別人的名次比我們前面？是哪些指標比我們的好?

你可以藉由逛別人的部落格，可以檢查看看有否類似如下的圖示列在其側邊欄，這個就是【部落格觀察】的名次貼紙，如果你想要更詳細的觀察此部落格的排名，就可以點擊名次貼紙進入【部落格觀察】的頁面。當然，你也可以在【部落格觀察】中得知別人的部落格。
或
無論你是從別人的部落格進來或是從【部落格觀察】進來的，當你有想要觀察的部落格時，進到下圖的畫面後，就可以按其右下角的圖示【】，會跳出一個新的視窗。如果你多沒有中意的部落格觀察對象，可以暫時加我的另一個部落格 http://look.urs.tw/show.php?BlogID=102097 為觀察對象。
(※注意：你必須已經在【部落格觀察】註冊會員了才可以做這個動作。)
當出現下面的視窗時，按【加入我的觀察】，就可以把這部落格加到你的觀察名單中了。
視窗的文字變成【已加入觀察】，表示已經完成了加入觀察的動作了。點擊【關閉視窗】關掉這個跳出來的視窗。
在原來的【部落格觀察】視窗中點擊【我的觀察】就可以看到新增的觀察名單。自己的部落格也可以用這個方法加入，有自己及別人的部落格才能比較差異。
(※注意：部落格必須要先加入【部落格觀察】才可以被觀察，點擊下面連結了解如何將部落格加入【部落格觀察】
如何申請【部落格觀察】)

回到 Blogger 部落格技巧總整理

2009年8月10日星期一

設定 Blogger 的『最新迴響』

https://blogger-script-study.blogspot.com/2009/08/new-comments.html?m=0

Blogger 本身雖然沒有『最新迴響』的功能，但我們卻可以利用其所提供的『設定資訊提供者』的功能來達到類似的功能，只是這個功能無法顯現出文章標題，但『沒魚，蝦也好』。

1. 先參考善加利用 Blogger 所提供的『小工具』瞭解 Glogger 的小工具。

2. 進到 Glogger 的小工具頁面，然後點取【資訊提供】。

3. 在【設定資訊提供】視窗的【資訊提供網址】的欄位輸入 http://yourblogaddress/feeds/comments/default，其中的 http://yourblogaddress 為你的部落格的首頁，也就是你註冊的網址，要在你的網址後面再加上 /feeds/comments/default，就是你的部落格意見存放的位址。

4. 變更【標題】名稱，一般會改為『最新意見』或『最新迴響』。
【顯示】項目最多可以選擇 5 筆。
【項目日期】、【項目來源/作者】勾選之後會在意見後方顯現出發表意見的日期及發表人。
如果設定錯誤或想變更網址就按【變更資訊提供網址】。

5. 完成後的樣子，怎麼好像沒有內容？因為還沒有人發表意見啦！

6. 自己發表一個意見來測試看看囉！好像意見發表後要等一段時間(將近一個小時)才會顯現出來耶！

回到 Blogger 部落格技巧總整理

2009年8月8日星期六

將【部落格觀察】貼紙放到部落格中

https://blogger-script-study.blogspot.com/2009/08/stick-lookurstw.html?m=0

前一篇文章談完了如何申請【部落格觀察】，接著我們要再來談談如何把【部落格觀察貼紙】貼到我們的部落格中。如此【部落格觀察】網站才會開始紀錄這個部落格的名次。

貼上【部落格觀察】貼紙

回到【部落格觀察】首頁後，點選【取得貼紙】按鈕。
輸入已認證後的【部落格網址】或是【BlogID】，然後按【Get】。
選擇一個你喜歡的【貼紙】並複製其【java script程式碼】，把它貼到你的部落格中。
按這裡前往詳細的【部落格觀察貼紙】說明。
貼上【部落格貼紙】後的模樣。

回到 Blogger 部落格技巧總整理

如何申請【部落格觀察】

https://blogger-script-study.blogspot.com/2009/08/apply-lookurstw.html?m=0

【部落格觀察】在台灣部落客玩家中，算是名氣蠻響亮的一個排名網站，雖然比不上 Alexa 那麼專業及客觀，但在台灣的部落格排名上也算是聊勝於無。較值得一提的是如果你剛好有申請 BloggerAds 的部落格廣告，那一定要來申請【部落格觀察】，因為BloggerAds 的廣告獎金多寡，有一部分是參考【部落格觀察】網站所提供的名次來決定的，這裡就向大家介紹如何申請【部落格觀察】。

【部落格觀察】的網址： http://look.urs.tw

先註冊你的【部落格觀察】的帳號。

註冊完成後，按【新增部落格】。
在【新增資料】欄的地方填入你的URL(http://)網址，然後按【新增】按鈕。
這個地方會花比較多的時間讓【部落格觀察】來擷取你部落格上的資料，所以請耐心等待。有時會因為系統繁忙而出現錯誤，得多試幾次。
部落格新增完成後會出現下面的視窗，請務必記住你的BlogID號碼。
把視窗拉到最上面，並點選【部落格觀察】的圖示回到【部落格觀察】的首頁。
點選【認領部落格】。
輸入剛剛記住的BlogID，然後【申請】按鈕。
按【確認】按鈕。
出現部落格認證碼，有四種方法來認證你為此部落格的所有者。
方法一：將此認證碼張貼為新文章之標題，張貼完畢後按下【認證】按鈕，完畢後可刪除該篇文章。
方法二：將此認證碼放在 Blog 的 title 上，然後按下【認證】按鈕，完畢後可將 Title 改回。
法三：將一段【java script程式碼】加入您部落格的模板(template)中，然後使用瀏覽器開啟或是重讀您部落格的頁面(於另一個視窗)，再回到本視窗按下【認證】按鈕。完畢後可將此【java script程式碼】刪除。
方法四：手動認領, 將認證碼放在文章內容或邊欄，記下網址然後進入手動認領 (注意：1. 因為這為人工處理, 往往要等 1~3 天。 2. 必須前三項認領失敗過 3 小時後才能申請 )。
以下採用【方法一】當作範例說明。用認證碼當作文章標題，並發佈於你的部落格中。請保留步驟8的視窗，張貼完認證碼於部落格後再回到原來的視窗，按下【認證】鈕。
如果認證成功，就會出現下面【認證成功】的畫面，這時就可以把這篇認證用的文章自你的部落格中刪除了。如果失敗的話，可以多試一次，或是用另外三種方法試看看。
點選【部落格觀察】回到首頁，準備加入【貼紙】於你的部落格中。

未完繼續…將部落格觀察貼只放到部落格中

回到 Blogger 部落格技巧總整理

「Blog語法研究室」交換連結

https://blogger-script-study.blogspot.com/2009/08/change-links.html?m=0

這裡是專門給『交換連結』使用的地方，歡迎想要作『交換連結』的部落格主在這個版面留言。

本站名稱：Blog與法研究室
網址: http://blogger-script-study.blogspot.com/

本站目前排名狀況：

本站目前 PageRank：
認識本部落格主：認識「工作熊」

交換連結注意事項：

請先新增一個至「Blog語法研究室」的連結。並請於本篇文章留言告知已置入連結。
留言時，請務必留下下列相關訊息:
- 大名：(您的大名，暱稱也可以，方便稱呼)
- 部落格名稱：(含有本站連結的部落格名稱)
- 部落格網址：(含有本站連結的頁面網址)
- 網站簡介：(請簡單介紹一下貴網站)
原則上本部落格僅會在側邊欄顯示25個最新發文的網站，其他
本部落格不歡迎含有暴力、色情等不良內容以及含有太多商業性質的網站作交換連結。
留言後會盡快處理交換連結，因本人經常不在國內，處理可能有所延誤，尚請見諒。
本部落格保留「交換連結」與否的權利，如有未能放置尚請見諒。
目前會以「交換連結」擺放在側邊欄的部落格為優先對象，未擺放於側邊欄者將只放在本交換連結專頁。
本站會不定期檢查各友站交換連結是否有效，如連續兩次無效將移除連結。
為了維持交換連結的品質，本部落格自2011.02.03起開始篩選交換連結友站的 PageRank (簡稱PR)
- PR ＝ 3以上且擺放於側邊欄者，將會呈現在本部落格的側邊欄及本頁。
- PR ＝ 3以上但未擺放於側邊欄或僅隨機出現於側邊欄者，將會呈現在本部落格的本頁並隨機出現在側邊欄。
- PR ＜ 3 將會呈現在本頁並隨機出現在本部落格的側邊欄。
- PR = 0，將暫時只擺放在此連結網頁。
申請交換連結應該至少要有30篇以上的發文。(2011.02.03更新)
成功申請交換連結後，如果180天內沒有任何新文章發表，本站有權利將其自側邊欄移除，但仍會保留於此交換連結專頁。 (2011.02.03更新)
想查詢自己格子的 PageRank 可以到這裡：http://www.prchecker.info/pagerank-check-button.php

交換連結友站：

	PR	部落格名稱	加入時間	Status
01		Potato的探索樂園
02		Potato的探險樂園
03		迴旋人生@繼續迴旋	2010.04.03	5側欄固定0203
04		心声部落格~~❤❤	2010.09.03	2011.02.03移除
05		TAKUIQ Blog - 我的生活,很有型	2009.11.18	0側欄固定0203
06		樂天知命-八字研究所	2011.01.10	3側欄固定0203
07		《就是愛上班》
08		中壢小樹租屋網	2010.10.06	3側欄固定0203
09		纬之乐园		2011.02.03移除
10		常和blog		2011.02.03移除
11		uknow9095	2010.07.26	0側欄固定0203
12		HKMacBook	2010.04.20	2側欄固定0203
13		熱門焦點追蹤	2010.07.26	0側欄固定0203
14		轉角1弄1號	2010.04.08	2011.02.03移除
15		A Chinese Lazy Life	2010.03.05	0側欄固定0203
16		free life easy life	2010.5.13	0側欄固定0203
17		湯瑪士澳洲大冒險	2011.02.03	0側欄固定0203
18		MyLove購物網	2011.02.03	2側欄固定0203
19		愛情故事	2011.02.03	0側欄固定0203
20		電子製造，工作狂人(ResearchMFG)
21		工作達人	2011.05.26	3底欄固定
22		58coco’s sky	2011.06.17	0側欄固定0617
23		石先生部落	2011.10.19	0交換連結1019
24		夠了!史雲	2011.10.19	1側欄固定1019

善加利用 Blogger 所提供的『小工具』

https://blogger-script-study.blogspot.com/2009/08/blogger-widget.html?m=0

Blogger 的版面雖然很陽春，但它的『小工具』卻非常多，如果善加利用，可以大大提昇部落格的功能性，這裡大概列幾個大項供參考，其他還有一些遊戲、天氣、計算機、日曆…等等項目，令人眼花撩亂，就留待讀者自己發覺了：

追蹤者：
其實就是 Google Friend connect 好友連結，可以這裡列出在 Google 中加你為朋友的圖像，但這裡會用網誌來區隔，也就是追蹤者事追蹤網誌，而不是你的帳號。

搜尋框：
這是個很好用的工具，可以定義讓瀏覽者搜尋網誌內的文章，而且不只限定一個網誌，如果你有多個網誌的話，也可以設定同時搜尋多個網誌的內容，可以增加瀏覽者找到想要的文章。另外也可以設定搜尋從你的網誌中連結出去的網站，也可以設定成搜尋全部的網頁，就像把 Google 的搜尋框放在自己的網誌內一樣。

HTML/JavaScript ：
這也是個非常有用的小工具，很多的部落格外掛程式都需要用到這個【HTML/JavaScript】的功能，舉凡部落格廣告(BloggerAds、BlogAD)、標籤雲、熱門文章、隨機文章、電子報訂閱、訪問人數…等等，在 Blogger 裡都會需要用到這個功能，這也是 Blogger 吸引我的重要條件之一。

文字：
可以讓你像在寫 Word 一樣，在網誌的一個小段落中註明一些東西，比如有些公告需要置頂的事項，或是個人的『碎碎唸』之類的文字。

網誌清單：
有點像是 RSS Reader，可以列出自己喜愛網誌的名稱、最新文章、內容摘要等。因為蠻佔版面的，所以我只拿他來聯播我的其他網誌。

連結清單：
可以新增你所喜好的網站、網誌或是網頁，一般我們都拿它來當作『交換連結』用。

資訊提供：
可以設定將 RSS 或 Atom 的資訊內容加到網誌裡，有點像是幫友站打知名度一樣，當然如果你有都個網誌，也可以利用這個功能來設定文章展示。我們也可以用這個功能來展示網友的最新意見，就是『最新迴響』啦。

意見調查：
可以讓你設定『意見調查』，讓擬與訪客互動並對訪客進行問卷調查。可以參考這篇範例投票結果出爐：『機車族』在台北最討厭碰到何種車輛？

投影片：
可以將你放在 Piscasa、Flick、Photobucket、或是其他地方的相簿放到這裡輪播。

現在就來看看如何將 Blogger 所提供的小工具加到我們的部落格中吧：

1. 先進到 Blogger 的後台。(參考這篇文章 Blogger template (板型)修改注意事項)

2. 【版面設定】→【網頁元素】→【新增小工具】。

3.開啟【新增小工具】的對話框後，就可以選取所想要新增的【小工具】了，也可以按左方的【精選】、【最受歡迎】、【更多小工具】等選項，選擇更多的【小工具】；另外也可以在右上角的地方搜尋框，搜尋想要的【小工具】。
這裡以【文字】小工具當例子說明。點選【文字】的【+】按鈕或是圖示就可以加入。

4. 填寫【標題】及【內容】後再按【儲存】就可以了。

5. 完成後就會看到新的【小工具】被放在最上面的位置。

6.可以用滑鼠左鍵拖拉整個方塊到版面中的新位置，可以每個地方都試看看，還蠻好玩的。

7. 這裡把它拖拉到文章內容的最上面，有一點文章置頂的公用。

8. 切換回原來的部落格畫面，就可以看到新增加的【我的碎碎唸】出現在部落格的版面裡了。要事部滿意的話還可以隨時回去版面配置的地方修改。

回到 Blogger 部落格技巧總整理

訂閱：文章 (Atom)

Blog語法研究室

2009年8月25日星期二

如何左右移動側邊欄位置

2009年8月24日星期一

如何於Blogger增加部落格導覽列選單頁籤

2009年8月22日星期六

為側邊欄的標題框加上圓角

2009年8月16日星期日

訂閱最新文章

2009年8月14日星期五

新增部落格到【我的觀察】清單，追蹤【部落格觀察】成長

2009年8月10日星期一

設定 Blogger 的『最新迴響』

2009年8月8日星期六

將【部落格觀察】貼紙放到部落格中

如何申請【部落格觀察】

「Blog語法研究室」交換連結

善加利用 Blogger 所提供的『小工具』

Visitors

總瀏覽量

關於部落格文章轉載的原則

標籤雲

2009年8月25日 星期二

2009年8月24日 星期一

2009年8月22日 星期六

2009年8月16日 星期日

2009年8月14日 星期五

2009年8月10日 星期一

2009年8月8日 星期六

關於部落格文章轉載的原則

標籤雲

2009年8月25日星期二

2009年8月24日星期一

2009年8月22日星期六

2009年8月16日星期日

2009年8月14日星期五

2009年8月10日星期一

2009年8月8日星期六