顯示具有 Blog工事紀實 標籤的文章。 顯示所有文章
顯示具有 Blog工事紀實 標籤的文章。 顯示所有文章

星期二, 4月 17, 2007

Blog工事紀實-Panoramio相簿

如果有玩過Google Earth的人,在線上更新後,應該會發現有幾個十字的藍點,點下去就有該地的圖片,為了把彰化攻略和Google Earth整合在一起,稍微研究了一下Panoramio。

在2g的空間下,只能單張單張上傳、定位,這真的是一件非常痛苦的事,建議會將全部相片放上去的人要好好思考一下,個人的建議是單純景點照片就好,不然上傳、定位,就花費了不少功夫。(個人案例:38張一個下午)

可惜,根據Panoramio的說明,當照片上傳後,並不會馬上在Google Earth上做更新,並且要等上幾個禮拜的時間,而且還會標錯地方。但是,如果自己有安裝Google Earth的話,可以下載KML檔,把相簿上的照片和自己的Google Earth做連結,但是當Panoramio掛點,就算下載KML檔也是看不到照片的。


▲大小、座標、倍率可自行調整。

另一種看圖的方式,就是線上觀看(on the map),不僅如此,還可以下載或自行調整語法,自行貼在blog上,就像我Blog右邊的『彰化攻略據點』一樣。

99
▲下載KML檔後,和Google Earth連結。


如果常出門玩,而且有衛星導航的人,可以藉由這個相簿來做紀錄,讓人瞭解你的足跡。比起Flickr的map,Panoramio的衛星解析度自然是高多了。唯一的缺點,大概就是這相簿常常秀逗吧= =+~,有興趣的人可以玩看看。

星期四, 3月 01, 2007

Blog工事紀實- 大改版

這個範本在test的Blog中呆了很長的一段時間,是由chenkaie將Wordpress中的這個範本修改成Blogger用的版本,Kaie散佈這個範本後,我再自行稍做背景圖片和Banner的修改,測試沒問題後就一次將這範本轉換過來。

是的,想必您剛剛是按了『Read more...』才能看到這段文字,原本這範本有四種添加的功能:Blogger Beta 摘要/全文 切換之"繼續閱讀功能、特別標示出,原Blog作者註解,用於和非Blog作者作區別、顯示註解者的個人圖像、在Label/Archive頁面加入擴展功能。可是不管怎麼弄,目前只能自行弄出『Read more...』,其他三個功能卻無法使用,算了,有空再研究看看。

所以目前的改變有:
  • 版面修改。
  • Banner隨機變更,只要重新整理就換變換一次。(設定八張圖片)
  • 『Read more...』繼續閱讀功能,隨時展開不必讀取。
是的,只有這樣...= =
更多時間都在Sidebar的物件做修正,連標籤雲都要重作一次...0rz
其它有空再繼續...
參考:
Banner隨機顯示:
[Blog] Random Rotating Banner Hack
在Label/Archive頁面加入擴展功能
[Blog] Peek-A-Boo view of posts in label/archive pages
Blogger Beta 摘要/全文 切換之"繼續閱讀功能:
[Blog] Expandable posts with Peekaboo view (blogger beta)


星期五, 1月 26, 2007

Blog工事紀實-標籤雲

很早就覺得那長長一串的標籤很礙眼,不過基於習慣分類的方式整理文章,還有範本修改的風險,遲遲沒有動力去做任何變更。偶然發現一位Blogger的標籤雲做的不錯,既有大小又有顏色上的變化,看起來就很有吸引力,便請教教學的網頁,自己動手做了起來。

自從把舊版的Blogger轉成Beta版之後,就很少去變更範本的東西了。好在,現在備份、還原範本方便很多,試了一陣子後,標籤雲就取代原本標籤的格式了。

這原理、語法我也不懂,不過變更標籤雲中的字體大小以及顏色,倒也不是太難的事。標籤雲中,字體越大、顏色越深,就表示這標籤的文章越多,光看標籤雲就可以知道一個blog的走向及文章分佈在哪些地方,這比看文章量的數字還直觀許多,唯一不方便的,大概也是看不清文章總數,但是數字加上標籤雲又很不搭,果真是有一好沒兩好。

