2010年5月30日 星期日

試用Blogger提供的新模板範本修改工具

https://blogger-script-study.blogspot.com/2010/05/blogger-templates-setting.html?m=0

Google 的 Blogger 雖然很自由化,功力好的人可以任意發揮,但最為人詬病的缺點就是「不友善」、畫面太陽春,雖然網路上有很多的範本/板型可以下載,但沒有一點點程式語言基礎的人,尤其初摸電腦的人簡直就是無字天書,最近 Blogger 出了「測試區」(翻譯得有點奇怪),我覺得「試驗區」還比較恰當,讓格有可以簡單的設定兩欄、三欄的板型,字型的顏色及大小,真的是嘉惠使用 Blogger 的使用者了。

實際用過之後,真的覺得進步很多,可以比擬 YAM天空部落的設定,下面我們就來稍微介紹一下如何使用吧!

1. 進入Blogger的後台,在【資訊主頁】的畫面,下拉網頁到最下方,可以看到一個【其他專區】區域,在【工具和資源】的欄位下點選【Blogger測試區】。
Blogger_new_template01

2. 畫面會在回到【資訊主頁】,但是左上角的Blogger圖示變成藍底白字了Blogger_new_template02,本來是橘底白字。  原來有個【版面設計】的功能選項也變成了【設計】,點這個【設計】進入。
Blogger_new_template03

3. 會看到多出了一個【範本設計工具】,點擊它進入。
Blogger_new_template04

4. 這就是新的設計頁面,上面的欄位可以讓你視覺化的設計新的頁面,我們必須挑選一個小的範本,才可已有套用新的設計,比如說把兩欄式變成三欄式。我們還是維持我們一貫的橘色系,從【範本】中選擇【Simple】橘色範本。
 Blogger_new_template05

5. 點選【版面配置】,可以設定【主體版面配置】、【首尾版區配置】、及【調整寬度】,我們先來設定【主體版面配置】,我還蠻喜歡側邊欄有全欄及兩欄混和式的,所以就先這個囉。
Blogger_new_template06

6. 接著設定【首尾版區配置】,我選了下面有三欄頁尾的設計。
Blogger_new_template07

7. 再來是【調整寬度】,這裡可以調整整個網誌的寬度及側邊欄的寬度。如果是三欄式的範本就會有兩個側邊欄的寬度設定可以選擇。
Blogger_new_template08

8. 點【進階】可以設定網頁的字型、大小及顏色,也可以設定一些標題的文字,還不錯用的,但還不能設定側邊欄標題為整條反白。
Blogger_new_template11

9. 都設定完成後記得按下右上角的【套用至網誌】,這樣設定才會被套用喔!
Blogger_new_template12

10.這就是 設定完成的版面的配置圖。
Blogger_new_template09

11.這就是實際網誌的面貌了,由於資料量不多,所以好像看不太出來有什麼多樣化,也許來放個部落格廣告會比較不一樣?XD!想賺錢想瘋了!
Blogger_new_template10


回到 Blogger 部落格技巧總整理


延伸閱讀:
BTemplates-設計給Blogger的板型/範本網站

2010年5月26日 星期三

用Blogger的「網頁」清單建立「導覽列」

https://blogger-script-study.blogspot.com/2010/05/blogger-pages-create-browse-menu.html?m=0

現在起使用 Blogger 也可以輕鬆製作「導覽列」選單了。以前都只能下載別人製作好的範本或自己修改模板語法 (template Html),否則很難製作出導覽列。

導覽列的好處可以讓網友在瀏覽我們的部落格時,快速連結到部落格內的特定網頁,比如說連結到「相簿」、「留言板」、「關於我」…等,我較常用的是連結到一些我已經針對某一主題寫過很多文章的整理文,這樣可以方便讀者找到一個有主題的導覽文,也增加了訪客的停留時間並降低網頁的跳出率。

很多人一開始看到這個「網頁」清單的新功能都搞不清楚是什麼,就算知道了也不會用,我也不例外,後來找了一些資料才知道如何使用。

1. 首先進入 Blogger 的後台的【版面配置】,隨便點選一個可以【新增小工具】的地方。
Blogger_Pages02

2. 開啟「新增小工具」視窗,點選【網頁】。
Blogger_Pages03

