SELAMAT DATANG & SELAMAT MENIKMATI BLOG INI

Rabu, 05 September 2012

CARA BUAT TULISAN BERJALAN DI BLOG




Kali ini saya men-sharingkan pengalan saya tentang cara buat tulisan berjalan di blog. Postingan ini sebenarnya banyak sekali bila kita mencarinya di mesin pencari seperti Google.com. Namun kali ini saya mencoba merangkumnya dari beberapa postingan rekan blog.



Pengalaman saya dalam membuat tulisan berjalan di blog itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Hal ini sudah direncanakan dan dibuat oleh para pakar pembuat website/blog untuk kode perintahnya/scridt yang biasa kita kenal dengan kode HTML. 
Adapun Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :



Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah : 

  • bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks
  • direction="left/right/up/down" » Mengatur arah gerakan teks 
  • behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan 
  • Scroll » teks bergerak berputar
  • Slide » teks bergerak sekali lalu berhenti
  • Alternate » teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo) 
  • title="pesan" » Pesan akan muncul saat mouse berada di atas teks 
  • scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya. 
  • scrolldelay="angka" » Untuk mengatur waktu tunda gerakan dalam mili detik 
  • loop="angka|-1|infinite" » Mengatur jumlah loop 
  • width="lebar" » Mengatur lebar blok teks dalam pixel atau persen 
Agar lebih jelas akan saya sertakan contohnya : 
1. Contoh marquee dari gerakan : 

Contoh hasilnya : 

marquee dari kanan ke kiri
Keterangan :

  • Ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down.
  • Angka "2" adalah kecepatan dari pergerakan tulisan, sedangkan width="30%" adalah lebar dari dasar tulisan bergerak.


2. Contoh marquee dengan variasi hurup dan warna latar belakang : 


<div style="background: #FFFF00; border: 2px solid #FF0000; color: red; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>


Contoh hasilnya :


Contoh Tulisan Berjalan





3. Contoh marque berjalan mondar-mandir
Kodenya :

<div align="left"><font color="white" face="georgia"><b>
<marquee bgcolor="green" behavior="alternate" width="98%" scrollamount="3">SELAMAT DATANG & SELAMAT MENIKMATI BLOG INI</marquee></b></font></div>


Hasilnya seperti ini :


SELAMAT DATANG & SELAMAT MENIKMATI BLOG INI




4. Tulisan berhenti bila Mouse diarahkan ketulisan tersebut.

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain. 

Contoh Kode nya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="100" align="center"> silahkan tunjuk ke sini </marquee>


Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini :


Contoh hasilnya : 
silahkan tunjuk ke sini

Bila digabungkan cara 2 dan 3 maka hasilnya :


silahkan tunjuk ke sini


5. Contoh kode marquee yang di dalam nya terdapat link : 
Ini gabungan Cara 2 dan Cara 4 :

<div style="background: #FFFF00; border: 2px solid #FF0000; color: red; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center"> 
<a href=" http://pandawalimamedan.blogspot.com">cara membuat blog</a><br/> 
<a href="http://pandawalimamedan.blogspot.com">Membuat blog </a><br/> 
<a href="http://pandawalimamedan.blogspot.com">Pasang Iklan </a><br/> 
</marquee> 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center"> 
<a href="http://pandawalimamedan.blogspot.com">Pasang Iklan </a>
<a href="http://pandawalimamedan.blogspot.com">Membuat blog </a><br/> 
<a href=" http://pandawalimamedan.blogspot.com">cara membuat blog</a><br/> 
</marquee>


Hasilnya seperti ini :




6. Teks berjalan zig-zag nembus

Kodenya :

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> BLOG PANDAWA LIMA</marquee></marquee></center>

hasilnya :
BLOG PANDAWA LIMA

Saran :

Sebelum setelah memasukan kode HTML ini, sebaiknya perhatikan peringatan dari blog. Bila ada kode HTML yang salah, maka postingan tidak bisa disimpan dan hasilnya tidak baik.
Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini. 


sumber :
http://adesyams.blogspot.com/2009/09/cara-membuat-tulisan-berjalan-marquee.html
http://www.krtutorplus.com/2007/04/membuat-marquee.html
http://www.bloggerbugis.com/2012/05/cara-membuat-tulisan-berjalan.html
http://lebengjumuk.blogspot.com/2012/03/cara-membuat-tulisan-berjalan-di-blog.html
http://christiantatelu.blogspot.com/2012/03/cara-membuat-teks-berjalan-di-blog.html

15 komentar:

  1. Balasan
    1. Semoga berhasil ya...
      Btw, terima kasih juga atas supportnya.

      Hapus
  2. lengkap...n menarik, boleh juga nie dipraktekin........kunjung balik ya.tks http://jasafinance.blogspot.com

    BalasHapus
  3. Kunjungi Balik Blogger Ku, ada autolike nya juga Loh => http://tipsjrswirogas.blogspot.com/

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. thanks ya gan, kunjungi balik ya gan blog ku.

    BalasHapus
  6. wow top deh lengkap banget...

    BalasHapus
  7. keren gan
    singkat padat dan jelas
    farizruswin.blogspot.com di tunggu kunjungan balik nya ya :)

    BalasHapus
  8. Thanks pak buat postingannya yang bagus..
    sudah saya coba n berhasil

    BalasHapus
  9. Pak, waktu saya buat scriptnya, lalu saya simpan, kok ada pemberitahuan ada kesalahan dalam gadget ini atau gadget ini rusak, mohon pencerahannya, trimakasih :)

    BalasHapus
  10. sangat bermanfaat bikin cantik blog......trims banget

    BalasHapus

Silahkan berkomentar menggunakan hati nurani dan tidak mengandung SARA, SEX dan POLITIK"