不思議惑星 Magical Star Blogger

不思議惑星搬家

noreply@blogger.com (芯瑀小棧) — Tue, 11 May 2010 06:12:00 +0000

不思議惑星
將搬家至芯瑀小棧
http://lifemirror.pixnet.net
請大家移往芯瑀小棧喔

感謝

網頁語法 html 基礎認識(圖文版)

noreply@blogger.com (芯瑀小棧) — Mon, 23 Mar 2009 01:01:00 +0000

《認識html》
html就是超文件標籤語言(HyperText Markup Language，簡稱為HTML), 是由各種不同的標籤tags所構成, 不同的標籤代表不同的展現方式, 如段落文字、超連結、圖案等, 當瀏覽器(IE or Firefox)解讀標籤tags後, 依標籤的類型展現至瀏覽者面前, 另外需要注意的是, 絕大部分的部落格本身已經具有Doctype、head、body的完成標籤, 故部落格作者不必重複使用Doctype、head、body標籤

《Html的組成》

Html文件的架構圖(點小圖看大圖)

由上圖可知, Html文件的架構可分三個部分,
1.綠色 Doctype宣告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　 Doctype(document type:文檔類型), 說明編寫網頁的HTML(Xhtml)標籤用的版本, Doctype宣告必須放在每一個網頁文件的頂部, 也就是所有的標籤Tags代碼之上

2.藍色 Html元素起始與結束標籤

<html>
　<head>
　　<title>Html文件的語言結構</title>
　</head>
　<body>
　　　略~網頁內容
　</body>
</html>

3.紅色 Head元素起始與結束標籤(網頁表頭)

　<head>
　　<title>Html文件的語言結構</title>
　</head>

　　Head元素又稱網頁表頭, 此範為是加入網頁相關訊息, 例如搜尋關鍵字或是網頁標題title, 使用title設定的網頁標題, 可在瀏覽器視窗標題列出現標題內容

4.黃色 Body元素起始與結束標籤(網頁內容)

　<body>
　　　略~網頁內容
　</body>

　　Body網頁內容是放置網頁的主體內容, 如段落文字、圖片、表格、超連結、框架...等

《標籤的開始與結束Container Tags》
　　<title>Html文件的語言結構</title>
多數的標籤Tags是屬為圍堵標記Container Tags, 即成對的標籤, 差異處只有結束標記多個斜線/
如以上範例, 紅色是開始標籤, 藍色是結束標籤
　注：br、img...等元素標籤不必設結束標籤

《標籤的架構》以超連結元素 a 為例

Html的架構：元素 a 為例(點小圖看大圖)

　元素(element)：
　　如上例使用a元素標籤, 代表起始標籤至結束標籤之間成一個超連結

　屬性(attribute)：
　　屬性只能加在起始標籤中, 如a元素起始標籤加上框架識別名稱target,即可指定目標框架；網址屬性href, 可指定開啟的網址

　屬性值(attribute value)：
　　當加入屬性後, 需要註明屬性值, 如target的屬性值有_self(目前框架)、 _blank(新視窗)、 _top(頂層框架)、 _parent(父框架) ；如href的屬性值即為網址

《範例說明》
1.以超連結URL為例
　Html Code：　<a target="_blank" href="http://tw.myblog.yahoo.com/rusptin/">[宗教] 永宏易理工作室</a><br/>
　Html Code 說明：　<a target="目標框架" href="網址">網站名稱</a><br/>
　瀏覽器顯示效果：

　[宗教] 永宏易理工作室

2.超連結URL、編排br、靠左對齊left、項目符號li為例
　未編排過的超連結：

[宗教] 永宏易理工作室 [芯瑀小棧] 祈福中國結(賣場)[看板] 台大 Ptt BBS [掃毒] Virus Total [論壇] FDZone-Forum

　Html Code：


<div align="left">
<ul>
<li><a target="_blank" href="http://tw.myblog.yahoo.com/rusptin/">[宗教] 永宏易理工作室</a><br></li>
  <li><a target="_blank" href="http://mybid.ruten.com.tw/user/lifemirror/">[芯瑀小棧] 祈福中國結(賣場)</a><br></li>
  <li><a target="_blank" href="http://gurucat.spaces.live.com/">[優格] 貓草天空</a><br></li>
  <li><a target="_blank" href="telnet://ptt.cc/">[看板] Ptt BBS</a><br></li>
  <li><a target="_blank" href="http://www.virustotal.com/zh-tw/">[掃毒] Virus Total</a><br></li>
  <li><a target="_blank" href="http://forum.tw.fdzone.org/?fromuser=lifemirror">[論壇] FDZone-Forum</a></li>
</ul>
</div>

　Html Code 說明：　

<div align="對齊方式">
<ul>
　　 <li><a target="目前框架" href="網址">網址名稱</a></li>
</ul>
</div>

　瀏覽器顯示效果：

[宗教] 永宏易理工作室

[芯瑀小棧] 祈福中國結(賣場)

[優格] 貓草天空

[看板] Ptt BBS

[掃毒] Virus Total

[論壇] FDZone-Forum

3.以文字段落P、置中center為例
　沒有使用文字段落的文章：

　水調歌頭明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓。人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。

　Html Code：　

　<p align="center">水調歌頭</p>
<p align="center">明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。<br>轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓。人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。</p>

　瀏覽器顯示效果：

水調歌頭
明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。
轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓。人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。

創用CC宣告

您必須保留原作姓名標示
您不得為商業使用本著作
您不得改變或改作本著作

網摘引用連結不轉載

Yahoo Blog 的側邊欄位加寬法 (圖文版)

noreply@blogger.com (芯瑀小棧) — Mon, 16 Mar 2009 16:19:00 +0000

Yahoo Blog 的側邊欄位加寬法
因為Yahoo Blog原側邊欄的寬度為150px,
對於某些較寬的外掛程式, 會顯得過窄, 造成"爆表"的現象,
因此笨貓將窄欄加寬至200px, 可更加靈活應用各種用法....

以下的六個步驟,是如何開Yahoo Blog的CSS樣式表來修改的方法
《步驟一》請按左上角的"管理部落格"

《步驟二》按左邊的"面板設定"

《步驟三》按上方的"自訂樣式", 這裡就是CSS樣式表

《步驟四》這時將拉Bar拉至最底端, 以方便貼上程式碼

《步驟五》像紅色方框的位置, 貼上程式碼後, 按"確定"

《步驟六》右邊的欄寬變更為200px,所以Xuite就放得下了

《三欄式》左右欄寬皆200px 程式碼

.thrcol .yc3main {width:100%;float:left;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-right:210px;}
.thrcol .yc3subbd {width:200px;float:left;position:absolute;right:0px;}
.thrcol .yc3sec {width:200px;float:right;position:absolute;left:0px;}

《三欄式》左右欄寬皆200px 顯示效果

《三欄式》左欄寬150px 右欄寬200px 程式碼

.thrcol .yc3main {width:100%;float:left;}
.thrcol .yc3mainbd {margin-left:160px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-right:210px;}
.thrcol .yc3subbd {width:200px;float:left;position:absolute;right:0px;}
.thrcol .yc3sec {width:150px;float:right;position:absolute;left:0px;}

《三欄式》左欄寬150px 右欄寬200px 顯示效果

《三欄式》左欄寬200px 右欄寬150px 程式碼

.thrcol .yc3main {width:100%;float:left;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;}
.thrcol .yc3pribd {margin-left:0px;}
.thrcol .yc3subbd {width:150px;float:right;position:absolute;right:0px;}
.thrcol .yc3sec {width:200px;float:left;position:absolute;left:0px;}

《三欄式》左欄寬200px 右欄寬150px 顯示效果

《兩欄式》右欄寬200px 語法

.twocolga .yc3main {width:100%;float:left;height:100%;}
.twocolga .yc3mainbd {margin-right:50px;}
.twocolga .yc3pri {width:100%;}
.twocolga .yc3subbd {width:200px;position:absolute;right:0px;}
.twocolga .yc3sec {display:none;}

《兩欄式》右欄寬200px 顯示效果

《兩欄式》左欄寬200px 語法

.twocoldr .yc3main {width:94%;float:right;}
.twocoldr .yc3mainbd {margin-left:0px;}
.twocoldr .yc3pri {width:100%;}
.twocoldr .yc3subbd {width:200px;float:left;}
.twocoldr .yc3sec {display:none;}

《兩欄式》-左欄寬200px 顯示效果

創用CC宣告

您必須保留原作姓名標示
您不得為商業使用本著作
您不得改變或改作本著作

網摘引用連結不轉載

笨貓自製的Blogger教學影片開放下載

noreply@blogger.com (芯瑀小棧) — Sat, 14 Mar 2009 17:02:00 +0000

笨貓將自製的Blogger教學影片公開下載嚕！！

《Blogger教學影片下載》保留著作權, 可分享, 但不得作為營利使用
　2-1 Google與Blogger註冊流程教學影片
　3-1 Blogger建立文章教學影片
　3-2 blogger文章標籤編輯應用教學影片
　3-3 Blogger基本常見設定教學影片
　3-4 Blogger範本操作教學影片

最好用的版本-Flash Mp3 Player 播放器懶人版教學

noreply@blogger.com (芯瑀小棧) — Fri, 13 Mar 2009 07:38:00 +0000

網路上的Flash Mp3 Player百百種, 但笨貓覺得好用的不多, 不是太花俏, 就是程式太大, 造成網頁載入效率變差, 要不就操作複雜, 只有這一款, 小巧玲瓏, 簡單大方....
笨貓把這九款Flash Mp3 Plyer面版和必要的程式與說明檔, 一起打包好, 點擊Flash Mp3 Plyer就可以下載嚕
看下圖便知(點小圖看大圖), 很清爽吧 =^^=

想要擁有這一款Flash Mp3 Plyer, 有必要條件,
1.可供上傳的網路空間, 並且支援音樂檔和SWF檔
2.Blog 或網頁需支援本款的程式碼(已知Yahoo Blog不支援)

《使用步驟》
１.編輯mp3player.xml檔, 打開後會看到以下的程式碼code, 修改完畢後儲存

<player showDisplay="yes" showPlaylist="yes" autoStart="no">
<song path="輸入音樂檔網址" title="輸入音樂檔名稱" />
</player>

　　參數說明：
　　　showDisplay(控制列)
　　　　showDisplay="yes" 顯示控制列
　　　　showDisplay="no"不顯示控制列
　　　showPlaylist(曲目清單)
　　　　showPlaylist="yes"顯示曲目清單
　　　　showPlaylist="no"不顯示曲目清單
　　　autoStart(自動播放)
　　　　autoStart="yes"自動依序播放
　　　　autoStart="random"自動隨機播放
　　　　autoStart="no"不自動播放

２.將swf檔和mp3player.xml上傳至網路空間, 務必為同一個資料夾
３.取得swf檔和mp3player.xml的網址, 貼到下列其中一款的code....
　並將編輯好的code,貼到您網誌or網頁裡

　162寬x150高 -(前6款專用)

<div align="center"><embed width="162" src="您的swf檔網址" flashvars="您的mp3player.xml檔的網址"
wmode="transparent" height="150"></embed></div>

　162寬x200高 -(後3款專用)

<div align="center"><embed width="162" src="您的swf檔網址" flashvars="您的mp3player.xml檔的網址"
wmode="transparent" height="200"></embed></div>

《參考文章》
　《免費資源》免費網路空間存放推薦
　讓你看得懂Blogger Templates XML的工具軟體Notepad++
　多款Flash MP3 Player 面板 Skin
　[教學]MP3 Flash player 面板Skin 的修改編輯

Xuite 音樂盒讓您Blog更豐富(Yahoo Blog也適用)

noreply@blogger.com (芯瑀小棧) — Fri, 13 Mar 2009 01:09:00 +0000

《學習重點》
《重點一》要會開"檢視原始檔"
《重點二》找出Xuite的ID

《教學步驟》(點小圖看大圖)
1.先將Xuite音樂盒的迷你播放器程式碼複製好, 貼在記事本備用,
　以便將紅色ID部分, 更換成您所需的音樂ID
<embed src="http://vlog.xuite.net/vlog/swf/lite.swf?media=MTc1Njk4Mg&ar=1&as=1" width="145" height="50"></embed>
2.現在開始找ID
　(1)到Xuite影音, 找您喜歡的音樂(請注意版權問題)
　(2)在右方的Embed框裡, 將程式碼複製到另開的筆記本裡
　　

　(3)複製框選中的程式碼, 因為每個音樂檔的編碼不同, 所以紫色部分會不一樣....
　　

　(4)在瀏覽器(IE or Firefox)的網址列中貼上, 按Enter, 就會出現播放器
　　

　(5)找出播放器的原始碼
　　

　(6)複製這個音樂檔的ID後, 到有迷你播放器程式碼的筆記本中,
　　複蓋紅色的ID, 即完成
　　

Yahoo Blog的網友, 新增自訂欄位的部分, 可以看此篇文章Yahoo Blog 自定欄位

Yahoo Blog 限制語法公告

noreply@blogger.com (芯瑀小棧) — Fri, 13 Mar 2009 00:08:00 +0000

　　因為Yahoo部落格逐步實施越來越嚴的限制語法，早期原本可以使用的標籤如embed、iframe、Object..等，以及檔案類型，現在都不能使用了，需使用限定(指定)的來源，才可增加想用的外掛，詳情請見部落格小子的公告。

這件公告有二點是部落客必需注意的：
1、在公告實施之前，已經在現有的自訂欄位與文章使用的語法，不受這次程式調整的影響，但是網友進入編輯修改，則會直接套用新的規則而導致語法失敗。
笨貓提示：注意粗黑體字。

2、自公告日起，部落格自訂欄位與文章中使用的語法，將僅限於連結下列網站的內容video.google.com、www.youtube.com、img.photobucket.com、myvlog.im.tv、mymedia.yam.com、vlog.xuite.net、images.video.msn.com、www.tudou.com、yahoo.com、yimg.com、flickr.com、wretch.cc除以上網站外，其餘網站的連結將一律無法使用。
笨貓提示：也就是說將來會新增or減少開放的網站。

~~笨貓OS：Yahoo的蜘蛛是出了名的排外，部落格也是出了名的封閉社群~~

《參考連結》
　Yahoo-部落格小子-語法限制公告

Yahoo部落格的基本功-自定欄位

noreply@blogger.com (芯瑀小棧) — Thu, 12 Mar 2009 16:17:00 +0000

Yahoo部落格的基本功-自定欄位

不會使用自定欄位, 就像沒有交通工具一樣, 很多好玩的外掛都不知如何使用,
比如說音樂播放器, 小寵物, 甚至是加入Blog賺錢廣告.....
Yahoo部落格最大的特色是簡單, 功能限制多, 但是好上手,
所以要新增自定欄位很簡單滴,
只要以下步驟就可以完成嚕~^^~ 啾咪~ (點小圖可以看大圖呦)

＊登入部落格後, 會在右上方出現以下的"管理部落格"按鈕, 點下去就對了 m^^m

＊這時會出現部落格管理後台的畫面, 於左下方點選"管理自訂欄位"

＊在自訂欄位的命名方框, 輸入您的命名, 如：寵物肥貓
　大框框就是放程式碼or文字的地方, 在此處貼上預先複製好的程式碼
　貼好後就按"儲存"

＊儲存後, 新增好的欄位會出現在下方,
　若以後要編輯修改程式碼, 請按您命名好的標題
　若是要修改名稱, 就按"編輯"
　想刪除它, 就按刪除吧！
　這時要進入調整欄位的動作了, 請按左邊的"版型設定"

＊選取要移動的欄位後, 按上下的箭頭可調整高低順序,
　若是按左右可讓欄位隱藏or顯示,
　若是三欄的版型, 則可移動至左方or右方, 按"儲存"就大功告成！

＊這是Yahoo告訴您資料已儲存的畫面

在文章裡設置留言板

noreply@blogger.com (芯瑀小棧) — Tue, 10 Mar 2009 09:17:00 +0000

《方法教學》
housing網友問到如何將留言版置入部落格裡, 這方法看似難, 說穿了其實很簡單,
文字教學只要四個步驟
1.建立一篇做為留言版的文章
2.內文部分貼上留言板的程式碼即可
3.關掉此篇文章的回應權限, 與上一頁連結按不允許
4.發佈文章後, 複製文章網址就大功告成

Blogger教學影片重新上傳嚕！！

noreply@blogger.com (芯瑀小棧) — Mon, 09 Mar 2009 05:54:00 +0000

因為網路空間租約到期~
而且又沒有時間經營~
所以曾關閉Blogger一陣子~
現在重新開啟嚕~
影片載至新空間~

近將開放下載^^

3-4 Blogger範本操作教學影片

noreply@blogger.com (芯瑀小棧) — Sat, 17 Nov 2007 02:14:00 +0000

第三章第四篇 Blogger範本操作教學影片

本篇教學影片操作與示範重點如下
1.上方Menu快速切換選單；Demo按鈕快速看實際範例
2.Blogger Bar 導覽列變更
3.Blogger 標頭 Hand 變更
4.Blog文章元件變更
5.SideBar 側邊欄之新增/刪除/編輯
6.字型與顏色的修改
7.Blogger Template 範本之備份/套用(二種方法)
8.官方Blogger Template 套用

＊下一期教學影片 Blogger Template 範本結構認識＊
＊若對本教學影片有疑問, 或發現Bug, 請留言反應＊
＊更歡迎Blogger前輩提出建言＊

《Blogger範本操作教學影片》
本檔案容量較大, 請耐心等候下載

Blogger達人養成教學　　作者：lifemirror(笨貓) 　禁止複製轉貼；引用可

您的鼓勵，是創作的動力！m^^m
by 累到暴的笨貓

3-3 Blogger基本常見設定教學影片

noreply@blogger.com (芯瑀小棧) — Sun, 04 Nov 2007 12:11:00 +0000

第三章第三篇 Blogger基本常見設定教學影片