3. 會切換到「設定網頁清單」視窗。建議你把「標題(可省略)」】的地方變成空白。一開始只有一個「首頁」指到你的部落格的根部網址你,也可以變更其命名,比如說改成英文【Home】,先按【儲存】。
Blogger_Pages04

4. 回到【版面配置】畫面,如果你的「網頁」小工具不是出現在整頁的最上方,就用拖曳的方式把它拉到整頁的最上方。
Blogger_Pages06

Blogger_Pages05

5. 先按【儲存】,然後按【檢視網頁】,你會發現網頁標題的下方出現一個新的導覽列,也有一個新的導覽選項【首頁】,就是剛剛新增的那個,如果你剛剛把它改名為【Home】,它就會現出【Home】。
Blogger_Pages07

6. 接下來,我們來多增加一個新的導覽選項【關於我】。再進入Blogger後台 (不是編輯小工具喔!),點選【文章】→【編輯網頁】→【新網頁】。
Blogger_pages01  

7. 「網頁標題:」寫【關於我】,內容就自己寫囉!寫好之後按【發佈網頁】。
Blogger_Pages09

8. 點選【檢視網誌】會到部落格首頁,點選【檢視網頁】會到剛剛新增的「關於我」網頁。先點【檢視網誌】。
Blogger_Pages10

9. 【關於我】的導覽列選項已經加上來了。點選看看有什麼變化?可以試看看在【首頁】與【關於我】之間切換看看。請注意其網址沒有加上年月耶,也就是說直接放在部落格的根目錄,一般的部落格發表的文章都會再跟目錄底下在加上年月,自己觀察看看吧。其實如果剛剛編輯網頁的時候先用純英文的標題,如 【About Me】,那麼網址名稱就會是英文的 blog-root/about-me.html 喔參考這一篇主動操控Blogger的網頁檔名有意義化,提昇PageRank

10. 至於導覽列選項的文字字型大小、顏色及背景,就要使用 Blogger 的新【測試區】功能,有機會再說明吧。

回到 Blogger 部落格技巧總整理

2010年5月23日 星期日

BTemplates-設計給Blogger的板型/範本網站

https://blogger-script-study.blogspot.com/2010/05/blogger-template.html?m=0

介紹一個專門給 Blogger 的使用者下載範本的網站-BTemplates,這個網站收集了各式各樣 Blogger 的範本(template),讓 Blogger 的玩家有個多采多姿的網頁。它還很細心的把範本都分門別類好了,可以按照欄數來選擇(單欄、二欄、三欄、四欄),也可以按照樣式來選擇(從Wordpress轉過來的、給喜歡精緻的你用的部落格(Elegant)、給雜誌部落格用的(Magzine)、給相片部落格用的(Photolog)…),也可以用顏色來區分,還可以用側邊欄在左邊或右邊來區分...等。

  • 名稱:BTemplates
  • 網址:http://btemplates.com/
  • 適用部落格平台(BSP):Google Blogger
  • 使用語言:英文

操作步驟:

1. 進到 Btemplates 首頁,左手邊的主欄位就是可以下載的範本,中間有個分類欄位(Cloumns, Styles)可以讓你根據自己的喜好來篩選範本,右邊的應該是廣告吧!

2. 假設我們先選擇這個【Green City】的範本(template)來當作示範好了。建議先點擊它的圖示進入下一個畫面。
blogger_templates01s

3. 這裡可以有比較大的圖示可以讓你瞭解這個範本的樣子,如果還是覺得不夠真實,可以點選【Live demo】 實際查看套用範本後的網頁樣子。如果滿意的話,就可以點選【Download】。基本上下載回來檔案為壓檔,你必須先解壓縮,解完壓縮後會看到一個【Green-city】的資料夾,範本就在其資料夾下面,會有一個 .XML 附檔名的檔案。
blogger_templates02

4. 打開 Blogger 的後台(要先登入喔!),點選【版面配置】→【修改HTML】→【下載完整範本】,先備份原來的範本。然後點選【瀏覽...】找到剛剛解壓縮的 Green-city.xml 檔案,然後點選【上載】。 不會進入Blogger後台?先參考一下這一篇 Blogger template (板型)修改注意事項
blogger_templates03

