2007年1月29日

到訪人數突破1000人次

早上起來看了一下,原來我這個小小的Blog到訪人次已經超過1000了,特地把畫面留起來作個紀念!向10000人次邁進。


上面每一個點都代表每一個來我Blog的人,多謝你們。

2007年1月28日

網路筆記本–Google Notebook

「Google Notebook?這是什麼?Google出的筆記型電腦嗎?」

這是我看到Google Notebook的第一個想法,好奇心驅使下,點網址去看看,一看到又要輸入Gmail的帳號,心想可能有好東西吧!一進去原來要安裝套件(我是用FireFox),安裝完裝新開啟FireFox,發現右下的狀態列多了一個小筆記本。


旁邊還有「Open Notebook」的字,一按跑出了一個小記事本。


稍微看了一下網站上的解說,大概了解這個小插件的作用;當你在網路上看到好的文章想收錄時,只要把文章反白,點滑鼠右鍵選「Note This(Google Notebool)」,該文章就會收錄在Google Notebook。


以後想要觀看時,只要點選Google Notebook上的標題就能觀看,而且還能做編輯,還可以增加目錄來做分類,就算是圖片也是一樣,而你所節錄下來的資料是存在網站上的,只要選Google Notebook右上「放到最大」的按鍵,就會連上Google Notebook網站上,而剛才所節錄下來的內容,全都在上面,而且在網站上也能進行編輯,而且還可以把你的Note利用傳送給別人(只要對方有Gmail的帳號),甚至於還能設定為一個公開的網頁,讓網路上的所有都能觀看。

總之,我覺得Google Notebook真的不錯,Google Notebook可以說是集合「創作」、「整理」、「分享」、「剪貼簿」於一身的線上工具,別再用Windows內建的記事本了,大家一起來用Google Notebook吧!

免費的網站流量分析–申請Google Analytics

我在1/17剛申請完Blogger.com時,就順便把一些Google有提供的服務一次全部申請完,像是Google SiteMap、Google Page Creator、Google AdSense、Google Reader以及Google Analytics,這幾天用下來,發現Google Analytics真的是棒,分析的資料很詳細,還能依行銷和管理這兩方面來做網站的流量分析,分析報告也分好多個方向,雖然我的Blog才正要突1000人次(當然也是希望利用這篇來吸引一些人氣),但是我一定要向各位推薦Google Analytics。

首先當然就是要到Google Analytics,當然啦,只要你有Gmail通行證,Google的世界任你遊,登入後先看到就是Google Analytics的介紹。
  • 改善您的網站並提高行銷投資回報率。
當然「申請」就不要客氣的按下去啦!
補充一點,申請的網站需要有根目錄,而且能夠編修模組。
例如:
  • http://www.wretch.cc/blog/XXXX(沒有根目錄)

  • http://XXXX.blogspot.com (有根目錄)
(這樣好像台灣很多的BSP都不行耶!!)


輸人網站位址、帳戶名稱(會自動從網址拉下來)及選擇國家後,在下一頁輸入聯絡資料及觀看使用者點約後,系統會給你一段Java Script碼,如下圖:


將這一段Java Script碼Copy下來,進控制主頁–範本–修改html,把Copy下來的程式碼,貼到</head>的前面,再按


之後回到首頁,你會看到「尚未驗證追蹤您的網站」的字樣,這個時候按下的按紐(不是按這一個喔!!要按Google Analytics的啦!!),如果你剛才Java Script碼放對地方的話,應該會有「已經成功安裝 Analytics (分析),現在正在收集資料。」的字樣,如果沒有,請檢查程式碼放置的地方是否正確。

而第一份報告,根據Google Analytics說明文件, 大約要24小時後才能收到,到時候你就能用Google Analytics來幫你的網站做流量分析。

Google Analytics的分析有多詳細呢?我先把我的資料秀一下,樣本數很少,請多見諒。

