原本以為Blogger的建立及使用會是傻瓜級的, 但我錯了, 開始使用 Blogger 就遇到了許多問題,一時也搞不定,浪費了許多時間, 其中有許多的 trap & trick,
特別是在 網頁 (使用blogger) 及 相 簿 (使用flicker) 的建置管理使用.
Blogger :
1. layout. (本文區的寬度設定, 目錄區的寬度等..)
1.1. "繼續閱讀"(read more..).功能 (大綱功能:在主頁中有多篇文章, 每一篇文章只會顯示出前面幾行, 要點選"繼續閱讀"才會顯示出全篇文章)
網路相簿 : 網路相簿要能提供外連功能, (可提供連結碼給blog使用, 並可設定相片的顯示尺寸.)
不懂的話可問Google: blogger 教學 - Google 搜尋
＜blogger 頁面設定:＞
1. 網頁風格 (layout)
先不用自已去研究 layout 的 html (xml)要怎麼用, 在網路上有許多xml範本可供下載套用, 就可以改變 (設定) a varity of 網頁風格.
將想要頁面的.xml 下載回來, 在 blogger 的 版面配置 的 修改HTML 將所選的範本 (.xml) 上傳即可.
Blogger Templates- BTemplates 免費下載模板。
1.1. [ 繼續閱讀 ] or 縮文 功能
原本主頁上的文章會整篇顯示而使得主頁過長, 因此要加入讓文章收合的「繼續閱讀」功能使主頁簡潔,
, 可 google (繼續閱讀) , 原來大家都有需要, 初時不知關鍵字還真不容易找此功能..
目前是用這個版本, 繼 續閱讀懶人加強版- [BLOGGER] 版本 v2.2.1(2009.5.8)
＜flicker 相簿管理及外連:＞
1.如何放上相片, 管理相片及叫出相片.
sol: 在網頁中使用相簿中的相片,需放上要存取相片所需相對應的code, 同時並控制所產生相片的大小,code可到每一張相片處可找到(eg. picasa& flickr), 但這是個笨方法,如有100張相片那要開100張相片再copy 100次, flickr可用工具Friendly.Flickr.批次處理, 至於古狗的picasa目前還不知道.. ~~~~~~
1. (blogger) 調整網頁版面的寬度, (太窄時大圖無法顯示且網頁篇幅會被壓窄拉長)
eg. 對應於使用 blogger 所內建的範本.
sol: 到 [範本] -> 修改HTML (註: BSP 也提供了許多精美的template 供套用,但仍需調整 )
在 /* Page Structure */ 段落,
#content {
/* width:740px; */
width:1163px; } //網頁全寬.
#main {
width:908px; //內文寬.
另外如有用底圖的話也要因應寬度重劃. (如頭尾有圓角等變化..)
sol: 在網頁中使用相簿中的相片,需放上要存取相片所需相對應的code, 同時並控制所產生相片的大小,code可到每一張相片處可找到(eg. picasa& flickr), 但這是個笨方法,如有100張相片那要開100張相片再copy 100次, flickr可用工具Friendly.Flickr.批次處理, 至於古狗的picasa目前還不知道.. ~~~~~~
1. (blogger) 調整網頁版面的寬度, (太窄時大圖無法顯示且網頁篇幅會被壓窄拉長)
eg. 對應於使用 blogger 所內建的範本.
sol: 到 [範本] -> 修改HTML (註: BSP 也提供了許多精美的template 供套用,但仍需調整 )
在 /* Page Structure */ 段落,
#content {
/* width:740px; */
width:1163px; } //網頁全寬.
#main {
width:908px; //內文寬.
另外如有用底圖的話也要因應寬度重劃. (如頭尾有圓角等變化..)
2.(blogger) 插入table後, table前會空出許多行, (是外部編輯器之故, code中的換行會被blogger解讀而產生錯誤)
在 local editor (DW,nvu) 寫好時, source code 的 tag 會以一行一行列出(換行碼), 以利辨識,
但貼入 blogger後, 每一行的換行卻會被解釋而產生許多空行,
手工解決: 在 blogger 中手工處理, 將table中所有換行刪除, 使成為一行, (笨方法, 不建議, but it's the only way so far)
在 local editor (DW,nvu) 寫好時, source code 的 tag 會以一行一行列出(換行碼), 以利辨識,
但貼入 blogger後, 每一行的換行卻會被解釋而產生許多空行,
手工解決: 在 blogger 中手工處理, 將table中所有換行刪除, 使成為一行, (笨方法, 不建議, but it's the only way so far)
3.無法貼入程式碼，會被解為亂碼．(solution : 使用轉碼網站：HTML Encoder)
4.無法用角括號．．等特殊符號，會被解為tag. (my solution : 改用全形)
問題列表list:
How to backup my own blog.
(繼續閱讀的 code, 轉檔網站轉完放入後造成本文無法收起來, )
版面配置 -> 網頁元素 -> 選 新增小工具 (pop window) -> 選 HTML/JavaScript
===========================================================
===========================================================
標題用:
##EasyReadMore## 或任意??
內容 :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>##EasyReadMore## 或任意??
內容 :
<script src="http://cjh829-easy-read-more.googlecode.com/files/cjh829-easy-read-more-2.2.1.js" type="text/javascript"></script>
<script>
EasyReadMoreSettings.Enabled = true;
EasyReadMoreSettings.Read_More_Mode = 'mix';
EasyReadMoreSettings.Mode_Auto_MaxLine = 3;
EasyReadMoreSettings.Mode_Custom_Tag_Type = 'text';
EasyReadMoreSettings.Mode_Custom_Tag_Expr = '##ReadMore##';
EasyReadMoreSettings.Link_Style = 'directlink';
EasyReadMoreSettings.Link_Text = '...繼續閱讀';
EasyReadMoreSettings.Link_Text_title = '繼續閱讀';
EasyReadMoreSettings.Collapse_Link_Text = '顯示摘要...';
EasyReadMoreSettings.Collapse_Link_Text_title = '顯示摘要';
EasyReadMoreSettings.Collapse_MoveToEnd = false;
EasyReadMoreSettings.Collapse_ScrollBack_Target = 'title';
EasyReadMoreSettings.Collapse_Effect = 'none';
EasyReadMoreSettings.Collapse_Effect_Speed = 'normal';
EasyReadMoreSettings.Index_Page_Style = 'abstract';
EasyReadMoreSettings.Tag_Page_Style = 'title';
EasyReadMoreSettings.Archive_Page_Style = 'title';
EasyReadMoreSettings.Controller_Enabled = true;
EasyReadMoreSettings.Controller_Default_Position = true;
EasyReadMoreSettings.Controller_Splitter = ' | ';
EasyReadMoreSettings.Controller_Full_Text = '完整';
EasyReadMoreSettings.Controller_Abstract_Text = '摘要';
EasyReadMoreSettings.Controller_Title_Text = '標題';
EasyReadMoreSettings.ShowFullPost_Tag = '##ShowAll##';
</script>
<script>EasyReadMore.main()</script>
Blogger 無法一次放上多張相片( Picasa Web Album )的問題, Google終於提出解決方案了, 連上此網址 http://draft.blogger.com/home?pli=1, Blogger的測試區, 點選 "插入圖片".
此時會pop up 新增圖片視窗(如下圖), 點選 "來自 Picasa 網路相簿" , 選上所有要放的相片後, 點選 "加入所選相片", 就醬, 搞定. ~~好用~~.
