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.

129 comments

  1. indahnya pertamax disini ... =))

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

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

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

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

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

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

    hihihi mantab ini...

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

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

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

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

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

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

    Kayaknya beda!

    Ada rencana apa ini?
    Hehehe..

    BalasHapus
  14. 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
  15. 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
  16. wahhhh,, keren euy, dulu pernah buat kaya gini wkt msih maen di wapsite tp gak pake js, sipppp dah

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

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

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

    BalasHapus
  20. 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
  21. Komentar ini telah dihapus oleh administrator blog.

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

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

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

    BalasHapus
  25. blogger cwe pasti suka banget nih..

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

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

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

    BalasHapus
  29. manisss ^__^ jadi pengen nyoba :D

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

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

    BalasHapus
  32. sangat indah gan bila berwarna warni

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

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

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

    BalasHapus
  36. 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
  37. cocok untuk blogger yg suka rubah2 hover text/link

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

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

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

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

    BalasHapus
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. Hadir dan absen sore kembali gan..setelah sekian lama tiarap dulu dari online.....
    Penampilan berubah di beberapa segmen blognya nih...sipplah

    BalasHapus
  48. 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
  49. text rainbow nya keren abies sobat,,,

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

    BalasHapus
  51. 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
  52. mampir lagi ah :)
    tetep manteb nih trik :)

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

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

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

    BalasHapus
  56. 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
  57. oooh.. read more yaCh ???
    kan tinggal judul tu dihomepage ente ... :D

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

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

    BalasHapus
  60. indah sekalimgan dengan rainbow text ini

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

    BalasHapus
  62. 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
  63. 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
  64. mampir lagi ahh,, ikut meramaikan,, =))

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

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


    Fridi Graphic

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

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

    BalasHapus
  69. Komentar ini telah dihapus oleh pengarang.

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

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

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

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

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

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

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

    BalasHapus
  77. 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
  78. sebuah penambahan ilmu saya dapatkan setelah membaca tulisan ini , terimakasih

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

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

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

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

    BalasHapus
  83. 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
  84. makasih trik nya,, ntar di coba :D

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

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

    BalasHapus
  87. 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
  88. 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
  89. To Wisata Murah : wahhh akhirnya muncul juga sobatku yang satu ini :)) gak semua lah :| wkwokwow iya sob untuk pewarnaan yang leebih modif :D

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

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

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

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

    BalasHapus
  94. 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
  95. Selalu berkunjung sobat :)
    Main k blog Ane ya gan

    Klik 4information y gan :)


    Komentar di tunggu sobat
    Jangan lupa follow jga :) ( follow back )

    Sesama blogger lebih baik saling sapa Dan saling memper erat blogger Indonesia

    Salam blogger

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

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

    BalasHapus
  98. Keren mas. Makasih infonya mas

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

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

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

    BalasHapus
  102. 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
  103. ini sama dgn yg kek saya tadi nih...xixixixi

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

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

    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