本篇教學影片操作與示範重點如下
1.上方Menu快速切換選單；Demo按鈕快速看實際範例
2.Blogger說明欄基本應用(插入連結與圖片)
3.開啟文章編輯器wysiwyg
4.文章範本的基本應用
5.Blogger Back Link 反向連結操作實例(Track Back引用)
6.使RSS導向至Feed Burner圖例
7.利用E-mail發佈新文章(草稿)
8.Blog作者共筆設定
9.訪客權限設定
10.留言基本應用設定

＊下一期教學影片 Blogger Template 範本基本應用＊
＊若對本教學影片有疑問, 或發現Bug, 請留言反應＊
＊更歡迎Blogger前輩提出建言＊

您的鼓勵，是創作的動力！m^^m
by 累到暴的笨貓

《Blogger基本常見設定教學影片》

Blogger達人養成教學　　作者：lifemirror(笨貓) 　禁止複製轉貼；引用可

《課後筆記：引用通告、轉貼複製文與盗文的差別(2007/11/18增加)》
引用：
　即對此文章或其中文句有您想寫感想或評論, 因此引用他方的文章往往使用此文章的網址與其中文句, 並在引用文句書寫您自己的文章

引用通告：
　此系統可通告作者, 他的文章被引用, 而通告方式為引用方的文章超連結

轉貼複製文：
　即對此文章全部複製, 並加上原作者的姓名與連結, 再貼到自己的Blog裡。除非作者允許(授權), 否則此方式可能會引起作者不快

盗文：
　不通知原作者, 也不在轉貼複製文章加上原作者的姓名與連結, 就張貼到自己的Blog裡。此方式已經構成侵權, 原作者有權提出告訴。

引用通告的好處：
1. 因為會在原作者文章裡留下您評論的超連結, 可增加您Blog的曝光率
2. 有您自己獨有的文章, 增加您文章的專業度

轉貼複製文與盜文的壞處：
1. 一個Blog充滿大量的複製文, 會令人感到您沒有自己的主見與專業度
2.盜文一但被原作者發現, 可能會在您的Blog或其它Blog、論壇, 告知網友您盜用文章, 甚至提出法律訴訟
3.搜尋引擎, 如Yahoo, Google發現您的複製文與盜文, 會降低您文章URL的排名
4.Google Adsense 或其它廣告商經發現您有盜文, 或是大量轉貼文, 可終止您的合約

3-2 blogger文章標籤編輯應用教學影片

noreply@blogger.com (芯瑀小棧) — Wed, 31 Oct 2007 18:04:00 +0000

第三章 Blogger基本功能

第二篇文章標籤Label編輯應用教學影片

本篇教學影片示範重點如下
1.快速簡介Blogger文章編輯介面簡介(內嵌於互動說明)
2.標籤Label的應用(新增刪除套用)

《第二篇文章標籤編輯教學影片》

Blogger達人養成教學　　作者：lifemirror(笨貓) 　禁止複製轉貼；引用可

讓你看得懂Blogger Templates XML的工具軟體Notepad++

noreply@blogger.com (芯瑀小棧) — Tue, 30 Oct 2007 02:33:00 +0000

阿倫校長宣示子日：「工欲善其事，必先利其器。」
　　想要在一堆密麻麻的原始碼裡，看得懂Blogger Templates XML到底在說什麼，才知道你要怎麼修改範本(樣版)，首先就得要有個不傷眼的工具，就是Notepad++，它麻雀雖小、五臟俱全，有語法高亮度顯示、語法摺疊、搜尋代碼輸出代號、而且是多國語言軟體。

《想多了解Notepad++按此》　《下載Notepad++按此》

摘錄Notepad++官方簡敘：

語法高亮度顯示及語法摺疊功能
列印所見即所得(WYSIWYG)
用戶可自定程式語言
字詞自動完成功能(Auto-completion)
支援同時編輯多重文件
支援多重視窗同步編輯
支援Regular Expression搜尋及取代
完全支援拖曳功能
內部視窗位置可任意移動
自動偵測開啟檔案狀態
放大與縮小功能
支援多國語言
書籤
高亮度括號及縮排輔助
巨集

《軟體載圖》
語法高亮度顯示及語法摺疊功能

高亮度括號及縮排輔助

《參考文章》
　你也可以看懂Blogger的樣版原始碼

Blogger達人養成教學(持續增加)

noreply@blogger.com (芯瑀小棧) — Sun, 28 Oct 2007 10:22:00 +0000

　　為推廣自由與開放Blogger，笨貓製作了一系列教學影片，內容簡單上手，直接Show操作，並且有說明，不管男女老少，不懂Html、CSS都能簡單無痛學習Blogger，一起來加入Blogger 的一員吧！

《Blogger達人養成教學總目錄》

第一章基礎認識Blogger

你不能不知大有來頭的Blogger

第二章 Google與Blogger註冊流程教學影片

想要使用Blogger，卻不會註冊，沒關係，這兒有教學影片教你

第三章 Blogger基本功能
　第一篇建立新文章教學影片

Blogger的新文章建立方法不熟？這兒有實際演練的範例教學影片

　第二篇文章標籤Label編輯應用教學影片

快速套用與刪除標籤

　第三篇 Blogger基本設定教學影片