5. 上載完成後,有時候會出現一些小問題,可以選擇【保留小工具】,就可以完成上載了。也可以選擇【刪除小工具】那麼這編列出來的小工具就會消失。點【取消】就是取消範本的上載,也就是不變。
blogger_templates04

6. 上載完成後就會出現這個畫面,點【檢視網誌】就可以看到新的範本已經套用了。
 blogger_templates05

7. 完成了。這就是新範本套用後的樣子,跟你預期的一樣嗎?不滿意的話還可以依照前面的步驟把舊的範本換回來。 不過要小心,有一些後來加上去的【小工具】可能會不見,建議在 Blogger 開設之初就把板型設定好,免得以後麻煩。
blogger_templates06


回到 Blogger 部落格技巧總整理

2010年5月12日 星期三

如何申請Google Analytics(分析)

https://blogger-script-study.blogspot.com/2010/05/google-analytics.html?m=0

Google Analytics(分析)功能真的很強,它不但可以提供我們網站的流量,也可以告訴我們很多網站分析有用的資訊,諸如網頁的跳出率、網站(頁 )的停留時間、訪客的回訪率、訪客來源、搜尋關鍵字訪客來源,還可以追蹤網站內點閱分佈圖…等。

我則比較常用它來觀察我部落格的流量變化,因為它紀錄了我從開始申請使用到現在的所有流量資料(1年又8個月),我也常拿它來觀察我的訪客從何而來,然後分析我在網路上的足跡如何影響我的部落格流量,比如說有多少來自FunP而來,有多少從MyShare而來,還有多少來自不同的搜尋引擎。
Analytics11s

如果你還沒有Google的帳號,那你必須先申請一個,因為Ayalytics現在也是Google的服務之一。

1. 進入 Analystics 網址:http://www.google.com/analytics

2. 點擊【請立即申請】。
Analytics01s

3. 你還是需要再輸入一次你原來的Google帳號密碼,以開啟Analystics的使用權限,然後按【登入】。
Analytics02s

4. 點擊【Sign Up】進行下一步。
Analytics03s

5. 填寫欲加入 Analystics 的網址,如果還有更多的網只要加入觀察,可以等到Analystics 申請完成後再加入。
為你的Analystics取一個帳號名稱,以後也可以加入更多的帳號管理。
建議可以將時區改為【Taiwan】。
Analytics04

6. 填寫你的【(Last Name)姓】及【(first Name)名字】,應該可以接受中文字";【國家(Country or territory)】選擇【Taiwan】。
Analytics05

7. 勾選【Yes, I agree to the above terms and conditions】服務條款,然後按【Create new Account】。
Analytics06

