Monday, August 27, 2007

Blogger教學資源彙整

這陣子,學著使用Blogger,一開始完全搞不清楚狀況,所幸網路上有很多教學資源可以參考,總算是漸入佳境。把這陣子讀過的好文章,整理一下,希望能給跟我一樣初入門者作為參考。感謝提供這些教學資源的作者。

建立基本概念

教學網站推薦:這幾個網站的教學文章很豐富,實用,重點是比較容易看懂。
Hacks 總覽:以下幾篇文章,作者整理列出自己建置部落格時所用到Hacks。
無腦安裝:如果不想花時間玩,可以安裝這個。
範本下載
實用Hacks/Widgets的教學文章
  • 增加第二側邊欄位
  • 顯示文章列表 (Table of Contents,ToC)
  • 收藏文章至共享書籤網站
  • 最新文章與最新回應
  • Favicon
  • Blog Search
  • 繼續閱讀
  • 其他:也很實用的Hacks/Widgets
  • 其他:Blog相關工具的教學文章
相關工具網站:提供內嵌或外掛的部落格工具,流量分析/工具按鈕/Badge/...

筆記:加上文章列表(ToC: Table of Contents)

ToC(ToC: Table of Contents)這個功能可以將部落格所有的文章整理成一個列表。

點擊側邊Table of Contents欄位中的Show Table of Contents,就會在原本發佈文章的主欄位上方列出所有文章,再點擊一次Hide Table of Contents,就可以收起文章列表。

點擊列表標題欄位POST TITLE或POST DATE,可以依標題或時間排序;點擊LABELS,則篩選列出同一標籤的文章。

這個實用的功能也是Beautiful Beta的HANS所釋出,原文請參考BlogToC Widget Released。以下仍是我依樣畫葫蘆所做的修改:

Step 1:允許範本主欄位(Main)可以再新增一個網頁元素。
找到
<b:section class='main' id='main' showaddelement='no'>
改為
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Step 2:將下面有關表格格式設定的程式碼貼在<head>與</head>之間的css區塊,如 <b:skin><![CDATA[之後,或]]></b:skin> </head>之前。我自己是貼在]]></b:skin> </head>之前。
/* ToC的CSS開始*/
#toc {
border: 0px solid #000000;
background: #ffffff;
padding:5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
border-top: 1px solid #4c4c4c;
border-bottom: 1px dotted #4c4c4c;
color: #000000;
padding-left: 5px;
width:50%;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:25%;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
text-decoration:none;
font-size: 95%;
color:#4c4c4c;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:underline;
font-size: 95%;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
}
/* ToC的CSS結束*/


Step 3:儲存範本。切換至【範本 | 網頁元素】(Template/Page Elements)。

Step 4:在中間主欄位(Main)上方,【加入網頁元素】(Add a Page Element),新增【HTML/JavaScript】網路元素,標題留白,貼上下列原始碼。
<div id="toc"></div>

Step 5:在側邊欄位(sidebar),【加入網頁元素 】,新增【HTML/JavaScript】網路元素,標題訂ToC或Table of Contents,貼上下列原始碼,將YOURBLOG改成自己的部落格域名。
<div id="toclink"><a href="javascript:showToc();">Show Table of Contents</a></div>
<script style="text/javascript" src="http://home.kpn.nl/oosti468/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"></script>


Step 6:移動Table of contents這個網路元素到喜歡的位置,儲存。

筆記:將Template改成三欄

Blogger預設的範本多是兩欄式的,我選擇的Stretch Denim也是兩欄,參考了Beautiful Beta增加第二個側邊欄位的作法,稍稍變動一下程式碼,就可以改成三欄了。

Beautiful Beta雖然是英文網站,可是作者HANS的寫作,不但用字遣詞簡單、概念解說更是非常清楚易懂,關於如何修改的細節、Blogger範本結構的基本概念,不管改不改範本,都非常值得一讀。所以,修改的概念,請參考Beautiful Beta。以下是我依樣畫葫蘆所做的修改:

Step 1:將原有的側邊欄位定義成側邊欄位
找到
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

換成
<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>

找到
#sidebar-wrapper
換成
#right-sidebar-wrapper

Step 2:增加一個側邊欄
找到
<div id='main-wrapper'>
在<div id='main-wrapper'>之增加
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>


Step 3:增加及定義側邊欄位的寬度和格式,可以直接複製#right-sidebar-wrapper{}修改。
#left-sidebar-wrapper {
margin-left: 1%;
width: 20%;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}


Step 4:修改欄位和側邊欄位的寬度
#main-wrapper {
margin-left: 2%;
margin-right: 2%;
width: 54%;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}
#right-sidebar-wrapper {
margin-right: 1%;
width: 20%;
float: right;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}


Step 5:在【範本 | 網頁元素】(Template/Page Elements)中檢視效果,並搬動部分網頁元素到左邊欄位。

Sunday, August 26, 2007

筆記:加上收藏本文至書籤網站的功能

在文章末加上一些書籤網站的連結,可以讓讀者方便收藏文章。Addthis!提供的工具按鈕GET THESE WIDGETS!,幾乎整合了大多數的書籤網站,讓讀者自己可以在單一整合的畫面選擇收藏文章到哪個書籤網站。可惜沒有國內比較多人用的HEMiDEMifunP,所以要自己加上去。

Step1:從Addthis!取得Blog Post Button的程式碼,大概會長得像這樣,紅字部份會是註冊時的帳號。

<!-- AddThis Bookmark Post Button BEGIN -->
<div><a expr:href='"http://www.addthis.com/bookmark.php?pub=xxxxxx&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img src='http://s9.addthis.com/button1-bm.gif' width='125' height='16' style='border: 0px; padding: 0px' alt='AddThis Social Bookmark Button' /></a></div>
<!-- AddThis Bookmark Post Button END -->


Step2:準備好書籤網站的小圖示,上傳到網路空間,並取得圖片的url位置。

Step3:在post的宣告中找到.post img,加上img.bookmark { padding: 0px; border: none;},這是為了讓小圖示不要出現小框框。

.post img {
padding: 4px;
border: 1px solid $borderColor;
}
img.bookmark {
padding: 0px;
border: none;
}


Step4:把收藏文章到HEMiDEMi等書籤網站的程式碼和Addthis!提供的程式碼合併如下

<!-- AddThis Bookmark Post Button BEGIN -->
<div>收藏本文:
<a expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&amp;url=" + data:post.url' target='_blank' title='加入HEMiDEMi分享書籤'><img alt='HEMiDEMi個人書籤' border='0' class='bookmark' src='http://hemidemi小圖示的圖檔位置'/></a>
<a expr:href='"http://myshare.url.com.tw/index.php?func=newurl&amp;url=" + data:post.url + "&amp;desc=" + data:post.title' target='_blank' title='加入MyShare分享書籤'> <img alt='MyShare個人書籤' border='0' class='bookmark' src='myshare小圖示的圖檔位置'/></a>
<a expr:href='"http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;=" + data:post.title' target='_blank' title='加入Yahoo分享書籤'><img alt='Yahoo分享書籤' border='0' class='bookmark' src='yahoo小圖示的圖檔位置'/></a>
<a expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url + "&amp;s=" + data:post.title + "&amp;via=tools"' target='_blank' title='貼到 funP'><img alt='funP推推王' border='0' class='bookmark' src='http://funp.com/images/tools/post_04.gif'/></a>
<a expr:href='"http://www.addthis.com/bookmark.php?pub=xxxxxx&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img alt='AddThis Social Bookmark Button' width='125' height='16' src='http://s9.addthis.com/button1-bm.gif' style='border: 0px; padding: 0px' /></a>
</div>
<!-- AddThis Bookmark Post Button END -->


Step5:勾選展開小裝置範本,找到 <data:post.body/>後,在合適的位置貼上前面那段程式碼。我自己是貼在 <p class='post-footer-line post-footer-line-2'/>那段後面,也就是<p class='post-footer-line post-footer-line-3'/>之前。

筆記:Favicon

有些網址列前面有個小圖示,這就是Favicon,其實很簡單就可以在自己的部落格加一個!

Step1:先準備一張小圖片,有些網站可以下載,也可以自己做一張。大小是16*16。最後要儲存成.ico的檔案格式。IrfanView是一個免費的軟體,它可以縮圖,也可以轉檔,儲存成.ico的格式。所以找張喜歡的圖,最好線條簡潔一點,縮圖成16*16,再轉檔成.ico。

Step2:將圖片上傳到網路空間,並取得圖片的url位置。

Step3:將下面那段程式碼加到]]></b:skin>之後,</head>之前,修改紅字部分。