將所有常見設定全包括在影片裡(引用實際操作、FeedBurner RSS、Blog共筆、瀏覽權限、訪客留言設定...等

　第四篇 Blogger範本操作教學影片

這裡告訴您什麼是展開小裝置範本, 如何備份與套用範本

3-1 Blogger建立文章教學影片

noreply@blogger.com (芯瑀小棧) — Sun, 28 Oct 2007 07:27:00 +0000

Blogger達人養成教學　　作者：lifemirror(笨貓) 　禁止複製轉貼；引用可

第三章 Blogger基本功能

第一篇 Blogger建立文章教學影片

本篇教學示範重點如下
1.快速簡介Blogger主三大項目(內嵌於互動說明)
2.快速簡介Blogger三項文章管理(內嵌於互動說明)
4.快速簡介Blogger建立文章介面(內嵌於互動說明)
5.示範張貼新文章與基本編排方法
　包括：撰寫(文章編輯器)使用方法、文章原始碼(Html)基本修改、標籤用法、張貼選項。
6.新增互動說明功能
　使用方法：以滑鼠游標指向教學影片中的Blogger連結，即可顯示說明。

《第一篇 Blogger建立文章教學影片教學影片》

筆記重點：
1.標籤(Label)不要下太多, 會拖慢網頁載入速度
2.一個以上的標籤(Label), 以逗號+空格為間隔
3.HTML語法：
　(1)Html大多數需有起始元素與結束元素, 凡結束時, 在元素名稱前加上斜線/符號
　　例如藍為起始; 綠/括號為結束：
　　<元素名稱> </元素名稱>
　(2)標題階層元素 h1~h6：數字越大, 字型越小
　　例如藍色為h5起始; 紅色為文字; 綠色為結束h5
　　<h5>這裡是文字</h5>
　(3)超連結元素 a
　　<a href='網址'></a>
　(4)target屬性標籤：指定超連結開啟位置, 需用於超連結元素內
　　target='_blank'(新視窗)
　　target='_self'(目前框架)
　　target='_parent(父框架)
　　target='_top'(最頂層框架)
　　例如紅a超連結元素後加入綠target屬性標籤; 藍_blank則為指定開啟框架：
　　<a target='_blank' href='http://mymagicalstar.blogspot.com/'></a>

2-0 Google與Blogger註冊流程教學影片

noreply@blogger.com (芯瑀小棧) — Fri, 26 Oct 2007 12:33:00 +0000

Blogger達人養成教學　　作者：lifemirror(笨貓) 　禁止複製轉貼；引用可

第二章 Google與Blogger註冊流程教學影片

　　目前Blogger有中文介面，所以註冊方便很多，只要按動畫說明圖示，三個步驟即可迅速完成註冊。但本篇包括註冊Google流程，以便申請AdSense廣告服務。

(一)Google註冊流程教學影片

Google註冊點此https://www.google.com/accounts/ManageAccount
註冊步驟簡述
1.點右下角”建立一個帳戶”
2.輸入E-mail
3.輸入自定密碼
4.輸入驗證碼
5.按我接受
6.到註冊的E-mail信箱收驗證信
7.點擊驗證信的連結
8.註冊成功！

(二)Blogger註冊流程教學影片

Blogger註冊點此http://www.blogger.com/
註冊步驟簡述
1.以註冊Google的Email帳號登入
2.輸入暱稱(中英皆可)
3.輸入此Blog的標題
4.決定此Blog的副網域
　一般以英文暱稱或英文標題為主，決定後不輕易更改，否則會造成舊網址失效。
5.選擇喜歡的範本Blogger Templates (Skin)

1-0 基礎認識Blogger

noreply@blogger.com (芯瑀小棧) — Mon, 22 Oct 2007 10:39:00 +0000

Blogger達人養成教學　　作者：lifemirror(笨貓) 　禁止複製轉貼；引用可

前言：

　　筆者在使用多家Blog平台後，決定落腳此處，令筆者愛上這個地方的因素，乃是於Blogger有著非常高的道德素養，而且主公司搜尋引擎巨頭Google在全球有舉足輕重的地位，這也是筆者考量之一。為了讓國內大眾一窺Blogger殿堂，筆者決定寫這一系列的教學，讓每個人能夠快速上手Blogger。##ReadMore##

第一章、基礎認識Blogger

(一) Blogger的簡介

　　1999年8月由Pyra Labs公司創建Blogger.com，它是第一個經由網際網路管道書寫網誌的平台，是全世界最大、個人網誌最知名的廠商。並對日後Blog有重大貢獻。
　　2003年Google公司併購Pyra Labs，包括Blogger.com網站，成為Google旗下一項服務內容。
　　2006年8月Google推出Blogger beta新版本，增加了三大功能：

1. 支援多項頁面元素(見圖一)

2. 文章標籤Labels

此功能類似文章分類，但更接近於關鍵字，故一篇文章可使用一個以上的標籤。

3. 所見即所得後台編輯器(見圖二)

如HTML、JavaScript、GoogleAdsense(廣告)、甚至可增加多種其它元素Widget。
詳情請見wiki維基百科:Blogger

(二) Blogger與國內Blog最大的差異點

1. 悠久

　　從1999年至今2007年已有8年的歷史，而被Google併購後，仍然保有其優質特色，而且並沒有因此換了Mark、網址。尤其是網址部分，試問如國內蕃薯天事件，更換網址後，對眾多的部落作者造成的損失是無可估計的。

2. 尊重

　　Google大神與Blogger擁有非常大的包容政策，如GoogleAdsense廣告是Blogger與Google的收入來源之一，而且是雙贏機制，官方與使用者都可以從GoogleAdSense增加收入，但你有拒絕放廣告的權力。不只這些，你可以拿掉Blogger的符號、最上方的Bar、將網址指向你的FTP、甚至將網址的圖示自定義，讓你的Blogger完全沒有Blogger.com的影子。Blogger不會阻止你，也不會限制你的功能！

3. 自由

　　有高度的尊重，必然有高度的自由，非常民主的Blogger，可以讓你完全自由發揮你的創意，舉個例子：你可以定義側邊欄sidebar在首頁顯示，文章內頁不顯示。

(三) Blogger的特色與服務

　　Blogger本身提供的功能不多，但它可以隨你無限擴充你要的功能，並且完美整合Goggle所有的服務，這個對用慣國內Blog平台的人，會有不習慣的情況，但只要用上了，必然會愛上它。(見圖三)

圖一：支援多項頁面元素如Html、JavaScript、YouTube影片...等

圖二：所見即所得後台編輯器

圖三：Blogger的服務項目列表清單

Blogger Templates XML 修改教學：神鬼奇航3

noreply@blogger.com (芯瑀小棧) — Mon, 15 Oct 2007 04:15:00 +0000

今天我在Yahoo! 知識+ 看到一位使用非官方Blogger Templates出問題, 在套用非官方Blogger Template XML後, 竟然出現一大塊黑色區域, 笨貓查看XML後, 將欲改善的步驟列於下表 ##ReadMore##
《一、問題》

原圖：正常的樣子

問題圖：黑色的部分是連結失效的影片

《二、原因》
　　因為原Blogger Templates At World's End, Pirates of the Caribbean 3 template神鬼奇航3：世界的盡頭有加上電影預告, 在下映後, 原網址影片連結失效了, 所以Blogger頁面會出現一片黑

《三、解決方法教學步驟》

　1.找出影片的程式碼：
　　a.Blogger後台中選擇範本>修改HTML>打開右上角的"展開小裝置範本"
　　b.找出以下的程式碼, 並將紅色部分刪除

<div id='header-wrapper'>
<embed FlashVars='videoUrl=http://progressive.totaleclips.com.edgesuite.net/100/b10000_b3e.flv&amp;thumbnailUrl=http://aycu27.webshots.com/image/16466/2005631985858120883_rs.jpg&amp;playerMode=mini&amp;hl=en;' allowscriptaccess='sameDomain' src='http://video.google.com/googleplayer.swf' style='width:760px;height:304px;' type='application/x-shockwave-flash'/>
</div>

刪除影片的結果

　2.調整版面：

　　a.移動header-wrapper：
　　因為原影片Moive程式碼置於Blogger的header-wrapper部分, 故刪除程式碼後, 整個content-wrapper(main-wrapper和sidebar-wrapper)都往上移, 並且擋住神鬼奇航3：世界的盡頭標題, 所以接下來要把header-wrapper往下移
找出以下的程式碼, 並將紅色部分改成175px

#header-wrapper {
margin:15px 0 0;
padding: 0;
text-align: center;
}

