2009年3月11日 星期三

結合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訂閱圖示了,有興趣的朋友也可以自己製作一個,很有意思呢。

7 則留言:

  1. 很實用,可惜我邊欄的東西太多了,導致載入速度都有點慢了

    回覆刪除
  2. 你的邊欄算正常了,我瀏覽不覺得慢。

    回覆刪除
  3. 也許是我這邊網路的原因吧,每次側邊欄都要慢2秒左右載入。

    從你這裡學到了很多東西,謝謝!

    回覆刪除
  4. 感謝喔!看樹狗剛照做了一個~ ^o^

    回覆刪除
  5. 不錯歐,很有你的Style,可愛又獨特。

    回覆刪除
  6. 我想在我目前使用的RSS圖案旁擺一個subscribe的box. 就一各框框而且旁邊寫subscribe..也是像你的教法做嗎

    回覆刪除
  7. 你的意思是圖和文字提醒部分分開嗎?我是直接在圖上寫好當作背景圖的.

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能