Auto Scrolling Text

Salam...

Aku baru sahaja selesai berjogging pagi tadi apabila jiranku memanggil untuk mengopi di rumah beliau. Sambil pekena kopi kaw cap kapal api, mata aku tertumpu kepada salah seekor kucing beliau yang sedang khusyuk memandang TV. Sekali sekala kucing tersebut menguis-nguis tangannya untuk memegang skrin TV. Rupa-rupanya, cerita (entah movie apa, aku pun tidak tahu) baru sahaja selesai dan TV sedang memaparkan credit untuk para pelakon, pengarah, crew, penaja dan lain-lain lagi.

Pergerakan ke atas perkataan-perkataan dan nama-nama di skrin TV itu membuatkan si kucing agak teruja dan cuba mencapainya...hehe.

Melihatkan perkataan-perkataan yang bergerak ke atas (scrolling) itu, aku teringat akan permintaan Hasny di blog beliau Natural Beauty agar aku membuat tutorial tentang Friend' Links yang terdapat di blog aku ini.

Sebenarnya, banyak website atau blog yang telah memaparkan tutorial bagaimana untuk membuat Scrolling Text. Apa yang dipaparkan mungkin hanya sekadar basic dan terpulang kepada kita untuk membuat sedikit adjustments mengikut citarasa dan kreativiti kita sendiri.

Untuk tidak menghampakan Hasny aku paparkan juga di sini html code yang aku telah adjust dan jadikan widget Friends' Links mengikut citarasa aku.

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="100%" height="180">

<a href="http://www.videoconferencenet.com"><span style="color: #088A4B; font-size: 16px;"><b>Best Video Conference</b></span></a><br/><br/>

<a href="http://puteraduyong.com/blog/"><span style="color: #0080FF; font-size: 14px;"><b>Bicara Hati Si Putera Duyong</b></span></a><br/><br/>

<a href="http://hotnews.web.id"><span style="color: #FF0000; font-size: 17px;"><b>Blogshop Paper</b></span></a><br/><br/>

<a href="http://www.bluedianthus.com"><span style="color: #0000FF; font-size: 16px;"><b>Bluedianthus Dot Com</b></span></a><br/><br/>

<a http://tiqaramlan.blogspot.com"><span style="color: #243B0B; font-size: 16px;"><b>Love, Like, Live</b></span></a><br/><br/>

<a href="http://www.helponvoip.com"><span style="color: #FF8000; font-size: 17px;"><b>Internet Telephony Voip</b></span></a><br/><br/>

<a href="http://ipadcasereviewer.com"><span style="color: #FF0080; font-size: 16px;"><b>Ipad Case Review</b></span></a><br/><br/>

<a href="http://pakarhowto.com"><span style="color: #000000; font-size: 13px;"><b>Koleksi Petua, Panduan, Rahsia, Tips, Teknik dan How To</b></span></a><br/><br/>

<a href="http://www.onlypodcasting.com/podcasting-articles/free-podcast-software.php"><span style="color: #3B0B39; font-size: 16px;"><b>Podcast Software</b></span></a><br/><br/>

<a href="http://www.funwithpodcasting.com"><span style="color: #8000FF; font-size: 17px;"><b>Podcasting</b></span></a><br/><br/>

<a href="http://gilanggumilar.com/" mce_href="http://gilanggumilar.com/"><b><blink>GILANG GUMILAR</blink></b></a><br/><br/>

<a href="http://pencintapancing.blogspot.com/" target="_blank"><span style="color: #5E610B; font-size: 16px;"><b>Pencinta Pancing</b></span></a><br/><br/>

<a href="http://puakajoran.blogspot.com/" target="_blank"><span style="color: #FF8000; font-size: 16px;"><b>Puaka Joran</b></span></a><br/><br/>

<a href="http://surihati.com/" target="_blank"><span style="color: #610B0B; font-size: 16px;"><b>Natural Beauty</b></span></a><br/><br/>

</marquee></div>

Beginilah contoh hasilnya.


Best Video Conference

Bicara Hati Si Putera Duyong

Blogshop Paper

Bluedianthus Dot Com

Love, Like, Live

Internet Telephony Voip

Ipad Case Review

Koleksi Petua, Panduan, Rahsia, Tips, Teknik dan How To

Podcast Software

Podcasting

Video Conference Systems

GILANG GUMILAR

Pencinta Pancing

Zona Indonesia

Puaka Joran

Natural Beauty

Anda copy sahaja code di atas dan paste di html widget. Tukarkan code berwarna biru dan masukkan link yang anda inginkan. Buatlah adjustment untuk border, warna background dan sebagainya mengikut citarasa dan kreativiti anda termasuklah code yang berwarna merah.

Entry ini aku tujukan khas kepada Hasny yang memintanya dan kepada anda yang mungkin ingin tahu juga akan caranya. Jika anda telahpun tahu, anggap sahaja entry ini sebagai refresher.

Sekian.