Animasi Teks Warna Warni

Posted in Labels: Blog Code, JavaScript | Friday, December 2, 2011 [ 3:52 PM ]

Home » Blog Code , JavaScript » Animasi Teks Warna Warni

Efek tampilan warna teks kalimat yang bisa berubah menjadi warna-warni dengan sensasi unik dan menarik. Dijamin pengunjung blog sobat bakalan "Oke-lah-kalo-begitu... Oke-lah-gw-follow... Gimana sich cara buatnya ???", "T-O-P-B-G-T". Buat sobat blogger yang pengen tau cara buatnya "Oke-lah-saya-jelasin".

Sebelum sobat blogger mencoba widget ini ada baiknya membuat backup template blog sobat terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.

Pada dasarnya script ini terdiri dari 3 (tiga) bagian.

Copy-Paste script di bawah ini sebelum kode </Head>.

<script type="text/javascript">
// Change next line for your text msg.
var msg = 'http://monozcore.blogspot.com'
var colorTimer = null;
// Color can be altered below - eg. remove - ABCDEF = darker
function toHex(n){
var hexChars = '0123456789ABCDEF';
if (n == 0) return n;
var j, k;
var temp = '';
while (n != 0){
j = n % 16;
n = (n - j)/16;
temp = hexChars.charAt(j) + temp;
}
return temp;
}
function colorize(){
if (!document.getElementById) return;
for (i=0; i<msg.length; i++){
k = Math.round(Math.random() * 16777215);
k = toHex(k);
while (k.length < 6){
k = k + '0';
}
document.getElementById('colorizer' + i).style.color = '#' + k;
}
// Speed change below - Default = 200 - Lower = Faster
colorTimer = window.setTimeout('colorize()', 200);
}
window.onload = colorize;
</script>

Ganti tulisan http://monozcore.blogspot.com pada kode script di atas dengan tulisan yang sobat inginkan.

Copy-Paste script di bawah ini di antara TAG <Body> Script </Body> atau ditempat yang sobat inginkan pada halaman blog sobat.

<div id="text" style="font-size:large; font-family: 'Courier New', Courier, monospace; letter-spacing:normal; font-weight:bold; font-style:normal; text-align:center; padding-top:15px;">
<script>
for (var i=0; i<msg.length; i++){
document.write("<span id ='colorizer" + i + "'>" + msg.charAt(i) + "</span>");
}
</script></div>
- Silakan anda sesuaikan Style pada kode CSS di atas yang berwarna merah.
- font-size // Ukuran huruf.
- font-family // Jenis huruf.
- letter-spacing // Spasi huruf.
- font-weight // Jenis atribut huruf.
- text-align // Posisi huruf