當你進入檢視報告的頁面時,可以發現二個部份,一個是左邊的控制頁面以及右邊的圖化的報告,控制除了一般選項外,還能以行銷和網站管理者的角度來切換。


而報告的方面就又分得更細了,在這就不再多加詳述了,另外還可以依日期來做選擇。

至於圖形分析部分,除了記錄到訪數、網頁檢視之外,還有新、舊訪客,及訪客從那一個網站、那一國家來造訪你的網站等等,詳細的資料等者各位自己去了解。下面再貼一些圖形化分的的圖片給大家稍微了解一下。





2007年1月27日

【轉錄】Ben's 部落不及格: 漫談改造裝潢 Blogger!

Ben's 部落不及格: 漫談改造裝潢 Blogger!
當我第一次到這個Blog時,就被整個美工設計所吸引,如果不是看到網址上的Blogspot.com,還真不知道這是一個Blog,尤其是畫面最下面利用png的特性所設計的背景圖,如果你還沒去,馬上點上面的Link,過去看看吧!

2007年1月26日

Blogger.com樣板補完計劃

逛過不少Blog,也看到不少的好樣版,每次看到好束西總會想留下來,有空來套套看,結果我現在的樣版一改再改,怕自己把樣板套上去後,之前有改過的地方還要再全部動一次。
現在全部放上來,大家有空幫忙套套看,心得交流一下。

UPDATE:因原作者要求,已將連結取下,請自行前往原作者Blog下載

  • MinimaMinima
  • StretchMinima
  • BlueMinima
  • Blue StretchMinima
  • DarkMinima
  • Dark StretchMinima
  • OchreMinima
  • Ochre Stretch(以上由Hoctro's Place提供,請自行前往下載

  • hacked-minima 3-column Minima
  • hacked-scribe 3-column Denim
  • 3-column Dotsdark
    UpData:1/27
    新增3-column Dotsdark,來源:Hackosphere,請自行前往下載
  • template-andreas04(以上來源已忘記,在此向原作者說聲抱歉,原作者GeckoAndFly.com,由Blogcrowds.com修改為Blogger版本)

  • Harbor
  • Rounders
  • Rounders 2
  • Rounders 3
  • Rounders 4
  • Scribe
  • Herbert
  • Jellyfish
  • Sand Dollar
  • Tekka
  • 565
  • 897
  • Dots
  • Dots Dark
  • Denim
  • Denim Light
  • Denim Washed

updata:1/27
以上來源為Blogcrowds.com,請自行前往下載


如果各位有上面所沒列到的樣板,也歡迎提供來源,我將補上,謝謝。

如何將你的Label做成Tabs(分頁)(續)

我已經把圖片抓下來,和css各作分類,請自行取用。(每一種各有二張圖)

Tabs A
tableft.gif tabright.gif

#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}


Tabs B
tableftB.gif tabrightB.gif

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}

Tabs C
tableftC.gif tabrightC.gif


#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

Tabs D
tableftD.gif tabrightD.gif


#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}

Tabs E
tableftE.gif tabrightE.gif

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}


Tabs F
tableftF.gif tabrightF.gif

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

Tabs G
tableftG.gif tabrightG.gif

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}

Tabs H
tableftH.gif tabrightH.gif

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

Tabs I
tableftI.gif tabrightI.gif

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}

Tabs J
tableftJ.gif tabrightJ.gif

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

Tabs K
tableftK.gif tabrightK.gif

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}

2007年1月25日

Label Cloud(標籤雲)進化版

今天又Google到一個不錯的地方–Kaie's Blog,文章都很不錯。

我還利用[AJAX] AJAX Labels Cloud的方法幫我的Label Cloud做了升級。

之前的Label Clouds是利「Label Clouds(標籤雲) For Blogger」製作的,當我點選Label時,是由系統用搜尋命令:
http://blogname.blogspot.com/search/label/labelname
來轉換頁面,當頁面轉過去後,還要選擇文章標題才能進入文章內容觀看;改用這個方法後,可以先在原來的頁面叫出該Label中前五則的文章內容來做預覽,再選擇文章,這中間頁面轉換的時間只需一次,原來的方法要轉換二次,所以換成新的方法會更有效率。

