Cara Membuat Text Animasi Tulisan Berwarna

Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna di Blogger.

Pada artikel kali ini saya akan menuliskan panduan cara bikin teks flash (teks animasi flash / tulisan berwarna bergaya flash) yang nantinya bisa teman-teman pasang pada postingan blog (untuk mempercantik tulisan) atau di widget/sidebar (sebagai widget selamat datang yang keren).

Tutorial blog ini berbeda dengan Tutorial Cara Bikin Tulisan Kelap Kelip (Blink) yang sudah saya tuliskan dulu, karena tutorial cara membuat text animasi flash atau animasi tulisan berwarna ini menggunakan script sedangkan untuk membuat tulisan kelap kelip (Blink) tidak memerlukan script, hanya kode html saja.

Sebelum saya menuliskan panduan membuat text animasi flash atau animasi tulisan berwarna, saya akan memperlihatkan demonya dulu, agar teman-teman bisa melihat langsung bagaimana hasilnya nanti.

Demo Text Flash Animasi Berwarna / Tulisan Flash Animasi Berwarna
Nah itulah seperti itulah nanti penampakannya di blog teman. Next ...

Panduan Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna

Untuk Di Pasang Pada Postingan Bagi teman-teman yang ingin memasukkan text flash animasi ini pada postingan silakan ikuti langkah berikut:
  1. Buat posting baru / Edit postingan yang sudah ada.
  2. Masukkan kode script Text / Tulisan Flash Animasi Berwarna di sana (kode ada di bawah). Sebelum memasukkan kode script pastikan teman memasukkannya di bagian Edit HTML bukan di Compose (lihat di sebelah kanan atas forum isian posting)
  3. Terbitkan Entri (boleh juga dipratinjau dulu)
Untuk Di Pasang Pada Widget Bagi teman-teman yang ingin memasukkan text flash animasi ini pada widget/sidebar silakan ikuti langkah berikut: 1. Klik Tata Letak
Cara Pasang Widget Jam Di Blogger (http://blog.ahmadrifai.net)
2. Klik Tambah Gadget / Add A Gadget
Panduan Pasang Widget Jam Di Blogger (http://blog.ahmadrifai.net)
3. Pilih Gadget Html/JavaScript
Tutorial Pasang Widget Jam Di Blogger (http://blog.ahmadrifai.net)
4. Masukkan kode Text Animasi Tulisan Berwarna di sana. 5. Simpan (kamu juga bisa memindahkan letak widget jam tersebut dengan cara menarik gadget tersebut) Nah itulah langkah yang harus di lakukan.

Kode Script Text / Tulisan Flash Animasi Berwarna

<div style="-moz-box-shadow: inset 0 1px 5px 0 #fff; background: #990099; border: 1px solid #ECEDE8; box-shadow: inset 0 1px 5px 0 #555; font-family: Cataneo BT; font-size: 21px; font-weight: bolder; padding: 5px 20px; text-align: center;">
<script type="text/javascript">
var message="Selamat Datang Di Blog Ahmad Rifai Net"
var bgsGR1color="#FFFFFF" /* Warna utama teks */
var bgsGR2color="#FFFF00" /* Warna teks flash pertama */
var bgsGR3color="#00FF66" /* Warna teks flash ke dua */
var flashspeed=100 // kec. ganti warna (1/1000 dt)
var flashingletters=15 // jumlah teks pertama (tips / hiting jumlah text, kemudian bagi 2)
var flashingletters2=18 // jumlah berwarna teks ke dua (tips / hiting jumlah text, kemudian bagi 2)
var flashpause=1 // waktu jeda pergantian warna (1/1000 dtk)
var n=0
if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">')
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=bgsGR1color}
crossref(n).style.color=bgsGR2color
if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color 
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color
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>
</div> 
Catatan :
Ganti tulisan Selamat Datang Di Blog Ahmad Rifai Net yang ada di line 3 dengan tulisan yang teman mau. var flashingletters=19 - var flashingletters2=19 : pada link 8 & 9 . Ganti angka 19 dengan angka yang teman mau (Tips* hitung seluruh tulisan dan spasi yang teman masukkan pada line 3 (kode 1) atau line 5 (kode 2), kemudian bagi 2, setelah itu ganti angka 19 dengan hasil pembagian tadi.
Selamat mencoba membuat text animasi tulisan berwarna & Semoga berhasil

17 comments:

  1. ini yang saya cari,
    oh iya karna artikel hubungi saya tidak muncul di laptop saya. ga tau knpa
    saya mau nanya di sini aja deh
    cara buat tab recent post dan comment seperti di sidebarnya mas ky apa?
    mohon bantuannya ya :)
    tolong dengan sangat :)
    @menyebar ilmu :)

    ReplyDelete
  2. kalo pengen backgroundnya transparan gimana??

    ReplyDelete
  3. @Ananda Multzam agar backgroundnya transparan silakan hapus kode

    style="-moz-box-shadow: inset 0 1px 5px 0 #fff; background: #990099; border: 1px solid #ECEDE8; box-shadow: inset 0 1px 5px 0 #555;

    Yang ada di bagian div style"=

    ReplyDelete
  4. Aku mau nanya nih,gimana caranya yah zupaya Blogx aku tuh,biza aku buat Album Foto gitu...

    ReplyDelete
  5. Aku pngen bnget di blog aku itu ada animasi poto ku

    ReplyDelete
  6. aq mau koding widgets untuk baground animasi di wordpress donk ad ga?
    ato kyk di blog gt yng ad turun salju...

    ReplyDelete
  7. makasih ya. tutorialnya sangat membantu sekali :)

    ReplyDelete
  8. Thanks buat infonya. Kalo animasi text yang bisa jalan kaya yang ada di paling bawah blog ini, scriptnya gmn?

    ReplyDelete
  9. mas atau mbk cara membuat tulisan berjlan gmana ????

    ReplyDelete
  10. @the raikage devil Silakan baca di http://blog.ahmadrifai.net/2010/06/cara-membuat-tulisan-berjalan-atau.html

    ReplyDelete
  11. maaf, untuk memasukkan kode tulisan di add gadget di mana yah??? aku pemula..

    ReplyDelete
  12. Langsung ane praktekin gan...........
    Thanks :)

    ReplyDelete