算了,文章總數的部份,就交給其他blog來處理吧!

星期四, 1月 04, 2007

Blog工事紀實-進入標籤頁面後只顯示文章標題

在Template→Edit HTML,Expand Widget Templates打勾

把最原本的

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

換成

<!-- START -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- 不是在首頁 -->
<b:if cond='data:blog.pageType != "item"'>
<!-- 不是單獨的文章 -->
<!-- 只顯示標題 -->
<a expr:href='data:post.url'><data:post.title/></a>
<:else/>
<!-- 顯示日期 -->
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<!-- 顯示全文 -->
<b:include data='post' name='post'/>
</b:if>
<:else/>
<!-- 顯示日期 -->
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<!-- 顯示全文 -->
<b:include data='post' name='post'/>
</b:if>
<!-- END -->

這樣一來就可以把文章簡化成只有標題,在文章的選擇也會方便很多,另一個優點是,只有顯示標題,頁面的速度會稍微提昇,減少讀取時間。

最後,在這行:
<a expr:href='data:post.url'><data:post.title/>
加上<ul><li></li></ul>的標籤

<ul><li><a expr:href='data:post.url'><data:post.title/></li></ul>

這樣就可以將標籤內的各文章分成一段一段,並且在前端加上個標記了

星期四, 10月 26, 2006

Blog工事紀實-HEMIDEMI網路書籤

HEMiDEMi,俗稱『黑米』,這個網站的服務,就是所謂的『網路書籤』(網路版我的最愛),當你註冊之後,可以將妳喜歡的網站、網頁,收藏到這個網路書籤中,並且支援IE、FireFox及其他網路書籤的匯入,只要你能上網,就能隨時隨地閱覽妳所收藏的網頁,把『我的最愛』帶著走。

『將我的最愛放在網路上有什麼好處?』

一開始我也有這樣的問題,不過將個人喜好的網頁一搬到網路上,就會形成一種資訊的交流:

「妳收藏了什麼網頁?」
「別人收藏了什麼網頁?」
「別人對這網頁有什麼看法?」

HEMiDEMi提供了一個繁體中文語系的交流平台,除了可以收藏還可以對網頁提出討論、推薦,較熱門的網頁甚至可以直接排上HEMiDEMi網站的頭條。當然,HEMiDEmi也有許多群組:運動、美食、電影、音樂、旅遊...等等,可以依據喜歡的群組去搜尋有興趣的資訊及網頁,更可以找到有相同興趣的同好!

好了,基本的講完了,工商服務結束了,該講講正題了:以這個網路書籤服務,能在我的blog中佔有什麼地位?

以我一個自己po給自己爽的人來說,在自己Blog上做出連結有幾個目的:

1.我自己常去或好友的網站:Link
2.某網站理念的贊同或推廣,藉此強調出自己Blog的意識(譬如貼紙之類):HEMiDEMi、推廣貼紙
3.時常關注的網站,並希望能在自己Blog上隨時看到新的消息:Feed

以HEMiDEMi目前提供在Blog的功能來對應我的目的,則會有下面的狀況:

貼紙產生器來讓有使用黑米的人方便收藏我的網頁是有點矛盾的,因為當你有使用黑米,在妳閱覽網頁的同時,瀏覽器上早有將網頁收進黑米的功能了,在功能重複的狀況下,推廣意義大於實質意義,告訴別人說:『嘿!我的Blog有用黑米喔!妳也可以來試試!』;當然在選擇貼紙的時候連結回黑米首頁也可以。(主要原因是黑米貼紙的色調跟我的Blog很合,很讚的裝飾素材XD)

至於書籤發佈到您的blog的功能乍看之下似乎跟Link有重複,但是使用頻率會比Link高,而且在blog頁面的呈現上會有時效性,也就是說,當你一直新增網路書籤,之前舊的書籤就會被擠下,如果真心想要在Blog上,推薦某網站給閱讀我Blog的朋友,這個功能是不適合的!我並不期待第一次來看我Blog的人,會多動根手指專程去黑米看我收的網頁。

看來,這個書籤發佈到您的blog的功能似乎在我的目的中找不到定位?

