四月06

[部落] NewsGator RSS聯播

2009年 04月06日 , 03:36

日前一位格友天仙發表了一篇「【網路】輕鬆訂閱輕鬆逛格」一文,讓野兔重拾RSS聯播的想法,
於是將版面稍做調整並加入RSS聯播
本篇就利用NewsGator來製做本部落的RSS聯播閱讀器,野兔會將平時逛的BLOG加進來,這樣就不怕lost掉許多好文囉!
另外文章內圖片也加上highslide特效,所以只要點選小圖並不會換頁或跳頁,而可以直接放大

相信大家對RSS並不陌生,如果有不明白處可以請出google大神查閱一下RSS的功用

首先要使用NewsGator就需要註冊一個帳號,並建立起欲聯播的清單
教學文可以參考重灌狂人的「如何用NewsGator製作部落格(RSS)聯播?

因為建立好之後掛上BLGO並不美觀,所以野兔這邊就分享美化NewsGator的文
NewsGator的自訂性相當的高,可以隨自己的所好來自訂顯示出來的畫面,這也是野兔選用NewsGator的原因

接著要找到RSS聯播的原始檔,來做編輯
步驟一:依序按下〔Settings〕→【Edit Locations】,然後在「Headlines」按一下。(如下左圖,可點選放大)
步驟二:如下右圖(可點選放大)
    藍框就是要放在BLOG欄位上顯示聯播用的JS語法
    綠框要記得打勾才能夠聯播
    紅框裡的程式碼就是待會要講的版面配置
    黃框則是要顯示聯播的數量


 

現在來改上右圖紅框裡的程式碼
可以按自己的需求來變更RSS聯播的版面,參數如下

聯播版面中的各項參數:
$link$ :文章網址
$title$:文章標題
$description$ :文章簡述
$datetime$ :發文時間
$feedname$ :網站名稱
$author$ :網站作者

我的HTML碼為
<div class="RSS_CSS02" onMouseOver="this.style.backgroundColor='#333';" onMouseOut="this.style.backgroundColor='#111';">
<a class="RSS_CSS" href='$link$' target="_blank" style="display: block; text-decoration:none;
margin: 0px 5px;">$title$</a>
<font class="RSS_CSS_time">$datetime$</font><p class="RSS_CSS_name">[$feedname$]</p></div>

解釋一下上面的HTML碼
框底色碼變換的語法為
onMouseOver="this.style.backgroundColor='#333';"
onMouseOut="this.style.backgroundColor='#111';"

這一段,onMouseOver是滑移過去框底後的顏色,而onMouseOut就是滑鼠離開後的框底顏色
可自行修改上述顏色

接著回到BLOG的側邊欄位,新增一個要顯示RSS聯播的欄位,內容如下
<style type="text/css">
/*RSS聯播*/
div.RSS_CSS01 {height: 500px; width: 192px; overflow-y: auto; text-align: left;
border: 1px solid #C0C0C0; padding: 5px 0px 0px 0px;}
div.RSS_CSS02 {padding: 8px 0px 2px 0px; margin: 2px 0px 2px 0px;
background-color: #111;}
a.RSS_CSS:link { color: #eee; text-decoration:none; background: none;}
a.RSS_CSS:visited { color: #eee; text-decoration:none; background: none;}
a.RSS_CSS:active { color: #eee; background: none;}
a.RSS_CSS:hover { color: #fff;text-decoration: none;background : #555;}
font.RSS_CSS_time {font-size: 8px;}
p.RSS_CSS_name {font-size: 12px; color: #FF9933;}
</style>
<div class="RSS_CSS01" >
這裡放上面所提到的「藍框」顯示聯播用的JS語法
</div>

<style type="text/css"> … </style> 這一段是CSS控制碼
div.RSS_CSS01 :顯示RSS聯播的外框長寬及框線顏色
div.RSS_CSS02
:單一聯播的顯示控制,這邊的background-color要配合上面onMouseOut滑鼠離開後的框底顏色,色碼要一樣,要不然會很怪

下面是超連結呈現的相關控制
a.RSS_CSS:link
a.RSS_CSS:visited
a.RSS_CSS:active
a.RSS_CSS:hover

font.RSS_CSS_time :時間的呈現控制
p.RSS_CSS_name   :BLOG標題的呈現控制

範例

上述的方法可以都可以自行修改成適合自己的BLOG風格

 



利用E-mail訂閱野兔最新的文章
輸入你的電子郵件地址: 發送者為 FeedBurner
本篇文章引用網址:

引用列表 (0)

留下迴響

放心, 您留下的電子郵件不會被公開或散佈。


野兔村 支援 Gravatar 大頭貼,您可於「Gravatar官方網站」免費取得專屬大頭貼。


使用Facebook來留言
blank

无觅相关文章插件,快速提升流量