Skrip Paling Diminati (Bagian 2)

Skrip yang akan saya share kali ini adalah skrip sederhana mengenai teks berputar atau tulisan berputar mengikuti mouse. Tulisan tersebut akan mengikuti gerakan mouse sambil terus berputar. Itu yang pertama. 

Skrip kedua adalah teks bergerak atau tulisan berjalan di Tab Title. Tulisan ini akan berjalan dari kanan ke kiri di tab title (sebelah kiri favicon).

Script ketiga sebenarnya bukan skrip pemrograman tetapi hanya berupa deretan kode HTML yang disertai gambar bergerak dalam format .GIF. Semua animasi gambar bergerak di bawah saya peroleh dari www.sweetim.com.

TEKS BERPUTAR | TULISAN BERPUTAR MENGIKUTI MOUSE
Untuk memasang teks berputar di Blogger caranya sebagai berikut:

1. Login ke Blogger.
2. Masuk ke halaman "Layout" atau Tata Letak.
3. Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript
4. Copy Paste code di bawah. Ganti tulisan "LINKSUKSES.COM" dengan tulisan sendiri kemudian simpan (Save).
   
   <style type="text/css"> #outerCircleText { font-style: normal; font-weight: normal; font-family: 'verdana'; color: #0224FE; position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} </style><br /> <script type="text/javascript"> ;(function(){ var msg = "LINKSUKSES.COM"; var size = 24; var circleY = 0.75; var circleX = 2; var letter_spacing = 5; var diameter = 10; var rotation = 0.4; var speed = 0.2; if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px'; d.appendChild(document.createTextNode(msg[i])); oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })(); </script><br />
   Sumber: CyberWorld

TEKS BERJALAN | TULISAN BERJALAN DI TAB TITLE
Cara memasang teks berjalan di tab title:

1. Login ke Blogger.
2. Sebaiknya lakukan backup template terlebih dahulu untuk jaga-jaga jika terjadi kesalahan.
3. Masuk ke halaman "Layout" (Tata Letak).
4. Cari kode </head> atau </body ...>.
5. Copy Paste code berikut di atas </head> atau di bawah </body ...>.
   
   <script type='text/javascript'> //<![CDATA[ msg = "Tulis Text-1"; msg = " .:Tulis Text-2:. " + msg;pos = 0; function scrollMSG() { document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++; if (pos > msg.length) pos = 0 window.setTimeout("scrollMSG()",200); } scrollMSG(); //]]> </script>
   Sumber: LinggihNote
   
   
6. Pada kode window.setTimeout("scrollMSG()",200); 200 adalah kecepatan teks berjalan, makin kecil nilainya maka tulisan akan bergerak lebih cepat
7. Simpan template dan lihat hasilnya

ANIMASI GAMBAR BERGERAK DI SUDUT BLOG
Di bawah ini adalah beberapa contoh animasi gambar bergerak yang dapat dipasang di blog sobat. Posisi gambar bergerak tersebut dapat diatur sesuai kebutuhan, namun umumnya diletakan di sudut halaman blog yaitu sudut kiri atas, sudut kanan atas, sudut kiri bawah, dan sudut kanan bawah.

Cara memasang gambar bergerak tersebut adalah sebagai berikut:

1. Login ke Blogger.
2. Masuk ke halaman "Layout" atau Tata Letak.
3. Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.
4. Copy Paste kode HTML di bawah setiap gambar yang akan digunakan kemudian simpan (save.)

Gambar bergerak: Hati

<img style="position:fixed; bottom:10px; left:10px; width:50px; height:50px; background-color:transparent; border:none;" src="http://content.sweetim.com/sim/cpie/emoticons/0002043B.gif"/>

Gambar bergerak: Bibir

<img style="position:fixed; bottom:10px; left:10px; width:50px; height:50px; background-color:transparent; border:none; "src="http://content.sweetim.com/sim/cpie/emoticons/000203F8.gif" />

Gambar bergerak: Kiss

<img style="position:fixed; bottom:10px; left:10px; width:50px; height:50px; background-color:transparent; border:none; "src="http://content.sweetim.com/sim/cpie/emoticons/00020239.gif" />

Gambar bergerak: Menangis

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/00020461.gif" />

Gambar bergerak: Bayi

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" />

Gambar bergerak: Angel

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/000203F1.gif" />

Gambar bergerak: Banana

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" />

Gambar bergerak: Bunga

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" />

Gambar bergerak: Fairy Dust

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/00020321.gif" />

Gambar bergerak: Kupu-kupu

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/000206AA.gif" />

Gambar bergerak: Thumb Up

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/000204AE.gif" />

Gambar bergerak: Thanks

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/0002028F.gif" />

Gambar bergerak: Bos

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/0002035A.gif" />

Gambar bergerak: Kipas Angin

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/000203E0.gif" />

Gambar bergerak: Tertawa

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/00020345.gif" />

Gambar bergerak: Bersalaman

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/00020405.gif" />

Gambar bergerak: Bye bye

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/000203D1.gif" />

Gambar bergerak: Hi

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/0002048D.gif" />

Gambar bergerak: Main Bola

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/000200F1.gif" />

Gambar bergerak: You Are The Best

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/000202B2.gif" />

Gambar bergerak: Tupai Lari

<img style="position:fixed; bottom:10px; left:20px; width:50px; height:50px; background-color:transparent; border:none;"  src="http://content.sweetim.com/sim/cpie/emoticons/000206A0.gif" />

Pengaturan Gambar Animasi:

1. Untuk mengnati gambar animasi, ganti kode "http://content.sweetim.com/sim/cpie/emoticons/000202B2.gif" dengan URL gambar pengganti.
2. Kode bottom:10px; left:20px; adalah posisi di kiri bawah dengan jarak 10 pixel dari bawah dan 20 pixel dari kiri, jarak tersebut dapat diubah sesuai keperluan.
3. Untuk mengubah posisi animasi gambar bergerak, ubah kode bottom:10px; left:20px; menjadi bottom:10px; left:10px; (kiri bawah), bottom:10px; right:10px; (kanan bawah), top:10px; left:10px; (kiri atas), top:10px; right:10px; (kanan atas).
4. Kode width:50px; height:50px; untuk mengatur lebar dan tinggi gambar.
5. Kode background-color:transparent; untuk mengatur warna latar gambar animasi.

Sumber gambar bergerak: www.sweetim.com