close
FeedBurner是一個統整RSS訂閱的一個網站，之前被Google收購的新聞也經由廣大的網路傳到我的耳中，加上有中文化的計畫（有放出BETA版本過，不過因為中文翻譯的太奇怪，現在已經撤下可視連結），讓本來就想申請看看的我，幾天前申請了一個帳號，來使用這個只要提到RSS訂閱就會讓人第一聯想到的服務網站。
聲明，這是一篇超級淺的實例教學文，css強者就不用點進來看了。
申請流程我不特別解釋，Google一下就有一堆詳盡說明，不過我申請時有一部份是參考馬修的研究室的「申請FeedBurner的E-mail訂閱RSS功能」這篇教學文 LINK HERE，有需要的話可以參考看看。
左邊區塊新增了一個我老早就想弄的FeedBurner訂閱連結，具有管理RSS訂閱功能，部落格主要功能的建製終於告一段落了，但是眼尖的人一定會發現email訂閱小工具跟原本widget不太一樣吧，沒錯，我把他小小中文化了一下，但是送出訂閱的彈出視窗還是英文的就是，這個就得等人家中文化出來，但是以只要輸入圖片驗證碼來說，我想，那裡用看圖說話也猜的出來。
這個方法適用於所有的英文版的部落格小工具，每次看到網站產生讓自己能夠貼在自訂欄位的程式碼，只貼上去就不理會它了嗎。其實，可以改動的地方多著呢。
以email訂閱為例，原本產生的code:
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=0000000', 'popupwindow', 'scrollbars=yes,width=550,height=520');
return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=0000000" name="url"/><input type="hidden" value="The entry of the fancy world" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" _fcksavedurl=""http://www.feedburner.com"" _fcksavedurl=""http://www.feedburner.com"" _fcksavedurl=""http://www.feedburner.com"" _fcksavedurl=""http://www.feedburner.com"" _fcksavedurl=""http://www.feedburner.com"" target="_blank">FeedBurner</a></p></form>
「喔，天呀，這是啥東西！」不懂的人會直接PASS過這一大段文數字組合而成的語法吧。但對照下圖，你可以找到這些以紅色特別標示出來的關鍵字。
當然拿到一段程式最好先作分段的動作，這樣會比較好閱讀，<>夾住的文字可以視為一段，但有時候還是會太長超出版面，可以在屬性與屬性（EX. name="loc"和 value="en_US"）之間作分段，當然你也可以不照規則隨便分，對語法執行完全沒有影響。
這四個以紅色標示出來的地方，可以依你的喜好填入相應的翻譯文字，就像下圖。
除了Delivered by FeedBurner文字部分沒有更動外，這兩個圖片比較起來，好像還是有點不一樣對吧，因為本身版面的關係，我個人不希望Delivered by FeedBurner分成兩行顯示，所以把Delivered by放在FeedBurner的前面讓它的超連結指定在這句子，而不是只指定在FeedBurner上。以下是經過分段和文字改動過後的語法。
<form style="border:1px solid #ccc;padding:3px;text-align:center;"
action="http://www.feedburner.com/fb/a/emailverify"
method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=0000000',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>輸入email訂閱此部落格:</p><p>
<input type="text" style="width:150px" name="email"/></p>
<input type="hidden" value="http://feeds.feedburner.com/~e?ffid=0000000" name="url"/>
<input type="hidden" value="The entry of the fancy world" name="title"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="送出" /><p>
<a href="http://www.feedburner.com" target="_blank">Delivered by FeedBurner</a></p></form>
如果想要直接套用這個更動過的語法也OK，但要記得以綠色標示的地方要代入自己FeedBurner的ID，重點是要有註冊過FeedBurner，並照著馬修的研究室的「申請FeedBurner的E-mail訂閱RSS功能」啟用，這個email訂閱工具才會有效。
FeedBurner的ID哪裡找？登入進入主頁面，選擇自己的部落格或網站後，查看自己的網址列，這就是你這個rss訂閱的ID，如下圖。
當然不止以上相關外觀語法可以改動，以下面這句來說
<form style="border:1px solid #ccc;padding:3px;text-align:center;"
第一、框線可以改粗，數字越大越粗。
第二、框線樣式不喜歡，solid dashed double dotted groove ridge inset outset任君挑選，可以從css語法教學網站參考border的屬性表展示LINK HERE，可是有些樣式要框線粗一點才看的出來。
第三、框線顏色不喜歡，可以查16進位的RGB色碼表，不僅限三碼的表示方法，六碼的顯示方法也可以。（這個請自行Google一下吧，我都是直接打開photoimpact直接試我自己要的顏色，所以對這種網站不太熟悉）
第四、物件擺放位置都是center（置中），在這例子裡都可以改成right（靠右）或left（靠左）
其實不止可以改動這些外觀，可以利用background加入背景、底色之類的，css語法能做的事很多，這個只是皮毛而已，何況程式就是這樣抄來抄去的，只要學會語法、屬性的運用，改起來並不是難事。學寫程式也就是這麼一回事，拿實例來修改，見識過了語法運用，就可以變成自己的邏輯，加以活用，就是你自己的實力所在啦。
這些外觀語法改變的測試都是以pixnet為平台，沒有在其他的BSP測試過，但我想除了無名的語法限制以外，都可以執行。
[後記]
啊，有coding過果然改起來就很容易，邏輯都大同小異，而且我在改語法的同時，又申請了一個MyBlogLog，用起來很像Google Analytics，而且有提供Recently Reader的部落格工具，接觸久一點再來寫寫心得。
其實FeedBurner也有分析網站的功能，使用看看，哪天再來一篇Google Analytics（不是收購FeedBurner了嗎，這樣算是自家網站互k吧）、Blog Look（部落格觀察）、MyBlogLog交叉比較的使用心得。
我12點左右剛看時都還沒有人訂閱RSS，我這篇文章快寫完的時候，已經有三個人訂閱了，這是友情票嗎XD。
唉呀，教學文果然難寫，字句都要斟酌，真累。
全站熱搜
留言列表