當然不是!不然我就不會打這篇了!

暫時拋棄掉對黑米『我的最愛』、『書籤』的印象,將黑米發布到blog上呈現的是一種Blogger閱讀的傾向,當我將黑米發布到我的blog,這樣來閱讀我Blog的人就可以知道我平常在看什麼?了解什麼?關注什麼?

如果某Blog上發布的書籤,全都是一些登山資訊,妳就可以知道這個blogger很喜歡爬山;全是些音樂資訊,就可以知道這個blogger喜歡聽哪方面的音樂?注重哪方面的訊息?全是一些XX的東西,那就可以知道這個blogger充滿生命力(?),追求生命的意義!當然,沒這麼死板 :)

這樣就像在解數學一樣,你可以在網路上找到某一題的解答,但是遇到另一個問題,妳可能還要找另一個解答出來,但是現在,你可以直接找到一個數學專家!

對了!這只是誇示法並不代表裝了黑米就變成專家了喔! XD

星期五, 9月 29, 2006

Blog工事紀實-無名blog備分瀏覽器

先前爲了將無名整個搬移,一想到要一篇一篇移動文章,就懶得動手,雖然無名已經開放下載網誌備份檔案,但是支援xml匯入的blog好像不多。

這時候就有人做出了可以瀏覽xml且能轉成Movable Type 格式的瀏覽器,這樣一來,就可以將無名上的文章,轉到支援MT格式匯入的blog了!

作者BLOG:Nelson 的遊樂場
下載網址:DownLoad (作者提供)
說明:http://www.wretch.cc/blog/Nelson&article_id=3432040

以跳到樂多為例:

1.先到無名的“網誌管理”點選“下載”

無名備份


2.下載得來的xml檔,就可以用“無名網誌備份瀏覽器”來開啟,就像電子書一樣瀏覽你的網誌

無名備份


3.藉由“無名網誌備份瀏覽器”轉換成MT格式的檔案後,再到樂多的主控制頁匯入即可

無名備份


轉換過去後,有些文章的間隔、段落會稍有不同,如果原本文章中有使用無名相簿的圖片,則圖片在樂多上不會顯現,除非本來就是用外連的方式引用圖片。

除了這個小問題外,依我目前使用的感覺算是相當滿意,連回應也一並轉移了過去,想要脫離無名小站的人,不妨可以試試。

星期三, 9月 27, 2006

Blog工事紀實-beta改版

從轉戰blogger之後,經過一連串的測試,總算是弄出個樣子出來,可惜,google這家公司大概跟我犯衝,當我在八月中,幾乎將所以blogger上的物件都弄好的時候,竟然給我來個beta版!還增加了 labels(文章分類) 的功能!天啊!當初真是爲誰辛苦爲誰忙阿!就是有這種白做工的感覺,所以才遲遲不想轉換至beta版。

不過,經過這一個多月的觀望,感覺穩定性還不錯,畢竟,改版也是遲早的事,若現在沒什麼大問題,倒不如現在就試試,趁現在文章數還沒增加之前,先行適應也好,便用轉換的網址,一次將整個blog給轉過去。

一經轉換,我自定的分類標題跟LINK全部變成亂碼了!版面也全部亂掉!好樣的,一開始就先給我了份大禮,好在我之前已經先把Template給備份了起來,反正文章也不會跑,那就一次亂到底吧!便進到主控制面,準備到Template裡更換面板,當然,beta版目前沒有中文,所以也全部變成英文介面了。

beta


原本的Pick New裡還是一些舊式的面板,必須到Customize Design裡去Upgrade Your Template後,才能使用新的介面,以後在主控制面就沒有Template選項,取而戴之的便是Layout!在挑選新的面板後,接下來就是beta版的重頭戲了:直觀式版面規劃!(可以用滑鼠拖放的方式來改模版)

以我的所挑選的範本為例,可大略分成:頁首、尾,內文、個人資料、Sidebar等四個部分,在這個新功能哩,我們可以用滑鼠來移動任何區塊到你所要的位置,或者按Add a Page Element來新增一個區塊,如下圖:


beta

