19 June 2011

Cara membuat Text Berjalan Lembut

Tips menarik kali ini adalah mengulas tentang Cara membuat Text Berjalan Lembut di blog. Menghiasi blog dengan berbagai pernak-perniknya merupakan hal yang sangat mengasyikkan. Salah satunya adalah dengan memasang animasi teks berjalan.

Akan tetapi text berjalan ini beda dengan text berjalan seperti yang pernah saya postingkan dulu. Lihat postingan Membuat Animasi Text Berjalan Perbedaannya adalah teks berjalan dengan sangat lembut.

Ini kode yang harus dipasang di dalam template.
Pasang kode ini di atas kode </head> setelah itu save/simpan.
<!—SMOOTH-brugkembar-JQUERY-START-->
<script src="http://kodecode.googlecode.com/files/jalanlembut.js" type="text/javascript"></script>
 <script type="text/javascript">
<!--
$(function () {
// basic version is: $('div.demo marquee').marquee() - but we're doing some sexy extras
$('div.demo marquee').marquee('pointer').mouseover(function () {
$(this).trigger('stop');
}).mouseout(function () {
$(this).trigger('start');
}).mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
}).mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
$(this).data('drag', false);
});
});
//-->
</script>
<!-- SMOOTH-brugkembar-JQUERY-STOP-->

Langkah berikutnya adalah  membuat agar teks yang kita pasang menjadi berjalan lembut maka susunannya adalah seperti ini :

<marquee behavior="scroll" scrollamount="1" direction="left" width="350">
TULISAN YANG AKAN DIJALANKAN
</marquee>

Catatan :
  1. Ganti TULISAN YANG AKAN DIJALANKAN dengan kalimat yang lain
  2. Untuk mengatur kelembutan ganti angka 1 pada kode  scrollamount="1" semakin banyak angkanya, semakin cepat jalannya.
  3. Sedangkan untuk memperlebar area tempat text berjalan, ganti angka 350 pada kode width="350"
Mau Lihat Demonya Klik Disini
Selamat memasang text berjalan lembut di blog anda.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.