header-wrapper往下移的結果

　b.移動header Blogger 標題：
　　原樣版將Blogger標題置於sidebar-wrapper側邊欄, 所以我們把Blogger標題改移至最上方
　　一樣找出以下的程式碼, 並剪下紅色部分

<div id='sidebar-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='你的部落格標題 (標頭)' type='Header'/>
</b:section>

　　將剪下紅色程式碼貼於藍色部分的下方, 完成如下的Html：

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='你的部落格標題 (標頭)' type='Header'/>
  </b:section>
</div>

修改完成了！

　補充說明：
　　Blogger的好處是一個帳號可以申請一堆Blog, 所以除了主要Blog外, 建議申請一個測試用的Blog, 這樣就隨你修改Blogger Templates XML樣版, 玩壞了也沒關係, 復原就好了＠＠

Blog + web2.0 小東西大全輯(持續增加!)

noreply@blogger.com (芯瑀小棧) — Sat, 06 Oct 2007 22:33:00 +0000

初次使用Blogger，會發現沒有提供我們以為必備的東西，所以我將這些實用又好用的小玩意，列個清單給自己和Blogger的初心者使用，當然我發現有新玩意，會加到這清單裡。

《Blogger實用工具系列》
　Snap Shots連結預覽工具
　Spotplex熱門文章列表(中英)

《Flash系列》 2007/10/19 新增
　Flash時鐘大全-超可愛小狗狗系列
　Flash時鐘大全-超可愛小貓貓系列
　Flash時鐘大全-超炫小時鍾系列1

《人氣統計系列》
　部落格觀查(中) 各式各樣的人氣統計工具
　Histats.com(英) 功能強大綜合型統計(20071102)推薦
　My uStats(英) 統計你的訪客來自哪兒?
　whos.amung.us(英) 圖示型線上人數顯示(20071102)
　Free Online Users(英) 文字型線上人數顯示
　SiteMeter(英) 線上人數顯示

《即時小留言版系列》
　shoutmix即時留言版(英)
　cBox即時留言版(簡繁) 新增自定義小圖示功能
　PlanetMiniBox即時留言版含有小圖示功能

《Blog聯播站》
　中時部落格(中)
　啪啦罐頭(中) 2007/10/28新增推薦！
　全民部落國(中)

《Blog RSS 訂閱工具》 2007/10/23新增！
　Blog Live(中) 好玩又好用的RSS互動訂閱工具
　Rmail(英文) 實用的RSS Email訂閱文章工具
　Feed Burner(英中) 最多人使用的RSS訂閱平台(推薦)2007/10/25新增！

《社群交談工具》
　Twitter(英)
　Meebome(英)四大即時通工具
　Twitter美化工具(英/日)
　Buboo巴布(繁)
　飯否(簡)
　嘰歪(簡)

《凡走過必留下iCon》
　MyBlogLog(英)
　MyIcon(繁)

《笨貓心情》一間掛有國父"天下為公"匾額的店

noreply@blogger.com (芯瑀小棧) — Sat, 06 Oct 2007 13:25:00 +0000

笨貓近日精神萎靡，想補充一下自已，因此在小港區一路找尋滿意的中藥行，不滿意之下還千里迢迢到三鳳中街，結果是買了個花茶回來。
　　唉！花茶畢竟是我的最愛啊！
　　回程時，想到很久沒有到二苓路上看了，那裡應有中藥老店。進入二苓路沒多久，就是一間毫不起眼的中藥店。不起興趣之下過而不停，繞完了整條二苓路，就是沒一間滿意的。心想別太挑剔了，就再騎回那家看起來有些破爛的中藥行。
　　踏進門後，一幅斗大標題映入眼簾，令我驚訝不已。
　　那幅匾額正是國父孫中山提字的《天下為公》，左下角還有孫文二字。
　　而我面不改色，詢問一些提神的藥方，而眼光不時偷瞄那幅匾額。
　　打好藥包要離開時，我看著《天下為公》跟老板娘說：
　　「現在很少有這樣的店家了。」
　　一直都很熱心開朗的老板娘笑說：「是啊！上門的客人都說這是不是真的啊？」
　　喔喔，老板娘你誤會我了，我不是這個意思。
　　我笑著說：「是不是真的，並不重要，重要的是那四個字。」
　　這時，老板娘正經起來了，有感而發道：「我們的國父所說的天下為公，實在是很難，但也很重要。」
　　我眼眶微溼著說：「真的很少有這樣的店家了。別的不擺，擺這《天下為公》，還有孫文提字呢。」
　　這個店家所掛的匾額，是否真的為國父所寫的真跡，根本不重要，那只是表象。真正重要的是，國父所提的《天下為公》的精神。世局混亂，令世人遺忘己久的《天下為公》，在我的心裡也佈滿灰塵，但今再次明亮。

