2007年4月25日

Google Map 有台灣的街道圖了

天早上是王建民這個球季首次先發,起了個大早準時守在電視旁觀看,可惜輸球了,話說王去年四月也才拿下一勝,所以現在才一敗而已,也不用太在意,當我看完球賽後,興致一來就想看看Yankee Stadium,於是就上Google Map去瞧瞧,接著就將地圖轉到台灣,當Zoom in到一個程度後,發現Google Map上的台灣竟然出現了高速公路,如下圖:

雖然有一段時間沒上Google Map,也不知道是原本就有還是新增的,於是乎就繼續Zoom In下去,因為我住台中,所以就往台中地區Zoom In,就我對地圖的認識,梅花外框的是國道,盾形外框的是省道,現在Google Map連省道也有標示了,如下圖:

接著再 Zoom In就出現了台中市的棋盤式街道圖,除此之外,我想曾經從外縣市騎車或開車進入台中火車站週邊的人,一定會對台中火車站週邊的單行道很有印象,現在Google Map上連單行道的行進方向也有清楚的標示出來,如下圖:

為了了解Google Map的詳細度,所以又把地圖移往台中市西屯區,想不到竟然連巷弄也有,往常我在網路都是使用UrMap進行查詢,所以我特地來比較一下兩者的詳細程度,地圖選用台中逢甲大學週邊–西安街以南、逢甲路以北、福星以西及烈美街以東的區域進行比較,比較如下:

第一張是Google Map在地圖模式放到最大,第二張是UrMap地圖模式放到最大,兩張的大小都是560×600,經由比較可以發現Google Map的Zoom In程度比UrMap較大,接著換衛星地圖,如下:
第一張Google Map的衛星地圖和地圖模式一樣,而UrMap的衛星地圖最大只能到“10”,兩者相比,又是Google Map勝出,不過UrMap有一點倒是贏了Google MapUrMap結合了104人力銀行Kijiji 台灣、1111人力銀行工作機會和許多的地標,讓搜尋更加便利,而Google Map的搜尋方面還不是很完善,目前用中文只能搜尋到縣市名稱和比較有名的地標,不過能在Google Map上看到台灣也有街道圖也算是不錯了。

New Templates For Josh's Note

一個星期沒發新的文,主要是因為正在自己設計一個新的Template,這次最主要的變動,就是把Header收到Sidebar的正上方,這樣做除了可以讓整個版面看起來更簡單,文章區和Sidebar的分別更是一目瞭然,而且Footer也去掉,改用三個區塊替代,Sidebar還是維持同樣的設計,整個版面看起來還滿有個人風格,現在正在進行Css的微調,目前完成的版面配置如下圖:

這是我第一個自行設計的Templates,自己覺得還算滿意,等完成後再提供下載分享。

2007年4月16日

自行架設Ftp伺服器備份Blogger文章

幾天曾提過如何利用HiNet FTP空間備份Blogger的文章,然而對於不是使用HiNet的人來說,除非能找到一個Ftp空間來進行備份,否則只有自行架設一個Ftp伺服器才能來進行備份,至於架設Ftp的伺服器有很多,例如Windows的IIS、雷電FTPD、GuildFTPd、Serv-U等等,而我這一篇所實作的軟體則是Serv-U,個人覺得Serv-U設定很簡單而且好用。

目前Serv-U最新版本為6.4,因為在這我只是要做個備份,並不是真正要架一個Ftp伺服器,所以我在這僅提供4.2版+中文化給大家,請先下載Serv-U 4.2英文版Serv-U 4.2 中文化檔案

首先請先執行Serv-U 4.2英文版的安裝檔案,安裝過程在此不加詳述,當你安裝到最後時,如下圖:
因為還要進行中文化的動作,所以先將“Start Serv-U Administrator program”這一項取消選取,按下“Finish”並將右下常駐的Serv-U取消常駐,接著執行中文化的檔案,完成後於桌面執行Serv-U。

