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.
Sumber Artikel : http://cakkamal.wordpress.com/2009/05/07/membuat-text-scroller-news-flash-text/
Semoga bermanfaat.
No comments:
Post a Comment