[ Blogger ] [ HTML ] 如何在網站或部落格中放入跑馬燈

相信讀者們都有注意到我們的網站上方有一個跑馬燈會一直跑吧~

究竟這個跑馬燈是怎麼做的呢？

這篇教學就是來教大家如何在自己的網站或部落格放置跑馬燈喔~

本文開始~

跑馬燈的基本 HTML 語法為：

<marquee> 你想要顯示的文字 </marquee>

針對 <marquee> ，萊德我整理出以下屬性語法以及參數，如果你想要做出其他不同效果的跑馬燈，只要把下列參數含括到 <marquee> 語法裡面就可以做出多種效果的跑馬燈囉！

使用方法：

<marquee 屬性語法以及參數 > 你想要顯示的文字 </marquee>

*屬性語法以及參數：

scrollamount ：調整跑馬燈的捲動速度，數值越大跑得越快， ex: scrollamount="5"

bgcolor ：改變跑馬燈背景顏色， ex: bgcolor=#333333

direction ：調整跑馬燈的捲動方向，參數有：left，right，up，down ， ex: direction="up"

height ：調整跑馬燈區域的高度， ex: height="30"

width ：調整跑馬燈區域的寬度， ex: width="100"

behavior ：調整跑馬燈的行為，參數有：alternate（文字在跑馬燈區域來回），slide（進入之後停止捲動），scroll（預設語法，文字跑完後會重複繼續）， ex: behavior="alternate"

在這邊提供我們網站目前使用的語法給大家參考：

<marquee scrollamount="5" bgcolor=#333333> ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室！ ♫ 本站推薦使用 Chrome 瀏覽器以獲得最佳的瀏覽品質！ ★ 建議瀏覽之螢幕解析度：1280 x 768 以上 ◎ 本站的留言系統全面採用 Google+ ，歡迎大家多多與我們互動！ ✽ 交換連結強力募集中！歡迎到"Friends"頁面提出申請，大家一起來當好朋友~ ☏ 對網站有任何問題或建議，都非常歡迎使用"Guestbook"留言板，讓我們知道您的想法喔 (っ● ω ●)っ </marquee>

如果把這個語法結構化的話會變成下面這樣：



<marquee scrollamount="5" bgcolor=#333333>

◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室！ ♫ 本站推薦使用 Chrome 瀏覽器以獲得最佳的瀏覽品質！ ★ 建議瀏覽之螢幕解析度：1280 x 960 以上 ☎ 非常歡迎讀者們與我們交換連結唷 (≧▽≦)/

</marquee>



這樣是不是比較好懂呢~
以下再為大家做更詳盡的解釋~

第一行的 語法是調整文字的顏色 ( color ) 以及大小 ( size ) ，和最後一行的 是配對關係~

第二行的 <marquee> 語法就是跑馬燈的語法囉！和最後一行的 </marquee> 為配對關係~

其中 scrollamount 是用來調整跑馬燈的捲動速度，數值越大跑得越快，記得數值要用雙引號 " " 刮起來喔！

而 bgcolor 則是改變跑馬燈背景顏色的語法~

色碼表的部分，大家可以到下列連結查詢：

http://www.toodoo.com/db/color.html

由於 <marquee> 語法預設是由右到左的方向（ direction="left" ）反覆做捲動（ behavior="alternate" ），所以我們網站的跑馬燈語法就沒有多做這些屬性的調整~

此外，如果你是想要跑超連結的話，只要把連結網址的語法含括到 <marquee> 語法裡面就可以囉！

超連結的語法如下：

<a href="想要連結的網址" target="_blank">想要顯示的文字</a>

註：target="_blank" 語法是按下連結之後，會以開啟新分頁的方式打開連結！

詳細請參考以下範例：

<marquee scrollamount="5" bgcolor=#333333>

<a href="http://www.laird.tw" target="_blank">◆ Welcome to Laird Studio!</a>

</marquee>

學會了<marquee> 語法之後，要怎麼放到 Blogger 部落格呢~

其實很簡單，請登入至你的 Blogger 管理後台 > 版面配置

然後在你想要放跑馬燈的位置新增一個小工具，選擇 " HTML/JavaScript "

把你寫好的 HTML 程式碼填入框框中，按下 " 儲存 " 之後就完成囉！

重新整理你的部落格頁面，就會發現跑馬燈開始運作了~

跑馬燈的教學就到這邊~

我們下次見~

Search

2015年5月17日星期日