　　出處：西漢•戴聖《禮記•禮運》《禮運大同篇》
　　「大道之行也，天下為公，選賢與能，講信修睦，故人不獨親其親，不獨子其子，使老有所終，壯有所用，幼有所長，鰥寡孤獨廢疾者皆有所養；男有分，女有歸，貨惡其棄於地也不必藏於己，力惡其不出於身也不必為己，是故謀閉而不興，盜竊亂賊而不作，故外戶而不閉，是謂大同。」

Blogger教學大全輯 2009/03/17更新！(持續增加)

noreply@blogger.com (芯瑀小棧) — Thu, 04 Oct 2007 11:21:00 +0000

使用Blogger到今天(2007/10/04)約二個星期，看過Blogger官方使用說明文，但文字語法卻令人不甚瞭解，感覺像是另一種火星文，令我懷疑是不是Google偷懶，直接使用英翻中，再稍微修改就上架了。我也只好在網路上四處翻找如何使用Blogger的教學，其中值得重視與參考的教學文章如下：

《Blogger達人養成教學總目錄》笨貓專文系列
為推廣自由與開放Blogger，笨貓製作了一系列教學影片，內容簡單上手，直接Show操作，並且有說明，不管男女老少，不懂Html、CSS都能簡單無痛學習Blogger，一起來加入Blogger 的一員吧！
《基礎篇》
　1-1 基礎認識Blogger 你不能不知大有來頭的Blogger
　2-1 Google與Blogger註冊流程教學影片
　3-1 建立新文章教學影片
　　　Blogger的新文章建立方法不熟？這兒有實際演練的範例教學影片
　3-2 文章標籤Label編輯應用教學影片快速套用與刪除標籤
　3-3 Blogger基本設定教學影片
　　　所有常見設定操作、FeedBurner RSS、Blog共筆、瀏覽權限、訪客留言設定...等
　3-4 Blogger範本操作教學影片
　　　這裡告訴您什麼是展開小裝置範本, 如何備份與套用範本, 以及新增網頁元素
《Blogger教學影片下載》
　　　釋放笨貓目前已經製作的教學影片,勿做為營利用途, 按此進入下載頁

《如何看懂Blogger Template的XML檔》
　Template 的基本內容和結構
　[圖文] 寫給新加入Blogger的人
　你也可以看懂Blogger的樣版原始碼
　範本架構圖片
　圖片解剖Blogger beta模板代碼彩色詳盡版！推薦(10/9更新)
　有關 Blogger in Beta 白老鼠的測試
　官方說明

《Blogger Template XML 修改實際操作範例》20071025新增！
　XML 修改教學：移除範本內嵌的影片神鬼奇航3

《如何引用-兩種方法》
　在Beta使用HaloScan Trackback 使用第三方外掛
　Blogger引用文章(trackback)/反向連結功能 Blogger官方功能
　[教學] 顯示反向連結(BackLink)的數量… Blogger官方功能程式碼修改

《如何新增Blogger側邊欄分欄 Widget》 2007/10/22新增！
　在標題列下加入功能選單(menu bar)
　改造雙欄blogger的版面為三欄式

《如何使用繼續閱讀》2009/03/10更新！
　繼續閱讀懶人加強版

《快速安裝外掛》2009/03/10更新！
　超級無腦安裝Blogger外掛功能
　　外掛包中含有：
　　1. 隱藏Blogger NavBar（預設浮動隱藏）
　　2. 隱藏widget（預設隱藏）
　　3. 表情符號（符號集為Yahoo）
　　4. 繼續閱讀功能
　　5. Sidebar側邊網頁元素（折收/展功）功能
　　6. 作者的回應高亮度顯示
　　7. 標籤雲Label Cloud功能
　　8. Sidebar側邊網頁元素Icon圖示功能
　　9. 社群書籤功能（預設七組）

《如何列出所有文章清單》
　展開/隱藏所有文章的小工具

《如何使用文章分類》
　 [資訊]Blogger分類文章(利用Furl)
　 [資訊]Blogger分類文章(暴力法)

《新增Blogger文章分頁功能》
　讓Blogger有文章分頁功能

《新增你的相關文章功能》
　加入相關文章功能 (Related Post)

《設定元件的開關條件》
　讓側邊列 (Sidebar) 的元件只在首頁顯示/不顯示

《備份你的Blogger》
　Blogger.com 使用者如何備份網站內容

《多媒體播放器應用》
　多媒體播放語法教學教你如何插入影音檔 2009/03/11更新！
　Flash Mp3 Player 播放器懶人版教學最好用的版本！！2009/03/17新增
　Xuite音樂盒讓您Blog更豐富Yahoo Blog也適用！不用煩惱上傳空間！2009/03/17新增

《豐富你的Blogger之技巧》
　使Blog具有多國語言線上網頁翻譯的語法讓外國人也能看得懂你的Blogger
　如何在網頁文章裡嵌入網頁-iframe浮動框架的語法
　如何在文章裡顯示程式碼的語法 2009/03/17更新！

《在網址列加入專屬的圖示》
　在網址列加入具有跑馬燈效果的專屬圖示 2007/11/18新增

《在文章裡置入留言版》
　具有留言版置入版面的效果, 符合Blog的完整性 2009/03/17新增

《Blogger優質教學》
　 Abin's Tech Note
　KeuviN's KrazyLog
　Fun New Run High
　羊男實驗の咖啡館＊ [ METAMUSE ] via Blogger
　bitter of bitter
　堯@部落格

彈性與自由是Blogger最大的優勢也是最大的劣勢

noreply@blogger.com (芯瑀小棧) — Thu, 04 Oct 2007 06:06:00 +0000