8.選擇【A single domain (default】,並複製程式碼,然後按【Save and Finish】按鈕。
Analytics07

9. 進入天空部落(YAM) 後台,點選【管理首頁】→【個人資料】,在「部落格描述」的欄位貼上剛剛複製的程式碼,然後按【資料更新】按鈕儲存。
Analytics08


《2010.11.19更新》
如果你的部落格使用Google的Blogspot,先進入Blogspot的後台,點選「設計」主頁籤,在選擇「修改HTML」次頁籤,找到『</head>』然後在其前面貼上Anayltics的程式碼,按「儲存範本」就可以了。
Google_analysts_blogspot


剛裝上去的時候,狀態(Status)通常是【三角形的驚嘆號】,表示Analytics還未追蹤到程式碼,請耐心等約5分鐘,後再試看看是否已經轉變為【圓形時鐘】或【打勾符號】,如果已轉變,表示程式安裝正確,如果還是未轉變,可能是程式碼安裝錯誤,請檢查或刪除原來的程式碼,然後重新安裝。
Analytics09

狀態(Status)符號的意義:
Analytics10


回到 Blogger 部落格技巧總整理

2010年5月10日 星期一

主動操控Blogger的網頁檔名有意義化,提昇PageRank

https://blogger-script-study.blogspot.com/2010/05/blogger-web-name-pagerank.html?m=0

在我們對搜尋引擎的認知裡,一般的搜尋引擎在搜尋文章時,除了搜尋文章裡面的關鍵字外,文章的網頁檔案名稱也是其搜尋的對象之一,所以如果想要讓搜尋引擎快速找到我們的文章,除了在文章內放上關鍵字之外,有意義的文章網頁檔案名稱也非常重要,這樣可以優化搜尋,PageRank就可以加分。

如果你是用Google提供Blogger來發表你的部落格文章,不知道你是沒有發現到,Blogger其實只能辨識英文,而無法辨識中文字,並給予適合標題的網頁名稱,如果你的文章標題全部都是中文字,那Blogger就會給你一個如【blog-post_??.html】,其中??會用數字代表,的通用網頁名稱,這樣子是無法讓搜尋引勤藉由網頁檔名來瞭解你的文章的;如果你的文章標題中有英文字,那Blogger就會把前面的中文字抓來當作網頁的檔名。

所以我們是可以控制Blogger的網頁檔名的,我們可以先在文章要發表的時候,先取成簡單有意義的英文標題,等到文章發表後馬上改回我們想要的中文標題,這樣就可以擁有搜尋引擎可以瞭解的網頁檔名,也可以有個我們可以理解的中文標題。

就我的經驗,Blogger的網頁檔名一旦指派,無論你的標題名稱或是文章內容如何改變,都不會再變更,除非你刪除原有的文章。

還有一點要留意的,一旦文章發表後,想要更改檔名要越快越好,否則有些搜尋引擎或網路機器人,會把原來的中英混雜的標題收錄進去,以後查詢搜尋引擎的時候可能就會看到一些奇奇怪怪的文章標題,建議你可以把標題作成有意義的全英文格式,等發表後馬上改回你想要得中文格式。

來看看如何控制Blogger的網頁檔名吧!這裡示範的是使用 Windows Live Writer 的部落格離線編輯工具,方法也可以適用在Blogger的網頁編輯工具上,此方法可能不適合其他的部落格平台(BSP)。

▼文章寫好準備發表時,這邊文章的標題全部都是中文字【旗山的哥德式天主教堂與武德殿】,所以Blogger應該無法辨識,而會給予一般通用的【blog-post_??.html】網頁檔名。
Blogger_filename01s

▼文章發表後,查看其網頁檔名果然為 【findlifevalue.blogspot/2010/05/blog-post_09.html】的通用格式。
blogger_filename02s

▼使用原來的文章,重新發表一次,但是把標題加上英文關鍵字【Chi-san church旗山的哥德式天主教堂與武德殿】。
Blogger_filename03

▼文章發表後,再查看其網頁檔名,果然變成 【findlifevalue.blogspot/2010/05/chi-san-church.html】有意義的名稱。
blogger_filename04s 

▼確認網頁名稱正確後,馬上將原本標題前面的英文字移除,然後再發表一次,這次發表的內容及標題將會覆蓋過去原來的。
Blogger_filename05s 

▼再查看一次網頁,可以發現網頁檔名維持有意義的【findlifevalue.blogspot/2010/05/chi-san-church.html】,而文章標題也改成我們所要的內容了。
blogger_filename06s


2010年5月7日 星期五

Blogger小工具提供【最新回響/回覆/回應】功能

https://blogger-script-study.blogspot.com/2010/05/blogger-widget-recent-comments.html?m=0

Blogger 有新的【最新迴響】 可以使用囉!可以提供最多25個迴響,還可以設定顯示的迴響字數長度,算是還不錯用啦,不過還不是很完美就是了。

1. 進入 Blogger 的後台,點選【版面配置】→【網頁元素】→【新增小工具】。
Blogger_Recent_comments01

2.在【小工具搜尋框】的地方輸入【Recent Comments】,然後按下【Enter】鍵。
Blogger_Recent_comments02

3. 搜尋結果應該只有一個【Blogger Recent Comments】,按下這個圖示,或其後面的【+】符號。
Blogger_Recent_comments03

4. 出現【設定小工具】視窗,如果一切都沒問題,就按下【儲存】按鈕,建議字數改為100就可以了,200有點太長了。
Blogger_Recent_comments04

5. 這就是使用這個【Recent Comments】小工具所提供,功能比之前利用【資訊提供網址】來達到最新迴響還要強,【資訊提供網址】提供最多五個迴響,就我的測試,這個方法則可最多25個迴響,雖然沒有說明。
Blogger_Recent_comments05

6. 這個是使用原來【資訊提供網址】所作出來的最新迴響,你喜歡哪一個?
Blogger_Recent_comments06


回到 Blogger 部落格技巧總整理