You must enable Javascript in your browser to run or open this site.

Rainbow Text With Javascript

Halo sobat kembali berbincang mengenai Tutorial Blog lainnya di sini. Pernah Saya Posting Membuat semua Link menjadi Warna Warni pada blog. Maksudnya adalah Ketika sobat mengarahkan Kursor ke arah link, Link tersebut langsung berubah menjadi warna warni. Bisa di bilang sebagai Effect Hover, bahasa cssnya.

Kali ini berbeda dengan Trick yang sebelumnya itu. Trick ini akan merubah warna netral suatu Text menjadi warna warni secara Horizontal. Jadi warna pelangi dalam suatu Kata, Kalimat, atau Paragraf. Bagaimana sih contohnya? Bisa di lihat di bawah ini (Tolong aktifkan Javascript sobat) :


RAINBOW TEXT


Apple pie sweet chocolate bar chupa chups carrot cake faworki. Dessert candy canes powder applicake jujubes. Muffin chupa chups soufflé tootsie roll. Cookie sweet roll ice cream ice cream powder powder tart icing. Chocolate bar tootsie roll jujubes biscuit tart. Sweet roll ice cream cake chocolate bar danish fruitcake soufflé cotton candy. Caramels wafer jelly beans marzipan candy gingerbread apple pie. Jelly-o muffin marzipan carrot cake bear claw. Gummies cupcake lollipop jelly-o chupa chups sesame snaps bonbon. Applicake croissant jelly-o jujubes chocolate toffee. Chupa chups dessert chocolate liquorice biscuit sweet roll. Cheesecake wafer oat cake gummies danish. Chocolate cake sugar plum chocolate cake liquorice.


Bisa dilihat dan disimpulkan bahwa sepanjang apa pun kata itu terlintas dengan menggunakan script Rainbow ini, Kata atau Kalimat akan berubah menjadi Pelangi yang dari ujung Merah kembali lagi ke ujung Merah.

How To Make?
  1. Buka Blogger.com dengan password dan ID untuk langkah awalnya
  2. Klik Design/Layout
  3. Klik Edit HTML pada Tab diatas
  4. Copy dan Paste Code berikut tepat di bawahnya kode <head>
    <script src="https://sites.google.com/site/farixsantips/scripts/rainbow.js" type="text/javascript"></script>
  5. Save!
  6. Kemudian tahap selanjutnya, sobat hanya perlu menambahkan kode <span class="rainbow"> pada setiap Kata atau Kalimat yang ingin di jadikan Pelangi
    Example :
    <span class="rainbow">Kata Kata Pelangi!</span>
Nah, cara tersebut bisa di gunakan di mana saja, Diposting, Gadget, Html Code, dan lain lain. Selamat mencoba jika gagal hubungi saya di Kotak Komentar, tetapi saya yakin tidak akan gagal hehe.

