結合FeedBurner訂閱人數的Rss訂閱圖示

設計一個專屬自己的RSS圖示，將FeedBurner的訂閱人數與RSS圖示相結合，讓你的版面更漂亮，並將訂閱圖示放在醒目的地方，大型訂閱圖示也是增加RSS訂閱人數的小秘訣歐。

最近我另一個網站---東京封印在改版，研究了許多templates模板，最後是利用官方的模板來改，才不會又發生很多Bug無法解決，看到許多進階級的模板有很多CSS格式上的好東西可供利用，就自己修改一下，未來會慢慢分享，如何在套用官方單調的模板下，創造自己所需的版面。


這是東京封印的訂閱圖示，寬度320px

其實這個圖形製作很簡單，就是利用一個長條圖，將FeedBurner Count訂閱人數的圖案放在這個圖型之中而已，調整它的最佳位置，就能顯示如我部落格上的圖案。

我以0與1謎詭世界訂閱圖示來說明，寬度250px，高度74px，

首先你要設計一款類似以下的圖形，寬度要配合你的Sidebar邊欄的寬度，譬如我的邊欄是270px，我就設計一個250px寬度的圖片，如下，


這個元件製作適用於你有申請FeedBurner的服務(現在已稱為AdSense for Feeds)，利用Feed Count的語法來製作。
首先在你的CSS定義區(就是放在]]></b:skin>之前，因為有些人不懂什麼是css定義區，可參考概說這篇)，
#subscribebox {
width: 250px;
height: 74px;
margin: 5px 0 0 5px;
background: transparent url(圖片網址) no-repeat;
}
#subscribebox a {
display:block;
width: 250px;
height: 74px;
}
#subscribebox img {
margin-left:15px;
margin-top:25px;
}

這上面的#subscribebox與#subscribebox a 就是設定RSS背景圖的寬度與高度，而
#subscribebox img {
margin-left:15px;
margin-top:25px;
}
就是Feed count的圖形定義位置，你可以自行慢慢調整。

然後在網頁元素→新增小工具，新增"Html/JavaScrip" ，放進這個元件即可。

裡面的資料要用你自己的相關Feed，不要照抄歐。
<div id="subscribebox">
<a href="你的訂閱網址" title="訂閱......最新文章"><img width="88" style="border:0" alt="...的RSS" src="http://feeds2.feedburner.com/~fc/XXXXX?bg=99CCFF&fg=666666&anim=0" height="26"/></a></div>
這是一般FeedBurner訂閱人數的語法為
<p><a href="http://feeds2.feedburner.com/lun01"><img src="http://feeds2.feedburner.com/~fc/lun01?bg=99CCFF&fg=666666&anim=0" height="26" width="88" style="border:0" alt="" /></a></p>
我們只是將這個語法用subscribebox的格式來定義，將裡面的<p>及</p>以<div id="subscribebox">和</div>取代包覆起來，即可展示你想呈現的樣子。

這樣就有專屬你自己的Rss訂閱圖示了，有興趣的朋友也可以自己製作一個，很有意思呢。