當Serv-U執行後,會跑出一個設定精靈,你可以依下面的列表設定或自行設定:
  1. 顯示選單圖示:是
  2. 啟動伺服器
  3. 你的IP位址:動態IP請空白,固定IP可填可不填
  4. 網域名稱:前面說過,架這個伺服器只是要備份,所以直接按下一步
  5. 系統服務:不
  6. 匿名帳號:不
  7. 使用者帳號:是
  8. 帳號名稱:請自行設定
  9. 帳號密碼:請自行設定
  10. 起始目錄:選擇一個目錄做為登入FTP直接開啟的目錄
  11. 鎖定起始目錄:避免麻煩,選“是”
  12. 管理權限:選擇系統管理者以取得伺服器的最大權限
  13. 完成
以上步驟完成後,你可以登入剛才所架設的Ftp伺服器看看,在網址列輸入“ftp://你的IP/”,輸入帳號、密碼就能登入了。(如果你有使用防火牆,請記得將port 21打開)

接下來的步驟和如何利用HiNet FTP空間備份Blogger的文章差不多,在這再一次簡述一下。

Ⅰ、在「控制主頁–範本–修改HTML」頁面中,備份範本,並在頁面下方將範本回復成傳統範本:

Ⅱ、在「控制主頁–設定–發佈」的頁面中選擇Ftp發佈:

Ⅲ、進行連線的設定,其中“FTP伺服器”請填入你的IP位址,下方的帳號、密碼則填入之前安裝Ftp伺服器時所設定的帳號、密碼:


Ⅳ、儲存設定後,點選“立即重新發佈”,完成後你會發現所有的文章,已經備份到你的硬碟上。

完成備份,照例要回復成備份前的格式:
  1. 在「控制主頁–設定–發佈」中將發佈模式換回blogspot.com
  2. 在「控制主頁–範本–自定設計」進行升級
  3. 在「控制主頁–範本–修改Html」將之前所備份的範本上傳
關於Ftp備份Blogger,大致就是這樣,也許其他的 BSP為了搶Blogger的使用者,會提出更方便的備份方法,但是對於Blogger的忠實用戶,學會Ftp備份真的很重要。

2007年4月13日

如何利用HiNet FTP空間備份Blogger的文章

備份Blogger的文章,其實不用一篇一篇剪下貼上,Blogger本身有提供FTP發佈的方法,所以可以用FTP來進行備份,前提是必須有Ftp的空間或是Ftp伺服器;如果你的ADSL是使用HiNet,HiNet本身就有提供一個Ftp的空間給用戶,如果沒有Ftp空間,也可以自行架設一個Ftp伺服器,架設Ftp伺服器首推「Serv U」,架設的方法改天再寫一篇專文,現在先介紹如何利用HiNet的Ftp空間來備份Blogger的文章,因為根據Google Analytics的分析,有將近五成訪客是使用HiNet。


想要利用Ftp進行備份,首先必須將Blog的訪問權限設定為“任何人”,你可以在「控制主頁–設定–權限」進行變更。


接著還需要將範本恢復成傳統範本,也就是恢復成舊的Blogger格式,所以在進行這一步時,最好將範本備份,而恢復成傳統範本的選項可以在「控制主頁–範本–修改HTML」頁面中最下方找到。


當完成上述的設定時,就可以在「控制主頁–設定–發佈」的頁面中,看到Ftp發佈的選項,連線方式有二種:Ftp和sFtp,目前HiNet似乎無法使用sFtp進行連線,建議選擇Ftp即可。