128 comments

  1. blog ente udah ga terlalu berat lagi sob... mantaav dha ... :)
    skrng cepet banget kebukanya ...

    BalasHapus
  2. To Shinobi : selamat ya pertamaxnya :)) wkowkow
    iya kah udah gak berat lagi? masa sih sob :D wahhhh akhirnya bisa juga gak berat :))

    BalasHapus
  3. bagus postingan nya gan..
    Terimakasih udah follow back.

    BalasHapus
  4. textnya jadi warna warni.. :D
    makasih tipnya sobat :)

    BalasHapus
  5. wih mantep gan hahahaha, cuman java script lagi :((

    BalasHapus
  6. wah seindah senyumku hari ini
    berwarna warni bak pelangi
    sama dg text ilmu yang kau bagi

    hihihi mantab ini...

    BalasHapus
  7. wah keren mas. kalau tidak menyebabkan loading lambat, saya ijin sedot tipsnya :D

    BalasHapus
  8. mantep nih apalagi kalo di taruh di Link , eh ane cari yg versi CSS ga ada :)

    BalasHapus
  9. wah kalau pake script ini blog ku bisa jadi lebih berwarna.

    BalasHapus
  10. hehe, MWBer cma bsa mlongo doank :hihi

    BalasHapus
  11. wah,,,mantep Sob ijin ngebookmark buat amunisi,,,wkwkwk lagi2 ane pertamax dari bawah =))

    BalasHapus
  12. Ada yang berubah ya dari blog ini??

    Kayaknya beda!

    Ada rencana apa ini?
    Hehehe..

    BalasHapus
  13. To Kertas yang harus diwaspadai : thanks gan supportnya gan :)
    To alkatro : hehehehe sama sama sobat :) warna warni :))
    To anisayu : wah berpuisi tentang ini ya :D huahaha muantap banget mba :D
    To bloggermie : tidak kok sob :) gak buat lambat kok :)
    To Mbah Qopet : kalau di taruh di link sepertinya ane gak taudeh, waktu itu pernah nyoba tapi gak bisa

    BalasHapus
  14. To Liandri : hahaha iya banget tuh sob lebih kinclong :))
    To andi_11 : jgn melongo doang sob, ntar kalau ada setan lewat gmana =))
    To binkbenk : amunisi ngapain nih sob :))
    wkowkow iya pertamax dari bawah atau Petromax :))
    To Kopiah Putih : hahahaha gak rencana apa apa kok sob :D hihihi berani tampil beda, Garnier =))

    BalasHapus
  15. wahhhh,, keren euy, dulu pernah buat kaya gini wkt msih maen di wapsite tp gak pake js, sipppp dah

    BalasHapus
  16. Tipsnya bagus, tampilan blog sobat juga tambah bagus :D. TOP BGT dah hehe

    BalasHapus
  17. waw banyak pelanginya,,, keren bgt sobat...

    BalasHapus
  18. wah ada aja nih tips nya
    keren tulisannya .... bisa jadi warna-warni

    BalasHapus
  19. hoho...blogger girly pasti seneng banget dapet tips beginian. Bisa bikin yulisan serasa pelangi. Kalo link hover pelangi gue dah pake...Nice tips and happy blogging!

    BalasHapus
  20. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  21. mantap smakin keren bkalan tampilanya dgan warna-warni

    BalasHapus
  22. super keren sob tips-tipsnya dimari.. manteb

    BalasHapus
  23. Wiih... keren... ada yang CSS nggak Sob. :)

    BalasHapus
  24. blogger cwe pasti suka banget nih..

    BalasHapus
  25. widiiiiiihhh....makin kereennn aja tampilan barunya....
    harus banyak belajar lagi ne dengan kang Farixan di Blog ini.....

    BalasHapus
  26. Mantep nih bro, :D
    Tapi kalo gw pake ntar dikatain bences bro wkwkwk =))

    BalasHapus
  27. berarti termasuk judul blog juga bisa ya sob,,keren juga ya bisa warna warni begitu,,

    BalasHapus
  28. wiih keren nie, blognya jg tambah kereen sekarang, saluut deh :D

    BalasHapus
  29. mampir lagi , ane tadi coba bisa kok tapi ane lepas lagi takut berat :)

    BalasHapus
  30. sangat indah gan bila berwarna warni

    BalasHapus
  31. berkunjung pagii..brangkat k kantor dulu..

    BalasHapus
  32. Lumayan nih :D
    Kalau di terapkan di blog saya cocok ngak yah..? :|

    BalasHapus
  33. Keren bgt sob,,, warna text jadi seperti pelangi,,,

    BalasHapus
  34. iaa sob, bener banget.. skrng blog ente ringan banget ... nggak kayak kemaren-kemaren itu, lambat banget bukanya ... :)
    pake apa nih sob biar loading cepet ???? :D

    BalasHapus
  35. cocok untuk blogger yg suka rubah2 hover text/link

    BalasHapus
  36. syg bnget blog q ga mndkung skrip jawa,,,
    pakdhe ksh tutor dung tntang ngblog dblogspot atau wp tpi cma brmdal hp

    BalasHapus
  37. kok ga nongol effeknya, saya sudah aktifin javscrip

    BalasHapus
  38. Tampilannya udah berubah lagi nih homepagenya..sipplah....

    BalasHapus
  39. maaf baru bisa berkunjung,, :(( :(( btw tips nya manteb tuh,, cocok buat blog yg background nya gelap, :D

    BalasHapus
  40. To Kang Topjer : oalahhhh pakainya apa dong sob kalau bukan JS ? :D
    To Zh!nTho : iya sob lagi lagi nih :D
    To Deganshah Putra : wahhhh thanks banget supportnya :D hihihi
    To Musa Khairul Umam : ini berat gak sob ? :D hihihi
    To Asis Sugianto : hehehehe seperti sulap ya bro :D hahaha
    To Setia Ji : hehehe iya sob bisa dong :D thanks kunjungannya :)

    BalasHapus
  41. To Iskaruji dot com : huahahahaha iya sob tau aja nih sobat yang girly girly :)) iya sob ane udah TKP dan lihat :D
    To Bayu Aldi Yansyah : thanks bangetz mas :D
    To katils : hehehehe semoga sob :)
    To >>>ichwan HAUSGAME : Terimakasih sob kunjungan dan supportnya :)
    To Catatan Ngeblog : ane sedang mencari versi yang CSSnya sob
    To yudee : iya sob kwowkow tau aja dah yang cewe cewe :))

    BalasHapus
  42. To ageboy : thanks supportnya sob :)
    To zaenal blog : wahhhh tersanjung dengan ucapan sobat :) sukses ya om :)
    To Abi Says Drunk : wahahaha kalau menurut sobat begitu ya, wkowkwokw :))
    To al kahfi : iya sob :D tapi gak tau dah kalau link :D
    To Nurmayanti Zain : wahhhhh silahkan di cobain mba :)
    To Aldio : thanks bangetz ya sob supportnya :) thanks kunjungannya
    To Mbah Qopet : hehehehhee :D bisa aja nih mbah :D berat gak nih halaman?

    BalasHapus
  43. To Obat Sakit 2011 : hehehehe iya gan lebih kinclong :D
    To Venomia Blog : wahhhh kekantor? udah kerja ya gan? mantep bangettt
    To Wirang geni : huahahaha terserah sobat aja cocok atau gak :))
    To Aku mau uang 30 juta dari ikut kontes Seo : silahkan sob boleh boleh aja :))
    To Asis Sugianto : hehehhee iys sob pelangi lebih indah ketimbang tak berwarna :))
    To Shinobi Cafe : wahhh ternyata dulu lambat banget ya :D ane copot aja kode readmorenya :D

    BalasHapus
  44. To r10 : hahahah seperti blog siapa tuh sobat :D
    To dunia blog : wah iya my wap blog :) ada sob di temen saya namanya OBINHUT cari di google deh dia
    To dunia otan : masa sih sobat? tapi temen temen yang lain bisa lihat kok :|
    To cardiacku : hehehehe iya sob berani jadi dirimu yang baru, garnier :))
    To Rama88 : iya sob gak apa apa :) seperti blog siapa tuh sob :))

    BalasHapus
  45. Hadir dan absen sore kembali gan..setelah sekian lama tiarap dulu dari online.....
    Penampilan berubah di beberapa segmen blognya nih...sipplah

    BalasHapus
  46. To Zh!nTho : silahkan sob mampir lagi
    To tautanpena : alhamdullilah hadir juga setelah sekian lama ane tunggu tunggu :)) wkwokwo iya bro berubah :D hehee

    BalasHapus
  47. text rainbow nya keren abies sobat,,,

    BalasHapus
  48. wuihh jadi nya keren gini iia.. bisa langsung otomatis warna warni tanpa kita akalin manual di tiap postingan :) mangtafff!!!

    BalasHapus
  49. To Asis Sugianto : iya sob keren :) seperti adminnya :P wkwowkow =))
    To Belajar Photoshop : iya tak perlu otak atik perpostingan, tinggal meletakan script itu, di beri class, jadi deh :D
    To saryadinilan : hehehehe sekeren orangnya gak? :))

    BalasHapus
  50. mampir lagi ah :)
    tetep manteb nih trik :)

    BalasHapus
  51. Woww... Pelangi Pelangi Alangkah Indahmu!!!
    dipake dipostingan jadi makin MANTAAFF BGT tuh Boss!!!
    Hmm,,, Kalo gitu Ayas ijin NYIMPEN neh Boss... MAKASI yach...

    BalasHapus
  52. Keren.Maknyus soft seperti rainbow.Gapengaruh ke loading kan sob?

    BalasHapus
  53. teks rainbow membuat hati jadi nyaman melihatnya...

    BalasHapus
  54. sebelumnya aku mau minta mf kalo seandainya aku gak bs reply komen2 dari sobat2ku semua, terutama komenmu sob, jujur aku bkn seorg blogger yg 100% bs online 24 jam trs. aku cm seorg pekerja kantor yg punya kesibukan terlalu padat, namun disela2 kesibukanku itu aku sempatkan utk ngeblog, jd aku cm punya wkt nyuri2 saja.
    mungkin kalo km pengen jelas tentang identitasku, masuk aja ke kategori "Paint My Feel" diblogku trs cari posting yg judulnya "Identity of Penghuni 60", baca ya biar km ngerti, dan mohon maklumin ya... yg jls kalo sempat tetap aku balas. :)
    (mf gak sesuai tema postingan)

    BalasHapus
  55. oooh.. read more yaCh ???
    kan tinggal judul tu dihomepage ente ... :D

    BalasHapus
  56. pelangi pelangi alangkah indahnya, merah kuning hijau di blog sahabatku ini :)

    BalasHapus
  57. Tips yang menarik sob tapi maaf ni takutnya malah jadi menambah berat blog maklum saya pakai koneksi yang super lemod !

    BalasHapus
  58. indah sekalimgan dengan rainbow text ini

    BalasHapus
  59. wow keren nih.. tar ane coba bikin di blog ah... makasih tipsnya farix..

    BalasHapus
  60. To Bayu Aldi Yansyah : hehehhee thanks banget ya om kunjungannya :)
    To BagiBagiBlog : iya sob ccocok buat sobat yang custom post :D hehehehe
    To Bisnis Online Blog : seukuran blog ini lah koneksinya :)
    To Said Arsyad : hehehen unyu unyu :D :))
    To Asis Sugianto : iya sob tenang bagaikan sunyi di malam hari :)
    To Penghuni 60 : ohhh begitu ya sob, berarti sobat nyuri nyuri waktu seperti itu ya :( wahhh mohon maaf ya atas ketidak tahuan saya itu :( oke TKP :)

    BalasHapus
  61. To Shinobi Cafe : iya om readmorenya ane copot gitu :D ia ahahaha
    To BlogS of Hariyanto : eeettt si ente malah nyanyi :)) gak apa apa deh, merdu merdu :))
    To Prapatan Kertek : oalah gitu ya sob :D mampir ke blog ini gimana sob? berat gak? :))
    To Obat Sakit 2011 : iya gan sangat berkilau dan kinclong :)) thanks ya kunjungannya
    To pri crimbun : oke sobatku pri :) thanks support dan kunjungan :)

    BalasHapus
  62. mampir lagi ahh,, ikut meramaikan,, =))

    BalasHapus
  63. To Rama88 : silahkan di ramaikan sob =)) wkwokwow

    BalasHapus
  64. ikut-ikutan meramaikan =))
    blognya banyak tips, mangstab


    Fridi Graphic

    BalasHapus
  65. To Mbah Qopet : maaf mbah tadi ane cek di SPAM komentar, komentar mbah kedetect SPAM :| aneh banget kan ya huahahaha .

    BalasHapus
  66. To FridiGraph : hehehehe silahkan di ramaikan blognya :) hehehe namanya juga farixsantips :))

    BalasHapus
  67. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  68. Nongkrong disini lagi sob siapa tau dapet pertamaxx..hehehe:D

    BalasHapus
  69. To Tituitbom.Com - News and Tips Tricks : hehehehe thanks ya sob kunjungannya dan supportnya :)
    To binkbenk : silahkan nongkrong :) pertamax sold out sob wkwokwokw

    BalasHapus
  70. sekalian copot giginya sob, sapa tau bisa lebih kenceng lagi ... hhehe =)) :D

    BalasHapus
  71. To Shinobi Cafe : wkwokwokw jgn gigi lah sob, sakiiittt :(( copotidung aja biar kayak gantengnya michael Jackson :))

    BalasHapus
  72. hadir kembali dg senyum berseri
    untukmu text pelangi.... :D

    BalasHapus
  73. waaa , kok bisa masuk Spam , apa karena terlalu pendek ya :/

    BalasHapus
  74. kenapa ya klo buat header ku ko ga bisa.

    BalasHapus
  75. To blog alternative : thanks atas kedatangannya :)
    To anisayu : selalu puisinya di terapkan dimanapun, menjadi cirikhas mba anisayu yang anggun, hahaha
    To Mbah Qopet : mungkin :P namanya SPAM gimana sih :P :))
    To Baha Andes : sob ane udah cek ke TKP trus liat source code, ternyata sobat blm meletakan kode class ya :| kan sudah di tutorialkan di letakan class :)) kalau ada class lain, pisahkan dengan [spasi] :)

    BalasHapus
  76. sebuah penambahan ilmu saya dapatkan setelah membaca tulisan ini , terimakasih

    BalasHapus
  77. To munir ardi : waduhhhh thanks banget ya udah baca tulisan ane :) thanks kunjungannya

    BalasHapus
  78. makasih ya sudah berbagi..
    coba ahh..

    BalasHapus
  79. Mantabb nih Tips,
    lngsung Bookmark dulu ah,
    nantri lgsg di praktekan,
    thanks sob

    BalasHapus
  80. wah masih ngeri kalau mau otak-atik css, bisa begadang semaleman .....

    BalasHapus
  81. Mohon maaf, sekali lagi saya mohon maaf, kalau ternyata dengan tidak meng-reply komentar membuat perasaan sobat yang meninggalkan jejak koment jadi tidak senang karena merasa tidak terpedulikan oleh Admin BlogS of Hariyanto, dan saya tidak ada maksud sedikitpun untuk tidak memperdulikan jejak koment yang hadir,
    upaya reply yang saya lakukan adalah seperti yg sudah saya sampaikan sebelumnya, yaitu dengan berusaha membalas kunjungan dan membalas komentar (atau menjawab pertanyaan yang bisa saya jawab ) pada postingan para sobat Blogger yang sudah bersusahpayah meninggalkan jejak komentar pada postingan BlogS of Hariyanto sekaligus membalas support meningkatkan traffic visitor sesama Blogger, seperti yang saya lakukan sekarang ini.
    Karena menurut saya, para Sahabat-sahibit Blogger tentunya lebih senang kalau saya juga datang berkunjung ke Blog para sahabat-sahibit Blogger, membaca postingan artikel dan kemudian meninggalkan jejak komentar :)
    Namun bila hal yang saya lakukan ternyata tidak berkenan di hati sobat Blogger, saya mohon maaf.
    Btw- terimakasih atas input dan advice-nya :)
    salam sukses selalu

    BalasHapus
  82. makasih trik nya,, ntar di coba :D

    BalasHapus
  83. Oh...Kirain ada udang dibalik peyek!
    Hehehehe...
    Sukses terus ya sahabat..

    BalasHapus
  84. wahhh menanti komenter yg ke 100 nehh =)) =))

    BalasHapus
  85. tidak ada ruginya berkunjung di Farixsan tips, semua kumpulan text unik javasript di share di sini

    tips spipt diatas nanti ane ijin pinjam copas kalau ada posting yang sesuwai untuk pewarnaan yang unik. thnks dan sukses terus untuk farixsan tips

    maaf ne agak lambat respon karena kegiatan offline sangat menyita waktu .. happy blogging

    BalasHapus
  86. To Nchie : iya sob sama sama sudah berkunjung :)
    To zaenal blog : hehehehe silahkan bookmark dan praktekan :)
    To Rubiyanto Sutrisno : wahahaha masa sih sob, ane gak 100% percaya :D
    To BlogS of Hariyanto : mas haryanto :) aku bukannya tidak senang dengan sobat yang tidak membalas komen. demi apapun bukan karena alasan itu sobat. tetapi ane sebagai manusia yang memiliki rasa keingintahuan terhadap sesuatu :) ane cuman ingin tahu saja koq sob :)
    To Ayo Menyumbang Untuk Wikipedia! : hehehhee oke sob jip! :) silahkan di cobain
    To putroe intan : silahkan di coba :)
    To Kopiah Putih : huahahahha :D iya om sukses balik :)
    To Rama : sepertinya ane yang 100th comments!! :)) wkwowkow
    To Zh!nTho : iya sob belum :|

    BalasHapus
  87. To Wisata Murah : wahhh akhirnya muncul juga sobatku yang satu ini :)) gak semua lah :| wkwokwow iya sob untuk pewarnaan yang leebih modif :D

    BalasHapus
  88. Tips tipsnya selalu canggih sob :D. lanjutkaaaaaaaan hehe

    BalasHapus
  89. Wah keren. Ilmu tingkat tinggi niy...

    BalasHapus
  90. To Deganshah Putra : hehehe bisa aja nih sobat :) oke di lanjutkan :)
    To 21inchs : hehehehe biasa kok sobat :) thanks kunjungannya ya

    BalasHapus
  91. Terima kasih saudaraku atas berbagi tipsnya nih..bagus

    BalasHapus
  92. tunggu post baru mas faris :)

    BalasHapus
  93. To socafahreza's blog : hehehe makasih banyak supportnya :)
    To Wirang geni |ΩΛΘ¤ : berkat kalian semua ;)
    To abufarras : sama sama sobat, thanks kunjungannya :D
    To Bayu Aldi Yansyah : oke sobat :) segera :)

    BalasHapus
  94. To 4information : ya om, ra usah promosi lah :|

    BalasHapus
  95. Jalan-jalan malam sambil nunggu postingan baru lagi nih hehehe

    BalasHapus
  96. To cardiacku : hehehe silahkan jalan jalan sob :)

    BalasHapus
  97. waaaa... kalo copot idung, nnti bisa bersaing mah sule dunk ... hhaha =))

    BalasHapus
  98. lur kenapa ya masih juga gagal padahal aku udah mengikuti totorial di atas...

    BalasHapus
  99. blockquote ente di maling DODE tuh faris,, asemm tuh orang ,,

    BalasHapus
  100. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  101. To Nurmayanti Zain : hehehe salama datang :))
    To Selalu Ada : thanks mas, makasih kunjungannya :)
    To Shinobi Cafe : kacau lo om wkwokwokwow :)) =))
    To Baha Andes : masa sih, coba ane cek lagi ke TKP
    To Rama : memang kampret tuh anak blogger!

    BalasHapus
  102. ini sama dgn yg kek saya tadi nih...xixixixi

    BalasHapus
  103. To Beben Koben : hehehe iya ane dah duga dengan baca komentar sobat :P

    BalasHapus
  104. Wow,,,, its nice. very impressive

    BalasHapus
  105. To D.I : thanks for your appreciation :)

    BalasHapus
  106. sip masbro ternyta cukup mudah buatnya

    BalasHapus
  107. To Admin-Wahid Sahidu : memang sangat simple bro jika dilihat lihat :)

    BalasHapus
  108. mlm mas bro...mau nya nih..
    gmna ya sih mengubah home seperti punya ente....?
    pleas...kasih trick donk...!!!!!!!!!!

    BalasHapus
  109. To anak ganteng : ngerubah seperti apa sob? punya ane? jelasin detail dong gan biar jelas :)

    BalasHapus