[135] When hellotxt meets Twitter (Buboo) = 網站跑馬燈 and more...

感謝偶像Yukie Chen的這兩篇文章

Meme -- 教學與反省: 噗浪 (Plurk) 的終極密技：請參考使用hellotxt.com的介紹

Meme -- 教學與反省: 利用 Twitter 更新網站頭條新聞：請參考Twitter跑馬燈的程式碼

Yukie Chen 的原始碼如下

<div style="border: medium double rgb(191, 223, 254); overflow: hidden; height: 100px; width: 100%;" class="side" id="twitter_div">
　<marquee direction="up" scrollamount="1">
　　<ul id="twitter_update_list"></ul>
　　<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
　　<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/YukieChen.json?callback=twitterCallback2&count=5"></script>
　</marquee>
</div>

簡要說明：

medium 可改成您想要展示的「跑馬燈」邊線粗細「thin」「medium」「thick」

double 可改成您想要展示的「跑馬燈」邊線樣式「dotted」「dashed」「solid」「double」「groove」 「hidden」

rgb(191, 223, 254) 可改成您想要展示的「跑馬燈」邊線顏色 rgb(128, 128, 128)

height: 100px 請改成您想要展示「跑馬燈」的高度

YukieChen 請改成您自己的Twitter帳號

count=5 請改成您想要「跑馬燈」跑幾則Twitter裡的訊息

 

本網站所使用修改過的程式碼

<div style="border: hidden dotted rgb(128, 128, 128); overflow: hidden; height: 150px; width: 100%;" class="side" id="twitter_div">
　<marquee direction="up" scrollamount="1">
　　<ul id="twitter_update_list"></ul>
　　<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
　　<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/hs1250.json?callback=twitterCallback2&count=30"></script>
　</marquee>
</div>

Blogger的操作圖示如下

使用hellotxt.com訊息平台發表到Twitter

結果就如本網站左上方展示的MARQUEE

補充：Buboo跑馬燈A (文字板式)

如果您有Buboo帳號

可以參考以下的程式碼

<div style="border: hidden dotted rgb(128, 128, 128); overflow: hidden; height: 150px; width: 100%;" class="side" id="buboo_div">
　<marquee direction="up" scrollamount="1">
　　<ul id="buboo_update_list"></ul>
<script type="text/javascript" charset="utf-8" src="http://badge.buboo.tw/text?c_color=1&c_fontsize=9&c_type=1&c_user=hs1250&c_width=250&c_number=20"></script>
　</marquee>
</div>

請參考官網提供的參數說明 ～

 

補充：Buboo跑馬燈B(留言板式)

如果您有Buboo帳號

可以參考以下的程式碼

<div style="border: hidden dotted rgb(128, 128, 128); overflow: hidden; height: 150px; width: 100%;" class="side" id="buboo_div">
　<marquee direction="up" scrollamount="1">
　　<ul id="buboo_update_list"></ul>
<script type="text/javascript" charset="utf-8" src="http://badge.buboo.tw/widget?c_style=1&c_type=1&c_user=hs1250&c_width=250&c_number=20&c_pic=N"></script>
　</marquee>
</div>

請參考官網提供的參數說明 ～

 

瘋浪客Buboo 跑馬燈的展示網站 

 

 

延伸閱讀

tizag CSS Tutorial – Border ：參考修改Border的樣式

Buoo 社群網站：您可以把它當作台灣的Twitter~