接下來要進行連線的設定,如下圖:

  1. 這裡是以HiNet做示範,所以在“FTP伺服器”請填入“upload.myweb.hinet.net
  2. Blog URL填入欲進行備份的Blog網址(包含“Http://”)
  3. Ftp路徑則填入Ftp伺服器要放置備份檔案的資料夾名稱,也可不填
  4. 在頁面下方輸入會員帳號和密碼
  5. 儲存設定後會在頁面上出現“立即重新發佈”,點擊它進行備份

完成備份後,接著就是要Blog恢復成之前的格式,首先就是在「控制主頁–設定–發佈」中將發佈模式換回blogspot.com,接著到「控制主頁–範本–自定設計」進行升級,升級完後再將之前所備份的範本上傳,完成上述動作,你的Blog就會恢復成原本的模式,而且所有的文章也完成了備份。

至於沒有HiNet Ftp空間的朋友,請耐心等候,過幾天再來介紹如何自行架設一個FTP伺服器來進行備份。

2007年4月5日

「繼續閱讀懶人加強版」無腦安裝完成(UpData 4/8)

徵求原作者同意後,我便開始製作「繼續閱讀懶人加強版」的自動安裝頁面,利用清明節的假期,外面又冷的不想出門,待在家裡把這個安裝頁面完成,這個「繼續閱讀懶人加強版」能夠自動套用而不必再加入任何特殊標記就能夠有“繼續閱讀”的功能,主要的功能如下:

繼續閱讀方面:
  1. 可選擇延展/收合(Expand/collapse)或直接連結兩種方式
  2. 可自訂繼續閱讀顯示文字
  3. 自動判定文章內容階層,不會有切不完整的情況發生
  4. 可設定各頁面(首頁、標籤(tag)分類頁、blog存檔頁)
  5. 不同的檢視方式,有三種:全文、摘要、標題
檢視方式快速切換:
  1. 自動產生「全文|摘要|標題」的連結,可直接點選並快速切換檢視方式
  2. 連結名稱可自訂
  3. 擺放位置可自訂(需改範本HTML)
但是這「繼續閱讀懶人加強版」無法和和阿土伯的繼續閱讀功能並存,所以我下一個動作就是要將這兩者整合,如果你等不及了,就先用吧!
UpDATA 4/8:
已將「繼續閱讀懶人加強版」整合入「超級無腦安裝Blogger外掛功能」裡面,阿土伯版和懶人版只能二選一進行安裝,而原本單獨安裝懶人版的方式也保留。

UpDATA 4/14:
增加「只有繼續閱讀」的安裝方式。


下方的圖示將會帶你到快速安裝頁面,
在該頁面上選擇「繼續閱讀懶人加強版」的標籤



文章參考:
[BLOGGER]繼續閱讀懶人加強版(for Blogger New) 最新版本 v1.4.2(2007.3.15)
[BLOGGER]繼續閱讀懶人加強版 - 完整安裝 教學
[BLOGGER]繼續閱讀懶人加強版 - 只安裝繼續閱讀 教學
[BLOGGER]繼續閱讀懶人加強版 - 參數設定說明

2007年4月4日

「超級無腦安裝Blogger外掛功能」功能更新

阿土伯的blogger_ext2版本更新至0.6.2版,利用了點時間將安裝程式做了更新,因為改的很匆忙,沒有Debug很徹底,如果各位在用安裝使用後有發生錯誤,請留言給我,待週末有空時一併來處理,這個版本新增了社群書籤的功能,而在安裝頁面中,我有把各個社群書籤分開,讓使用者可以自行選擇想要加入那一個社群的書籤按鈕,這一次我利用阿土伯的blogger_ext2 0.6.2版加入安裝程式的新功能如下:

  • NavBar原先只能完全隱藏,blogger_ext2 0.6.2版新增浮動隱藏和完全隱藏的選項
  • 新增社群書籤功能,預設放置位置在post-icons這個<span>區塊的後面,以<span>區塊包起來,預設class為post-bookmarks。
  • 共有七個社群書籤可供自行選擇,HEMiDEMi預設為選取。

如果你曾經安裝blogger_ext2之前的版本,請先將舊的widget刪除,再安裝最新的版本。
UpDATA 4/8:
已將「繼續閱讀懶人加強版」整合入「超級無腦安裝Blogger外掛功能」裡面,阿土伯版和懶人版只能二選一進行安裝,而原本單獨安裝懶人版的方式也保留。


下方的圖示將會帶你到新的blogger_ext2快速安裝頁面


文章參考:
輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!
部落格會笑了!Blogger Smiley!
blogger_ext2.js 加速篇–全面換用Google Code
blogger_ext2.js 0.6 版本發表
自由選擇你想安裝blogger_ext2的功能
blogger_ext2.js 0.6.1 版本發表
更勁爆的「超級無腦安裝Blogger外掛功能」
blogger_ext2.js 0.6.2 版發表

2007年4月3日

Blogger新增二個內建Widget

Blogger Buzz是Blogger發佈最新訊息的平台,所以我如果有想到的話,都會去Blogger Buzz看看,今天上去看了一下,果然,Blogger又有新功能,那就是新增了二個內建的網頁元素–Newsreel和Video Bar,這兩個新的網頁元素的共同點就是利用Google AJAX Search API技術來進行搜尋。


Newsreel的來源是Google News,再利用你所設定的Keyword來進行搜尋,Keyword可以設定多組,而且會以Keyword來做出分頁的效果,而且還會依照你所擺放的欄位而呈現不同的樣式。如下:



而Video Bar的來源則是Google VideoYouTube,也是依照你所設定的Keyword進行搜尋。


有興趣的可以裝看看。

2007年4月2日

Google AdSense Inside The PostⅡ

早之前我在Google AdSense Inside The Post中已提過如何將Google AdSense放入文章之中,但是AdSense和文章之間總是會有一片空白的地方,如果想要讓Google AdSense和文章緊密的結合在一起,能夠辦得到嗎?答案是肯定的。

之前我是將Google AdSense的程式碼放在“post-header-line-1”這個DIV區塊中,這個Div區塊的下方,你會發現另一個Div區塊–<div class='post-body'>,再往下可以看到“<p><data:post.body/></p>”這一行,根據Blogger Help–版面配置資料標記的說明,可以知道post.body所顯示的是文章的內容,於是我便開始試驗將Google AdSense移到<div class='post-body'>這個區塊裡面的結果。

首先我把Google AdSense的程式碼放在“<p><data:post.body/></p>”這一行的前方,但是所得到的結果和之前的方法一樣,如下圖:


接下來我將Google AdSense的程式碼移到“<p>”和“<data:post.body/></p>”之間,但是AdSense和文章雖有結合,但卻不是我想要的結果,如下圖:


於是我在範本新增一個CSS的class,內容如下:
.ad {
float:left;
}

這個樣式主要是要讓「標籤元素向左靠,文字圍繞在右邊」,再將Google AdSense以一個Div包起來,並將這個Div的class指定為新增的這個樣式,如下:
<div class='ad'>
(Google AdSense 程式碼)
</div>

這樣所呈現出來的就是我想要的結果,如下圖:


如你所見,Google AdSense和文章完美的結合在一起了。
  • 這裡只有簡單寫出Google AdSense程式碼所放置的位置,一些需要修改的地方不再重述,請參考Google AdSense Inside The Post
  • 這個方法比較適用於正方形的的Content,儘量不要用橫幅的Content。

Google AdSense Inside The Post

我所知,Blogger在文章內是不能加入JaveScript的,正因如此,也就不能直接將Googld AdSense的程式碼放在文章內,因此只能透過修改範本方法來達成,所以首先就找出想放置AdSense的Div區塊代碼,我利用FireFox附加元件–Web Developer找到文章內容上方有一個“post-header-line-1”的Div區塊可以利用,這個Div正好位於文章內容的正上方,如下圖:



但是Google AdSense的計劃政策有規定,同一個網頁最多只能顯示三個廣告組和一個連結組,要避免違反這個規定,就必須設為首頁不顯示,而根據Blogger Help–版面配置的小裝置標記的說明,用<b:if cond='condition'> 可以做到,至於詳細做法如下:
  1. 先在範本中找到<div class='post-header-line-1'/>

  2. 到Google AdSense產生你所想加入的AdSnese程式碼,通常產生的程式碼如下:
    <script type='text/javascript'><!--
    Google AdSense Code
    //-->
    </script>
    <script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
    </script>

    紅字部份依設定而有所不同,另外還需將藍色部份稍做修改,將<以&lt;(因半形會被另外解讀,故以全形取代)取代,將>以&gt;(因半形會被另外解讀,故以全形取代)取代,代碼轉換可以到這裡所介紹的網站進行

  3. 因為不想在顯示放在文章內的AdSense,所以必須將AdSense的程式碼以<b:if cond='data:blog.pageType == "item"'>和</b:if>包起

  4. 完整的Code大至如下所示:
    <div class='post-header-line-1'/>
    <b:if cond='data:blog.pageType == "item"'>
    <script type='text/javascript'><!--
    Google AdSense Code
    //-->
    </script>
    <script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
    </script>
    </b:if>

    藍色部份記得要依照步驟2進行修改
  5. 完成後所呈現的結果如下圖: