2010年6月5日 星期六

為部落格文章加上色彩繽紛的重點底線

https://blogger-script-study.blogspot.com/2010/06/put-underline-on-your-blog.html
瀏覽別人的部落格時,有時會看到有些部落格主會在某些文字底下劃上色彩繽紛的畫筆底線,讓人知道格主想要強調的重點在這裡,可是我的部落格怎麼沒有這些特效,到底這是怎麼做到的呢?

其實這一點都不難,只要你擁有下面幾項技能,那你也可以擁有這些特效,但也不是那麼容易啦,下面我們就來介紹一下如何擁有這些「色彩繽紛的重點底線」。

1) 取得底線的圖檔,也可以自己畫。
要 gif 格式喔,而且要設定底色為透明。這裡先提供一個粉紅色底線的圖檔,有需要的可以在這個圖示上面pink1_underline按滑鼠右鍵另存圖檔,也希望你可以自己畫出你自己的底線。

2010年5月30日 星期日

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

https://blogger-script-study.blogspot.com/2010/05/blogger-templates-setting.html

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

現在起使用 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

介紹一個專門給 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 部落格技巧總整理