FUN 攝影 Kerwin 的野兔部落

日前一位格友天仙發表了一篇「【網路】輕鬆訂閱輕鬆逛格」一文，讓野兔重拾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風格