每個區塊都能自由移動,當然,只是沒辦法移到blog post(內文)那邊,反正也沒那個必要,而每個區塊也可以依你的需要,用edit來編輯每個區塊內的內容。另外,雖然每個區塊看起來都一樣,但是他有他的屬性功能,我們在按下Add a Page Element的選項後,便可以了解他有什麼樣的功能:

beta


看你要新增連結、圖片、文字、語法、feed、分類、logo......等等,都可以依需求新增上去,最後再按個save,就儲存好整個樣式了。整體來說當然比以前方便,就連我除了SIDEBAR之外,其他的區域我也能夠編輯,當然,還有眾多blogger使用者終日等待的分類功能了!

原本亂碼的部分,進到links的區塊中重新命名一次就解決了,倒是文章分類比較久了點,一篇篇重新編輯,重新定義分類是有一點累,不過整體規劃下來的成果,倒是蠻值得的。以這一次的beta改版來看,blogger也不再是單純一小部份人才能玩的介面了!

星期六, 9月 23, 2006

Blog工事紀實-blockquote

在別人的blog看到<blockquote>的使用效果
於是自己也想弄一下引言的感覺...

該blog是在blogger的架構下,但是我只找到樂多的用法
就是先在個人化設定中增加一串語法後套用
在內文使用<blockquote>這個標籤,就可以做出縮排引言的效果
語法如下:

blockquote {
color:#000000;
font-family:verdana, mingliu, georgia, arial, sans-serif;
border:0px dotted;(若想用框線,則可改成 1px。dotted是虛線,實線是 solid)
background: #E3EAF9;(這是色塊的顏色,配色可參考這裡或這裡)
padding:5px;
margin-left: 0px;
margin-right: 0px;
}

參考網頁

*************************************************************

以上是樂多的狀況,那blogger咧?
樂多的個人化設定內的code就已經是css了
而blogger要加在template裡面,貼在<style></style>中間,也就是css的部份才行
BLOGGER網頁的架構是這樣:


<html>
<head>
<style>
貼在這!!
</style>
</head>
<body>
內容
</body>
</html>

要用引言的時候,加上blockquote標籤就ok啦!!

範例:

阿母阿!哩寄來ㄝ鐵牛運功散哇已經收到阿啦!

星期四, 8月 31, 2006

BLOG工事紀實-6

關於貼圖的方式!!

這是原本的語法:
http://www.flickr.com/photo_zoom.gne?id=229715201&size=o

而變更的部分用紅色標示:

*************************************************

<a title="Photo Sharing"
href="http://www.flickr.com/photos/89004805@N00/229160585/"&gt<img
style="WIDTH: 213px; HEIGHT: 238px" height="153" alt="路線圖"
src="http://static.flickr.com/64/229160585_3727386f5a_m.jpg" width="240"
align="left" />&lt/a>&lta title="Photo Sharing"
href="http://www.flickr.com/photos/89004805@N00/229177868/">&ltimg height="240"
alt="坪林" src="http://static.flickr.com/90/229177868_1805f9e16f_m.jpg"
width="180" align="right" />&lt/a>

</br&gt</br&gt</br&gt</br&gt</br&gt...(依圖片高度調整數量,區隔下一段文字,我放了12個0rz)
XXXXXXXXXXXXXXXXX(→下一段文字)


**************************************************
若不加
的話,會形成文繞圖的模式
在兩張圖的狀況下,下一段的文字會往兩張圖中間擠
若只用單張的話,應該會有不錯的效果

星期二, 8月 22, 2006

BLOG工事紀實-5

blogger本身沒有相簿的服務,所以得另外找存放相簿的網站。便依照推薦,嘗試最受好評的Flickr。

其實之前早就試過Flickr了,但是英文介面,上手不易,非得依靠別人的教學才能有所瞭解,另外,倘若要玩Flickr的話,必須把它當作一個廣大的網路平台獨立嘗試,因為功能強大,能玩的東西多,除了在Βlog上嵌入照片外,還有不少Flickr同好製作出許多支援Flickr的相片播放,唯一令人覺得遺憾的,則是免費的用戶限制每個月上傳200張的流量,縱使在當月內刪除掉相片,還是得等到下個月才能將相片放上去。

