Josh's Note

2007年2月2日

預計將樣板更改為Gadget 1.0

這幾天把之前從羊男那裡得到的Gadget 1.0的樣板，稍做更改，預計週日會做更換。

之前之所以不用這個樣板的原因，就是Gadget 1.0的版面寬度只有785 px，不然說真的，我滿喜歡這個樣板的，所以我特地把版面寬度給增加為930 px，而原本的Sidebar是只有一寬二窄，我特地在下面再加入一個寬的欄位，以上……看圖吧。

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下載

Blogger Template : Gadget 1.0
BlackCat 2.0.0 FinalTune（以上由羊男提供，前往他的Blog有詳細解說）

emplate-minima
template-minima-blue
template-minima-dark
template-minima-ochre
（以上由iMESSENGR.COM提供，請自行前行下載）

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

BlogBetaTemplate_Kubrick（以上由Kaie提供）

~~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;
}