如果你想要套用,到[AJAX] AJAX Labels Cloud,他的解說很詳細。

如何將你的Label做成Tabs(分頁)

在看了 [推薦] 53個你不能錯過的CSS技巧之後,我就馬上將其中一個Tabs放到我的Blog,原本只是用做成普通的Link,今天特地把Label轉成Tabs來用。

首先當然就是要選一個Tabs的樣本,至於樣本你可以在Free CSS Navigation Menu,「按右鍵、檢視原始檔」來挑選,也可以按這裡來選擇。

Read More功能強化版

在套用這個樣板的時,這個樣版已有內建Read More的功能,但我發現在有一點很不方便。

當你按下“read more”後,並不會馬上把隱藏起來的文章內容顯示出來,而是再重新Load進來
當我逛到Racklin's 阿土伯程式大觀園時,我發現了阿土伯的方法,就可以做到。

而且還把部落格會笑了!Blogger Smiley!的功能也整合了進去,這二個站真的很不錯,有空多去逛逛吧。

2007年1月24日

[推薦] 53個你不能錯過的CSS技巧

[推薦] 53個你不能錯過的CSS技巧

這53個CSS真是沒話說,我也移植了一個到我的Blog,因為他的配色正是我所需要的,而且透過定位,以後還可擴充。剩下的52個,我一定要好好研究一下。

2007年1月22日

將Archives頁面底部的文字導向連結圖形化(續)

將Archives頁面底部的文字導向連結圖形化
如果要上述的導向連結頁首也加入的話,只要再加入一小段就可辦到。
一樣進入修改 HTML,選取展開小裝置範本,搜尋下列程式碼:
<b:includable id='main' var='top'>
<div id='blog-posts'>

再加入下列程式碼:
<b:include name='nextprev'/>
完成後就會像下圖一樣

將Archives頁面底部的文字導向連結圖形化

當我們進入Archives頁面時,畫面最底部有三個文字連結,分別是:「較新的文章」、「首頁」、「較舊的文章」,這三個文字連結,透過範本編輯,也能夠以圖形連結的方式來進行美化。

Google Talk Chat With Msn Messenger

偶然逛到這個站,發現到這一篇用Gmail Chat 整合MSN, Yahoo!,AIM,Jabber ,只知道Msn和即時通能互聯,沒想到連Google Talk也行,馬上試試看。
首先要去這裡下載一套叫Psi的軟體,選擇下載Windows Zip Archive (2.96 MB)這個版本,因為我們只是要做設定用,下載完解壓並執行Psi.exe。

【轉錄】40個你不可不知的Google常見服務!

最近在遠見的《每一秒都在改造世界 誰能不怕Google?》文 章中,看到目前Google已經推出520種服務,並且以平均一個禮拜推出一個「新玩意」的速度成長,天啊!竟然不知不覺就多達520種了,猶記得不久前 市面介紹Google的書籍都還在介紹Google搜尋服務的玩法,一眨眼整脫拉庫的服務就冒出頭來了,Google很喜歡把各種服務分散在各個角落,不 過想當然爾,一旦將所有項目整合在一起,想必很可觀,以下我大概整理出40個Google最常見的服務,你能認出幾個呢?

2007年1月21日

利用Google reader加入最新文章和最新意見

要在SideBar加上最新文章和最新回應,可以用Blogger所提供的Feed來製作,但是它最多只能顯示5則,之前曾http://jinyaolin.blogspot.com/index.htmlBlogger(Beta)最新文章與最新回應JavaScript Code Part II來製作,但是完成後覺得網站在Loading的時候有點不順,不知道是不是因為太多JavaScript的關係。
這時突然想到Google也有Feed Reader(Google Reader),二話不說趕緊去試試看。

2007年1月19日