<link href="http://Favicon的圖檔位置" rel="shortcut icon">
<link href="http://Favicon的圖檔位置" rel="icon">

筆記:加大日期與標題距離

Blogger預設範本的日期與標題行距很小,我自己覺得看起來很彆扭,所以讓日期與下面的邊緣稍稍加大些。一般來說,margin: a b c d;(a b c d 那四個參數分別是與"上右下左"邊緣的距離)

.date-header {
margin: 0.5em 0 1em;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

筆記:改變連結的CSS

在<head>與</head>之間的css區塊,如 <b:skin><![CDATA[之後,或]]></b:skin> </head>之前(我是放在body{}後面),增加以下的程式碼,當游標移到連結處時,可以改變底色、取消底線、改變字的顏色等等...

a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a:hover {
text-decoration:none ;background-color :#CAD1E0; color:#003366 }

筆記:加入頁首圖片

Step1:先準備一張圖片,上面那張千禧橋的圖片是裁切成1600*160。一般螢幕會看到大約1400*150左右的圖。我的小筆只有8.9吋螢幕,解析度設1024*600,其實只看到一半的圖。不過畢竟很少人的螢幕是這樣,為了適應大部分的螢幕,所以乾脆切成1600*160。

Step2:將圖片上傳到網路空間,並取得圖片的url位置。

Step3:找到#header那段語法,加上background: url(http://頁首圖片的檔案位置);

#header {
margin: 0 2%;
background-color: $headerBgColor;
background: url(http://頁首圖片的檔案位置);
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}

Blogger新手入門三部曲(修改HTML篇)

利用Blogger後台管理介面的【範本 | 修改HTML】(Template/Edit HTML),我們可以依照網路上許多教學資源的解說,一步一步修改範本,取得想在部落格中新增的功能。

blogger017

如果你跟我一樣,對HTML語法不甚熟悉,幾個小提醒:
  1. 在開始做任何範本的修改前,先下載完整模板。這樣萬一玩壞了,再上載上次存的模板,就可以回復原狀。
  2. 善用【Ctrl】鍵+【F】鍵,找到適合加入語法的位置。請注意,Blogger為了讓程式碼看起來乾淨,小裝置(widget)的程式碼預設都以單行呈現,所以有時候找不到要找的那一行程式碼,可以注意一下教學文章說明,是否提到要勾選展開小裝置範本。
  3. 複製、貼上教學資源中的程式碼時,最好注意一下是不是有奇怪的格式,像是全形的符號等等...之前複製貼上這篇文章的程式碼時,一直出現錯誤,後來用它下面回應中所提供的.txt檔就沒問題了,多爬了好幾篇教學文,才發現都是一些引號格式不對或是"&"要改成"&amp;"之類的小問題,但對不懂語法,只會複製貼上的我,當時還真是找不出錯在哪,挫折極了。
就這樣,【範本 | 修改HTML】,下載完整模板,在語法的視窗中點一下,用【Ctrl】鍵+【F】鍵,找到適合加入語法的位置,複製、貼上程式碼,儲存範本,檢視Blog。其實不會太難,是吧?!

Blogger新手入門三部曲-修改HTML篇

在我自己的練習中,我做了以下幾個修改,有些修改純粹只是自己的偏好,都是一些很簡單的修改啦 ,提供給入門者做個參考:

Thursday, August 23, 2007

Blogger新手入門二部曲(一千零一招篇)

二部曲為什麼叫一千零一招,因為做的都是同一件事:複製一段原始碼,在【範本 | 網頁元素 | 加入網頁元素 | HTML/JavaScript】(Template/Page Elements/Add a Page Element/HTML/JavaScript)的對話框中貼上這段原始碼,修改標題,儲存變更。

就這樣。自己寫說明都覺得寫得很無奈,大概只有我這種笨蛋寫給笨蛋看。不過,這一招就是為了讓你加入更多的功能到側邊欄位去。一些常見的功能,像是相簿、站內搜尋、留言板、計數器、訂閱部落格的小按鈕等等,這些功能的語法都不必自己寫,不少網站或高手的部落格它們就會釋出這些功能的語法,你要做的只是到那個網站註冊或輸入相關的資訊,它就會產生一段原始碼給你,你只要複製這段原始碼,利用【範本 | 網頁元素 | 加入網頁元素】中【HTML/JavaScript】這個元件,在對話框中的內容貼上這段原始碼,改改標題,就搞定囉。

blogger015-1

用這一千零一招,你可以試著連到下面幾個網站或部落格,註冊或輸入相關資訊,取得所需功能的原始碼,試試看在側邊欄位上加入這些小功能。熟悉作法之後,以後逛別人部落格,看到有趣的功能,就多留心一下,很多功能都是這樣就可以加進去的。

Blogger新手入門二部曲-一千零一招篇

即時的『最新文章』
即時的『最新回應』
『訂閱資訊』:下列網站可以加些訂閱小按鈕在部落格上,方便讀者訂閱你的部落格。
  • BloglinesButtons For Your Blog
  • AddthisGET THESE WIDGETS!
  • Feedburner-Feedburner需要註冊,然後再取得訂閱部落格小按鈕的語法。這是一個英文的網站,不過提供了Blogger專屬的說明文件,看看圖示跟著做就可以了。

  • 現在很多人都註冊Feedburner,燒一個專屬的 RSS ,這主要是考量到萬一不滿意目前的部落格服務,搬家/換BSP時會流失原來已經訂閱你的部落格的讀者,所以,有心經營部落格的話,建議還是去註冊吧。如果你想多了解一些,Google 搜尋 "Feedburner 教學",就會有點概念了。
『Blog搜尋引擎』
『瀏覽人數統計』/『網站資訊』
  • Histats-Histats也是需要註冊的網站,註冊完,選個喜歡的計數器樣子,就可以產生所需的語法。

  • 純粹是個人觀點,我覺得計數器的功能其實不太必要,因為在註冊TechnoratiFeedburner時,這兩個網站就提供了很詳盡的分析,讓你對你的網站的瀏覽者或訂閱者的特性有些概念。而且既然有 Gmail帳號了,你就可以用同一組帳號、密碼在開始發佈文章後申請Google Analytics,也可以獲得很多網站流量的資訊了。但如果你還是很想有個計數器,我自己覺得Histats的計數器長得還不難看:p

    如果想知道自己的部落格有啥份量,你還可以加入部落格觀察TechnoratiFeedburner,都提供小貼紙的語法,讓你在部落格中顯示權威度、訂閱人數等資訊。最近HemiDemi也推出部落格工具包,其中黑米卡可以選示網站最受歡迎文章的統計。不過,重點應該還是先讓部落格內容豐富,加這些小東西才有意思吧?!
『留言板』
  • Cbox-需要註冊,才能取得留言板的語法。
  • Shoutmix-需要註冊,才能取得留言板的語法。

  • 關於留言板的功能,我也覺得這沒太大必要,畢竟讀者若有意見,每篇文章都已經有回應的功能了。不過,如果還是喜歡加個留言板,建議裝Cbox,理由當然也是它長得比較好看:p
『我的相簿』
就這樣,善用這一千零一招,就很夠用了,一般BSP提供的部落格功能也差不多是這些。許多社群網站提供的工具,也幾乎都用類似的方式就可以加進部落格中。所以,用Blogger來寫部落格,其實沒有想像中困難吧!

不過,還是有一些功能,像是在文章末加入書籤網站圖示以方便讀者收藏文章、將範本改成多欄位的版面等等,是必須透過【範本 | 修改HTML】(Template/Edit HTML)才能做到。但是,別擔心自己不懂語法,當然,如果因此有動機去學學也不錯。畢竟越熟悉語法,越有能力作修改。不過,即使HTML語法有看沒懂,也沒關係。網路上真的有許許多多的高手,不吝提供他們的知識經驗,若能善用這些教學資源,一步一步照著做,多嘗試,一樣可以搞定的。而且,能盡情改造部落格的自由度,才是Blogger比較吸引人的原因,不是嗎?

Blogger新手入門三部曲-修改HTML篇,我盡量把我做過的修改列出來,在Blogger教學資源彙整,我也把這陣子我覺得對我幫助很多的網站羅列下來,一來自己日後可以回頭看,二來希望能給跟我一樣初入門者作為參考。再者也算是感謝這些提供教學資源的作者囉。

Tuesday, August 21, 2007

Blogger新手入門首部曲(基本設定篇)

Blogger很容易申請,如果你有一組Gmail帳號、密碼,按指示的步驟,三分鐘內你就有一個部落格可以開始發佈文章了。但令人傻眼的是,側邊欄位上除了關於我、文章彙整,沒有一般部落格常見的功能,像是最新文章、最新回應、最愛連結、我的相簿等等。

不過,別望之卻步,也別急著改用其他BSP (Blog Service Provider)服務。網路上許許多多的高手其實提供了很多有用的工具和資訊,即使你跟我一樣,對HTML語法經常是有看沒有懂,但只要你會複製和貼上,再加上一點點恆心和毅力去搜尋相關資源,一樣可以玩出一個符合自己風格的部落格樣貌,而不只是套用固定版型、換換面板而已。相信這樣的自由度會讓你很心動,先去申請一個Blogger帳號吧!

Blogger新手入門首部曲-基本設定篇

假設你心動了,也已經有個帳號了,你的畫面可能是在控制主頁或張貼新文章的畫面。別急,在開始發佈文章之前,可以先認識一下Blogger的後台管理介面。後台管理介面主要分成三個Tab,【張貼】、【設定】、【範本】。

blogger009

blogger010

blogger011

【張貼】當然跟發佈文章、管理回應有關。【範本】則與部落格呈現出來的樣子有關,可以把它想成一般BSP所謂的版型,若用生活化一點的比喻,可以把它想成是你的部落格的衣服、配件,換言之,在【範本】裡,你可以決定部落格的造型。你可以造型百變,而且不會影響到你的文章。至於如何把部落格塑形成你喜歡的樣子,正是一開始你需要花一點時間去摸索的。關於Blogger,更多的資訊你可以參考官方的說明文件

不過,在開始改變部落格造型前,你應該先幫部落格做一些基本的設定。這些設定都在【設定】這個Tab裡。Blogger已經預設了一些最適合的設定值,所以要修改的並不多。我把我通常會做的修改列出來,你可以根據你自己的狀況調整。

【設定 | 格式 | 時區】(Settings/Formatting/Time Zone)
時區改為GMT+08:00台北,這樣發佈文章的時間才會是台灣的時間

【設定 | 格式 | 語言】(Settings/Formatting/Language)
語言指的是發佈文章的時間要用什麼格式呈現,我自己偏好英文的日期,所以會改成英文,這就看個人囉

【設定 | 意見 | 誰能發表意見?】(Settings/Comments/Who Can Comment?)
預設是現已註冊的使用者,我會改成任何人。

【設定 | 意見 | 上一頁連結】(Settings/Comments/Backlinks)
預設是隱藏,我會設成顯示。

【設定 | 意見 | 留言顯示驗證詞﹖】(Settings/Comments/Show word verification for comments?)
這是為了避免機器人垃圾留言,所以我會改成是Yes。

【設定 | 意見 | 意見通知地址】(Settings/Comments/Comment Notification Address)
如果有讀者留下意見,留下讓系統通知的Email,可以幫助你很快知道讀者的意見。


做完上面的基本設定之後,切換到【範本】這個Tab,這時已經可以開始幫自己的部落格改造一番囉。這些動作還是很基本,所以放在首部曲,一併說明。

【範本 | 挑選新範本】(Template/ Pick New Template)
Blogger在一開始建立blog時,只給很少的範本讓你選擇,所以現在你可以在【範本 | 挑選新範本】中,看看還有哪些選擇。如果,這些預設的範本,你都不喜歡的話,網路上也有不少範本可以下載。不過下載時要注意到該範本是否適用Beta版的Blogger。我自己覺得看起來很漂亮的範本是羊男實驗の咖啡館Black Cat 2.0,這個範本還已經加了一堆功能,想偷懶一下是個好選擇:p

不過,我自己選的是預設的範本,Stretch Denim,一來自己亂改就當成練習,可以幫助自己了解整個範本的結構到底是怎樣,二來是因為我比較喜歡相對寬度,可以用到整個螢幕,也可以根據讀者的螢幕做調整。只是Blogger提供的範本多是兩欄式的,預設的Stretch Denim也是兩欄,所以我之後再稍稍加工,改成三欄。作法因為會動到範本的HTML,就留到在三部曲中詳述囉。

【範本 | 字型與顏色】(Template/Fonts and Colors)
選完範本後,你可以調整一下整個部落格的色系與字型。

上面在【範本】所做的改變,有點像幫你的部落格穿不同樣式、顏色的衣服。但你一定注意到了,當你【檢視Blog】時,你的側邊欄位上只有關於我以及文章彙整。

所以接下你要做的,是利用【範本 | 網頁元素 | 加入網頁元素】(Template/Page Elements/Add a Page Element),來增加側邊欄位的功能,如果要比喻的話,你可以想成是幫部落格戴上不同的配件。題外話,這些增加的小零件有一個詞叫widget,Blogger好像將之稱為「小裝置」,你如果有興趣,可以拿widget當關鍵字搜尋,也可以在看那些高手的部落格時順便點選widget或Hack標籤看看相關資源,會找到很多好玩的小東西喔。總之,利用【範本 | 網頁元素 | 加入網頁元素】,你就可以加上一般部落格都會有的一些小功能,像是最新文章、最新回應、最愛連結、我的相簿、分類標籤、留言板、計數器、訂閱資訊等等,還有一堆你在別人部落格上看到的小玩意兒。增加這些小功能有些技術難度比較高,有些比較簡單...我們當然是先從簡單開始…

新增網頁元素的作法都一樣,點選【範本 | 網頁元素 | 加入網頁元素】(Template/Page Elements/Add a Page Element),之後會出現【選擇新的網頁元素】對話框,在其中選擇合適的網頁元素後,點選【加入BLOG】,在對話框中依據說明修改內容,最後儲存變更。就會看到新增的網頁元素,你可以拖著它到喜歡的位置去。若不喜歡這個網頁元素,在【範本 | 網頁元素】中,點選該網頁元素右下角的編輯,就可以打開該網頁元素的對話框,點選移除網頁元素,就可以移掉囉。

blogger012

blogger013

blogger014-1

後面列出來的這幾項最簡單,是我通常會先加上去的:

【範本 | 網頁元素 | 加入網頁元素 | 資料】(Template/Page Elements/Add a Page Element/About Me)
這個預設就已經有了,一樣按一下編輯,打開對話框,修改你想增加的內容。利用此元件就可以編輯『關於我/About Me』。

blogger016

【範本 | 網頁元素 | 加入網頁元素 | 標籤】(Template/Page Elements/Add a Page Element/Labels)
加入標籤這個網頁元素後,如果你還沒有發佈任何文章,當你【檢視Blog】時,並不會看到這個欄位。但只要發佈文章後就會看到了。利用此元件可以編輯『分類標籤/Labels』。

【範本 | 網頁元素 | 加入網頁元素 | 連結清單】(Template/Page Elements/Add a Page Element/Link List)
利用此元件可以編輯『最愛連結/Link List』,把你喜歡的部落格通通加進去。

【範本 | 網頁元素 | 加入網頁元素 | 資訊提供】(Template/Page Elements/Add a Page Element/Feed)
利用此元件可以編輯『最新文章』或『最新回應』,最新文章的URL是http://YOURBLOG/feeds/posts/default,最新回應的URL則是http://YOURBLOG/feeds/comments/default。只要將YOURBLOG改為你自己部落格的域名就可以了。只是這裡有兩個問題,一是它更新很慢,發佈了新文章或有人回應,往往隔天才會正確顯示,二是它只能顯示最近的5個項目。網路上有一些變通的方法。你可以參考堯@部落格提供的Blogger最新回應程式產生器Beautiful BetaWidgets & Downloads中提供的Recent posts widgetRecent comments widget

到這裡,差不多可以繼續前進到Blogger新手入門二部曲-一千零一招篇囉。

Friday, August 17, 2007

使用quickrpickr批次貼圖到Blogger

老爸的部落格-樗樹,一直偏好貼很多張圖介紹老樹。

之前教他從 Flickr 貼圖至 Blogger,一張一張複製原始碼,再貼到部落格,對已經養成動輒需要用到數十張照片來解說一棵樹的老爸來說,實在太為難他老人家了。為了讓他少貼幾張照片,讓人家直接連到 Flickr 看就好,也教他用超連結連到相簿、還教了 flickrSLiDR,老爸又嫌這樣不會呈現文字描述,不能讓人深入了解照片的內容....還真坳不過他對介紹老樹的執著與熱情咧

今天剛好大豆剝落殼flickr三部曲-友善的Friendly.Flickr上傳篇中提到 quickrpickr,趕快試用了一下這個簡單好用的工具,果然正是老爸需要的好東西,乾脆把過程貼一貼,寫成教學文,讓老爸挑戰一下網路自學囉

先連上 quickrpickr ,其他就看圖說故事啦

quickrpicker-001


quickrpicker-002


quickrpicker-003


quickrpicker-005


quickrpicker-006


quickrpicker-007


a quickr pickr post