不過有個偷吃步的方式,便是利用它的e-mail上傳照片功能,就可以無視當月上傳限制,繼續將照片放上去。若照片放滿後,能否繼續使用該方式上傳?就得等到我照片放滿才能夠知道。

如果有很多相片要全部上傳到Flickr,還是買它的會員服務會比較方便,如果只是放blog的照片的話,其實就已經很夠用了。

將Flickr的照片放上blog有兩種方式。

1.先進入要上傳的照片,有個blog it的選項,點選後,再選擇要上傳的blog空間,一旁便出現可輸入的標 題、內文的地方,打完後按下Post Enter後,就直接在blog上po出這篇文章了,等於不用進去自己的blog,就可以在這裡po文上去。

blog
(紅框標示處)
blog
(紅框標示處)

不過,只有一張的限制,並且只會出現在最上方,用到的機會不高。

2.先進入要上傳的照片,按下all size的選項,便會出現許多大小尺寸可以選擇,可依blog的大小需求自行挑選。選擇後,下方便會出現此大小的code,直接在blog文章內貼上即可。

blog
(紅框標示處)
blog
(紅框標示處)

這就沒有貼照片的限制了,我文章也大多用這方式來做張貼。

特別感謝NintendoGC的Flickr教學:http://goston.blogspot.com/2005/04/flickr.html:D

BLOG工事紀實-4

音樂這一塊比想像的容易多了。

只要到http://www.myflashfetish.com/註冊一個帳號,就可以將在網路上的音樂放進自己的清單,並可挑選想要的撥放器樣式,只是,有些撥放器並不支援中文,還有撥放器的大小跟blog上的大小是否符合?這些在挑選撥放器的同時,可以預覽樣式,避免多餘的步驟,這些都是放置音樂撥放器的重點。

之所以做的快的原因,我在Xuite上原本就有放音樂,只要我在原始碼中取得網址,就可以上傳過去,挑選好樣式,製作出清單,最後,當然是取得code,在blog中新增標題,放進自己的blog!

往後,要變更清單的話,只要到該網站做變更即可。

星期五, 8月 18, 2006

BLOG工事紀實-3

blogger本身沒有文章分類的功能,所以臨時要找以前的文章,頂多只能靠原本的Archives(即年月分類的方式)來尋找,在文章管理上,相當不便,也是blogger最令人詬病的地方之一。所以,這時候就必須用到所謂的「網路書籤」。

「網路書籤」,就是我們常見的「我的最愛」。但是「我的最愛」內分類的項目只能用在你自己的電腦,假設今天到其他地方上網,勢必造成更多的搜尋時間來找經常瀏覽的網站,故此,「網路書籤」的服務便應然而生。只要在「網路書籤」的網站(Furl跟del.icio.us)上註冊,便可以在該網站上編輯自己的分類,並可以將常上的網站網址一一歸類在編輯出來的資料夾。往後,不管到了哪裡,只要登入已設定好的「網路書籤」網站,便可以瀏覽所設定好的網站。

而我blogger的分類,就是基於「網路書籤」的服務上。

在「網路書籤」的網站上註冊,並建立要分類的資料夾,譬如「瞎跑」「胡言」「亂語」...等等,再進入準備分類的文章網址,利用「網路書籤」所提供的工具列,將文章的網址放進所要分類的資料夾中,這樣一來,我的文章就已經分類在「網路書籤」的資料夾中了,我用的furl有個小缺點,就是無法編輯在資料夾內的順序,所以最好還是從最早的文章開始,一一放上書籤。

把文章都分類好之後,現在就要將這個分類放到自己的blog上。

首先在blog上新增一篇文章,這篇文章主要的用途是拿來放分類的,所以標題盡量用分類的名稱,而內文,則將「網路書籤」網站中取得該分類的code給貼上去,這樣一來,只要打開這篇文章,就可以看到分類裡面的文章了。還有一件重要的事,就是這篇文章的日期要設在最早,這樣一般的文章才會把這篇給擠下去,而不會出現在版面上,也不能設回應,不然別人分類頁裡回應感覺也怪怪的。

