2010年9月3日 星期五

擁抱Blogspot的新範本板型

https://blogger-script-study.blogspot.com/2010/09/new-blogspot-template.html

Blogspot推出新的網頁範本已經有一段時間了,可是我一直遲遲不願意轉換,原因是我原先已經弄好的一些網頁設計會隨著範本的轉換而不見,比如說水平導覽列的自設網址功能,轉版有得重新學習新的範本規則…等問題;可是新的範本又有很多我想要的新功能,如「繼續閱讀…」、更多的板型範例、新增了三欄式範本、還有側邊欄單欄加兩欄的範本、書籤分享按鈕,更有選單式的的版面文字、顏色配置功能…。

舊板型

新板型

Blogspot_old_template02s Blogspot_new_template02s

 

後來,總算找到可以使用「網頁清單」來解決水平導覽列的自訂網址的方法,另外也找到了「數字分頁」的語法,而且也美化了版面,現在唯二美中不足的是

  • 側邊欄標題的文字太小了而且沒有反白,可是我只要一改就會連文章日期的文字也跟著改變,看來還需要作一些細部的修改啊!
  • FunP及HemiDemi的推文人數不見了,還得再看看如何加回來。

另外,我還希望水平導覽選單可以有「下拉式清單」的功能,得多作點功課了!

下邊就來介紹Blogspot新板型的功能吧!

1. 有更多的範本可以選擇,這些範本會有不同的顏色與圖案設定,選擇後都可以再設定文章的背景為透明,讓底圖完全透上來,不過我個人較不喜歡這樣,因為有時候底圖會妨礙到文章的閱讀。

  • 「簡單」:純粹只用顏色當桌面背景。
  • 「圖片視窗」:使用圖片當桌面背景。
  • 「頂尖企業」:使用花紋當桌面背景
  • 「浮水印」:與「頂尖企業」類似,但花紋比較亮,感覺比較活潑。
  • 「輕柔雅緻」:與「頂尖企業」類似,但花紋叫柔和,感覺比較溫馨。
  • 「旅遊」:與「圖片視窗」類似,但底圖可以透上來。

Blogspot_new_template03

2. 其實範本選好了之後都還有很多的背景圖片可以選擇,比以前來實在豐富太多了, 而且還可以選擇不同的色系。
Blogspot_new_template04
Blogspot_new_template09

3. 版面配置更是多元,自己看圖吧,有些板型我也不會描述,單欄、右邊單側欄、三欄、側邊單欄+雙欄、…等。
Blogspot_new_template05

4. 尾頁的配置也可以分成單欄、雙欄、三欄。
Blogspot_new_template06

5. 還可以讓你設定整體網誌版面的寬度,可惜只能設定pixet(像素),不能設定百分比,也就是不能作到隨螢幕解析度自動縮放的功能,而且最大只能設定到1000像素,邊欄也可以設定像素,如果有左右邊欄的話也可以分別設定。
Blogspot_new_template07

6. 進階功能可以讓你設定板型大部分文字的大小、顏色及背景色,而且設定好馬上就可以再下面的視窗看到所做的改變,滿意了再按【套用至網誌】,實在很符合人性;可惜項目分得還不是很細,有些項目可能得手動更改板型。
Blogspot_new_template08


延伸閱讀:
為部落格文章加上色彩繽紛的重點底線
試用Blogger提供的新模板範本修改工具
用Blogger的「網頁」清單建立「導覽列」

8 則留言:

Unknown 提到...

請問~~
面板寬度~~是不是除了他原本設定的寬度外
無法在改成100%這種方式?
沒有任何方法可以在這下面更改嗎!?
謝謝

工作熊 提到...

新版的Blogspot板形如果只是進入其範本,是無法更改為100%,你必須要更改其HTML才可以。但板型破壞的風險也就相對提高了。建議你先試看看能不能讀懂其HTML語法再來修改吧!

龍哥(Max Huang) 提到...

請問blogger的 我的網誌清單 裡的自動帶出的網誌連結資料的字體怎麼放大,謝謝~

龍哥(Max Huang) 提到...

我研究出來了,並錄了教學影片,請看~
【教學】【影片】Blogger教學 在Blogger的每篇文章下方加入「您或許對這些文章有興趣」功能(LinkWithin)
http://28web888.blogspot.com/2012/02/blogger-bloggerlinkwithin.html

Unknown 提到...

您好,我看到一個網頁,想請教您,如何能做到透過它的左右二欄的圖,連接到文章。這樣好方便網友,可以直接點擊他們所要看的活動內容。網頁如下:http://kjn-project.blogspot.com/。謝謝~

工作熊 提到...

Yu-chi;
這個應該是Blogger的版型,你可以試看看可否在「範本」中找到類似的版型。

龍哥(Max Huang) 提到...

To Yu-chi,
要像那版型可去範本找,就有三欄的!
至於點連結會跑文章內容,這應該是自己用 新增小工具 的 html ,自己寫簡單的語法,因他還有用圖片,如沒用圖片,新增小工具也有其他工具可用!
不知這樣的回答你是否了解!

Unknown 提到...

Dear All ~

ic...謝謝您們的回答。我了解到,這個網站是自己寫了簡單的語法,再透過「新增小工具」做出來的。那自已不會寫語法,那就再想想其它方式囉!感謝各位大大的回答。thanks~