Excalibur
Info

Selamat Datang

Selamat Datang Di Blog Roy Lichtenstein- Saya Senang Anda Berada Di Sini, Dan Berharap Anda Sering Datang Kembali. Silakan Berlama - Lama Di Sini Dan Membaca Lebih Lanjut Tentang Artikel Yang Saya Susun. Ada Banyak Hal Dapat Anda Pelajari, Anda Mungkin Akan Menemukan Sesuatu Yang Menarik

Sekilas Tentang Roy

Nama saya Roy Lichtenstein, Saya Bukan Seorang Blogger, Hacker, Desainer Atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar Dan Ingin Tau Sesuatu Yang Baru...

Social Icons

xtreme5-roylichtenstein.blogspot.com

Panduan BloGGeR Cara Membuat Animasi Text

Sebuah animasi text yang sangat cantik dan menarik untuk dimanfaatkan sebagai pemanis blog. Kamu bisa mengisinya dengan kata-kata sambutan atau kata lain yang sekiranya penting atau menarik bagi pembaca blog. Untuk menggunakannya dalam blog sangat mudah sekali karena tinggal copy paste kemudian simpan di bagian manapun dari template kamu. Bis di bagian head, body atau dengan cara menambahkan widget melalui Elemen Laman (HTML/Javascript).

Beberapa variable dapat dirubah untuk mendapatkan efek animasi yang dirasa cocok.
  • var message = tempat menuliskan teks
  • var neonbasecolor, var neontextcolor, var neontextcolor2 = untuk membentuk variasi warna.
  • var flashspeed = untuk merubah kecepatan animasi
    var flashingletters, var flashingletters2 = mengatur jumlah teks warna-1 dan teks warna-2
  • var flashpause = untuk mengatur lama waktu teks berhenti (pause) dalam milliseconds (ms).



<h3>
<script type="text/javascript">
//<![CDATA[
var message="Selamat datang dan selamat menikmati sajian kami ...! -gubhugreyot"
var neonbasecolor="blue"
var neontextcolor="lime"
var neontextcolor2="yellow"
var flashspeed=100 // flashing speed (ms)
var flashingletters=5 // text-1
var flashingletters2=6 // text-2 ; 0 = disable
var flashpause=2000 //pause (ms)
var n=0
if (document.all||document.getElementById){document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')}else
document.write(message)
function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor}
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return}}
function beginneon(){if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)}
beginneon()
//]]>
</script>
</h3>
 
  • Animasi teks dapat digunakan di antara tag pembuka header (<head>) dan tag penutup header (</head>) atau di bagian body (antara <body> dan </body>).
  • Penyimpanan dapat dilakukan lewat Edit HTML atau Add a Gadget » HTML/Javascript.
  • Agar lebih jelas tentang cara menyimpan javascript atau kode HTML yang lain, silahkan buka Special Tutorials di deret menu sebelah kiri!
  • Tag teks animasi tidak selalu harus menggunakan h3, namun dapat juga menggunakan yang lain seperti misalnya h2.
  • Agar tels terlihat lebih variatif/indah bisa ditambahkan beberapa variable dalam tag h3 seperti contoh berikut:
  • <h3 style="font-size:18px;width:90%;background:#555;display:block;padding:8px 10px;border:1px solid #aaa;box-shadow:3px 3px 4px #000;text-shadow:1px 1px 1px #000;text-align:center;">
    <script type="text/javascript">
    //<![CDATA[
    Javascript
    //]]>
    </script>
    </h3>
  • Jika ingin kode lebih ringkas javascript bisa di upload di file hosting terlebih dahulu kemudian rubah bentuk kodenya menjadi seperti ini:
  • <h3>
    <script src="animated-text.js" type="text/javascript"></script>
    </h3>

Tidak ada komentar:

Posting Komentar

Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous