v 結合FeedBurner訂閱人數的Rss訂閱圖示 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...