Tautan Emosi dan Pikiranku

Membuat Text Scroller (News Flash Text)

Pasti kita pernah melihat bentuk berita berupa teks bergerak di beberapa website portal atau berita online. Saya baru saja menerapkan di situs ini, dan berhasil.

Saya mendapatkan caranya dari dynamicdrive.com, tapi karena di blog ini wordpress tidak mengizinkan penggunaan script, jadi contoh tidak bisa saya tampilkan disini. Contoh bisa dilihat di vivaborneo.com atau langsung ke dynamicdrive.com.

Oke langsung saja, pertama adalah mengambil code dan  script yang telah tersedia di situs dynamicdrive.com;

http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

Jangan takut, karena script yang tersedia di situs tersebut gratis, alias tidak berbayar, alias free. Selanjutnya copy code yang ada.

Kolom pertama :

Step 1: Insert the below code in the <head> section of your page:


<style type=”text/css”>
/*Example CSS for the two demo scrollers*/
#pscroller1{


width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}
#pscroller2{


width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}
#pscroller2 a{


text-decoration: none;
}
.someclass{ //class to apply to your scroller(s) if desired

}
</style>
<script type=”text/javascript”>
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()


pausecontent[0]=’<a href=”http://www.javascriptkit.com”>JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!’
pausecontent[1]=’<a href=”http://www.codingforums.com”>Coding Forums</a><br />Web coding and development forums.’
pausecontent[2]=’<a href=”http://www.cssdrive.com” target=”_new”>CSS Drive</a><br />Categorized CSS gallery and examples.’
var pausecontent2=new Array()


pausecontent2[0]=’<a href=”http://www.news.com”>News.com: Technology and business reports</a>’
pausecontent2[1]=’<a href=”http://www.cnn.com”>CNN: Headline and breaking news 24/7</a>’
pausecontent2[2]=’<a href=”http://news.bbc.co.uk”>BBC News: UK and international news</a>’
</script>

Catatan : Code sengaja tidak saya copy semua karena terlalu banyak

Masukkan code tersebut diantara <head>. Biasanya ada di header.php.

Kolom kedua:
Step 2: Then, inside the BODY section of your page, to display a scroller, simply use the below example code:

<script type=”text/javascript”>

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, “pscroller1”, “someclass”, 3000)
document.write(“<br />”)
new pausescroller(pausecontent2, “pscroller2”, “someclass”, 2000)

</script>

Masukkan code yang ada di kolom kedua tersebut di bagian BODY, atau taruh saja di index.php atau home.php

untuk code berikut bisa di taruh di bagian style.php agar lebih mudah jika sewaktu-waktu ingin di edit. Penentuan panjang, lebar, atau warna teks dll bisa di edit dari sini.
#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}

#pscroller2{
width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

Penjelasan Step 1

var pausecontent=new Array()
pausecontent[0]=

<a href=”http://www.javascriptkit.com”>JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!

code berwarna hijau diatas adalah isi berita (disertai tanda petik)

Penjelasan Step 2

new pausescroller(pausecontent, “pscroller1”, “someclass”, 3000)
document.write(“<br />”)
new pausescroller(pausecontent2, “pscroller2”, “someclass”, 2000)

Angka 3000 dan 2000 adalah jarak atau kecepatan munculnya teks berdasarkan per milli detik (seperseribu detik) .

Untuk memasukkan berita tentu sangat merepotkan karena harus membuka dari code sumber dan rawan terjadi kesalahan ketik. Maka saya buatkan toolnya sendiri  di bagian functions.php. Tapi karena mata saya sudah ngantuk, jadi kapan-kapan saja saya lanjutkan artikel ini.

Semoga bermanfaat.


Advertisements

4 responses

  1. mas kalo headline berbentuk text atau marquee kaya di berita online gitu..gimana cara buatnya di cms wordpress???

    ditunggu jawabanya lewat email…

    saya minta tolong terima kasih sebelumnya

    June 5, 2010 at 12:59 pm

    • maksudnya gimana, bentuk marquee banyak. bisa kasih contoh situs yg menggunakan marquee sesuai keinginan anda gak ?

      June 6, 2010 at 2:40 am

  2. Hey, i think you visited my website so i came to “return the favour”.I am looking for ways to add things to my blog!I suppose its ok to use some of your ideas!!

    December 8, 2010 at 3:39 pm

  3. makasih tutorialnya. sudah saya coba dan berhasil. sekali lagi terima kasih banyak

    December 1, 2011 at 10:49 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s