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