雖然Blogger有樣板提供(Blogger Template)，以及一些基本功能，在這些簡單的架構平台底下，給使用者最大的發揮空間。但是如果想要更方便使用Blogger，與擁有自己個人風格的面版(Skin)，就得要學著如何修改XML程式碼與擴充外掛(Plugin)，因此對於CSS、XHTML不熟悉的使用者來說，卻是最大的門檻。

　　很不幸的，我就是屬於基礎級數的，等級停留在四年前使用FontPage寫網頁的時代。但是這等級在樂多(Rodoo)與城邦(UDN)在制式化的使用者(user)介面下修改程式碼，新增自己想要的功能與外掛，從未有如此困難與痛苦的感受。

　　彈性與自由是Blogger最大的優勢，也是最大的劣勢。

　　在入門門檻較高的情況下，使許多使用者退卻，因此在國內Blog市場內，尚未占有一席之地。但是也因此使目前國內Blogger的文章顯得珍貴，而且多數文章素質高，較少灌水文與轉貼文。

一種走火入魔的玩法-變型三欄三層Sidebar

noreply@blogger.com (芯瑀小棧) — Wed, 03 Oct 2007 11:57:00 +0000

繼《Blogger建置日誌》玩上癮的Sidebar千變萬化超自由分欄成功將原型Blogger 三欄式樣版( 3 Columns Template Layout ) EVO 進化版增加左邊欄，成為另一種變型三欄，而笨貓秉持著Blogger的自由分欄(Sidebar)精粹，玩到走火入魔，再接再厲推出本版的變型三欄三層。
　　此變型三欄三層的特色如下：
　　1. 保留Head與Footer不變，僅更動Main層
　　2. 第一層劃分大三欄，左右各包二欄(一大一小)
　　3. 第二層劃分為一欄，可以擺放大橫幅(Banner)
　　4. 第二層劃分為三欄，可以擺放其它的插件(Plugin)
　　當然這些欄位可以選擇使用，不過加入太多的Sidebar除了會拖慢載入網頁的速度外，版面也會變得凌亂，所以可以視情況彈性使用這些欄位，應用時非常自由。
　　還是不懂什麼是三欄三層？用文字說不清楚，直接用看的最快

三欄三層後台編輯圖示(點小圖看大圖)

3 Columns Template Layout原樣版後台編輯圖示(點小圖看大圖)

玩上癮的Sidebar千變萬化超自由分欄

noreply@blogger.com (芯瑀小棧) — Tue, 02 Oct 2007 21:05:00 +0000

前陣子拜讀Fun New Run High:改造雙欄blogger的版面為三欄式讓我學會了怎樣改寫樣版(Blogger Template)，千變萬化的Blogger, 讓我玩上癮了，熱血指數直颷，達到廢寢忘食的地步！因為像是Yahoo、無名(Wretch)、樂多(Roodo)、城邦(UDN)都沒有那麼有彈性，局限太多，所以熱愛上Blogger了~

　　不過邊欄(Sidebar)加太多，會造成網頁載入(Download)變慢，所以使用時要注意，別狂加不必要的功能！

　　下圖是我另一個專門測試Blogger功能的Blogger臨時測試站，所用的Blogger樣版(Blogger Template)，所截的後台編輯圖，嘗試增加左邊欄(Sidebar)的成果

點我看大圖

不思議惑星 Magical Star Blogger

不思議惑星 搬家

網頁語法 html 基礎認識(圖文版)

Yahoo Blog 的側邊欄位加寬法 (圖文版)

笨貓自製的Blogger教學影片開放下載

笨貓將自製的Blogger教學影片公開下載嚕！！

最好用的版本-Flash Mp3 Player 播放器 懶人版教學

Xuite 音樂盒讓您Blog更豐富(Yahoo Blog也適用)

Yahoo Blog 限制語法公告

Yahoo部落格的基本功-自定欄位

Yahoo部落格的基本功-自定欄位

在文章裡設置留言板

Blogger教學影片重新上傳嚕！！

3-4 Blogger範本操作 教學影片

第三章 第四篇 Blogger範本操作 教學影片

3-3 Blogger基本常見設定 教學影片

第三章 第三篇 Blogger基本常見設定 教學影片

3-2 blogger文章標籤編輯應用 教學影片

第三章 Blogger基本功能

第二篇 文章標籤Label編輯應用 教學影片

讓你看得懂Blogger Templates XML的工具軟體Notepad++

Blogger達人養成教學(持續增加)

《Blogger達人養成教學 總目錄》

3-1 Blogger建立文章 教學影片

第三章 Blogger基本功能

第一篇 Blogger建立文章教學影片

2-0 Google與Blogger註冊流程教學影片

第二章 Google與Blogger註冊流程教學影片

(一)Google註冊流程教學影片

(二)Blogger註冊流程教學影片

1-0 基礎認識Blogger

前言：

第一章、 基礎認識Blogger

(一) Blogger的簡介

1. 支援多項頁面元素(見圖一)

2. 文章標籤Labels

3. 所見即所得後台編輯器(見圖二)

(二) Blogger與國內Blog最大的差異點

1. 悠久

2. 尊重

3. 自由

(三) Blogger的特色與服務

Blogger Templates XML 修改教學：神鬼奇航3

Blog + web2.0 小東西大全輯(持續增加!)

《笨貓心情》一間掛有國父"天下為公"匾額的店

Blogger教學大全輯 2009/03/17更新！(持續增加)

彈性與自由是Blogger最大的優勢 也是最大的劣勢

一種走火入魔的玩法-變型三欄三層Sidebar

玩上癮的Sidebar千變萬化超自由分欄

不思議惑星搬家

最好用的版本-Flash Mp3 Player 播放器懶人版教學

3-4 Blogger範本操作教學影片

第三章第四篇 Blogger範本操作教學影片

3-3 Blogger基本常見設定教學影片

第三章第三篇 Blogger基本常見設定教學影片

3-2 blogger文章標籤編輯應用教學影片

第二篇文章標籤Label編輯應用教學影片

《Blogger達人養成教學總目錄》

3-1 Blogger建立文章教學影片

第一章、基礎認識Blogger

彈性與自由是Blogger最大的優勢也是最大的劣勢