最後,只剩下在版面上新增標題,如前一篇所學到的方式,在範本的code中,新增“分類”的標題,再將分類的文章做連結,如同上一篇連結別人網站的做法一樣,結束修做一下修飾即可。

往後新增一篇文章後,只要利用網路書籤提供的工具列,直接將該文章分類到該網路書籤。

p.s利用網路書籤做分類只是其中一個方式,因為自己用這方法故紀錄之

下附流程圖~(話說這分類搞了我一天)

分類
(圖示,擊點放大,建議右鍵-在新視窗開啟連結)

星期四, 8月 17, 2006

BLOG工事紀實-2

話說為何要從時鐘談起?不就把碼貼上就好了嗎?
話雖如此,但我是一個連語法都不懂的人啊!!

好在,在我一開始選用的範本中,在Link那邊有個DEIT-ME的選項,當然,我也不知道那是什麼東西,糊裡糊塗就按下去,剛好出現blogger的教學,教你怎麼把別人的網址跟你的blog做連結。翻開範本中的Code,如圖中所示,左邊綠色線的地方就是你所要連結的網址(http://news.google.com);而右邊綠色線的位置(Google News),則可以隨你高興地幫這網址改名稱,順手試了幾下,咦?還蠻簡單的嘛!建立起玩blogger的第一個信心!XD

Re: 11
(圖示,擊點放大,建議右鍵-在新視窗開啟連結)

人一有心,興致就來了!接著看到紅色線(Links)的地方,Links不就是標題嗎?前面還有個title,哈...你再躲阿,狐狸尾巴露出來了吧!<h2 class="sidebar-title">Links</h2>就是顯示Links這5個字母的地方,那下方紅線的地方<h2 class="sidebar-title">Previous Posts</h2>不就是Previous Posts?這樣一聯想,就算我看不懂code,也大概能猜得出來code跟版面相對位置的關係。除了這兩條紅線位置之外,也一定有其他標題的code,換句話說,只要我高興,直接把<h2 class="sidebar-title">xxxxxxx</h2>拿來改一下貼上去,就能創造自己的標題;而複製綠色線的部分,可以拿來自己做連結,還可以用</ul>來增加上下的空行來調整位置。

現在,只要找到小玩意(寵物、時鐘、小flash game)的code,就可以貼在想要出現的位置了!不過還是把原本範本中的code給備份好,要是出了錯,還有機會補救。而自定標題、連結的動作,在往後剛好應用到音樂跟分類上。

沒想到藉由貼小玩意(寵物、時鐘、小flash)到blog上的動作,了解一點觀念,真是一兼二顧,摸蛤仔兼洗褲!!

BLOG工事紀實-1

這幾天已經將blog大部分的功能掛上去,blogger的功能陽春,對於我這個不懂語法的人來說,算是相當吃力。自從2004註冊以來,從來沒有再使用過,畢竟,在文章分類、相簿、管理上,並不如無名、xuite等直觀介面來的親切。不過,話說回來,版面簡潔無廣告、可塑性高,卻也成為blogger最大的賣點,尤其當你歷經千辛萬苦建造出自己的blog,才能夠享受到『玩』blog的樂趣,雖說在blog中,內容充實與否是最重要的事,倘若藉由這樣的樂趣來提昇自己寫文的慾望,何嘗不是件樂事?(尤其是對我這懶鬼來說XD)

這串紀實系列中,一邊紀錄建構時自己所嘗試的部份,也一邊加強建構的流程跟觀念。在建構時雖然是跟著教學一步步做,在一些觀念上可能還尚未釐清,希望除了外語的因素外,看能不能在不需借助教學的情況下,自己重新弄出一個blog囉。

下回,將自己建構的各部份做觀念上紀錄:

1.時鐘 2.分類 3.音樂 4.相簿

新車Lynskey Helix

心裡一直想要搞一台新車,到底是更換碟煞爬坡車架? 還是弄台沒試過的空氣動力? 或是輕鬆騎乘的長途車款? 最好在氣候惡劣的狀況下,還能任性出車。 在積極試地試乘完捷安特所有車系,還有雲豹的鈦合金所有車款的試騎後,依然沒有結論。 爬坡架?和現有的車架同值性太高。 空力架?成車配的齒比...