loading...

Pasang Script Kursor Ular-Ularan

Sebenarnya banyak sekali rupa serta bentuk animasi kursor yang mungkin kamu dapatkan, baik melalui website penyedia layanan javascript atau saat kamu blog walking. Ceritanya pas jalan-jalan ke Optimasi Blog dan menggerakkan kursor, tiba-tiba muncul serangkaian kata atau kalimat yang selalu mengikuti kursor tersebut. Bentuknya seperti ular-ularan meliuk dan melingkar, tapi anehnya tidak mematuk. Ia cuma mengikuti saja atau istilah kerennya "follow". Eh.. ngomong-ngomong follow, kamu sudah ikut mem-follow OB apa belum?

Kembali ke trik blogger kursor ular-ularan...
Nah, kamu pasti penasaran tentang cara membuatnya. Ngga, tuh!!! Ha.. ha.. gitu aja manyun. OK, ini dia triknya.
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari kode </head>
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
  • Kalau sudah ketemu, copas kode berikut diatasnya.
<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Masukkan teks kamu disini";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

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>

Catatan :
  1. Ganti kode yang berwarna merah berturut-turut dengan gaya teks, tebal tidaknya teks (bold atau normal), jenis font (arial, times new roman, verdana, georgia, de-el-el), dan warna teks
  2. Ganti tulisan yang berwarna merah dan berkedap-kedip dengan teks yang akan kamu tampilkan (mengikuti kursor).
  3. Ganti kode yang berwarna hijau, apabila kamu ingin merubah ukuran teks.
  • Jangan lupa disimpan.

Selamat main ular-ularan...

42 komentar untuk “Pasang Script Kursor Ular-Ularan”

  1. keren banget mas!! thanksssssssssss

    BalasHapus
  2. Iseng-iseng ternyata bagus juga, thanks ya...

    BalasHapus
  3. mas, bisa gak ngubah warna teksnya, soalnya background saya warna hitam.

    BalasHapus
  4. mas, bisa gak ngubah warna teksnya, soalnya background saya warna hitam.

    BalasHapus
  5. waww! what a nice new cursor!!;;)
    @rombak : lo ubah kode warnanya aja! gue juga ganti warnanya jadi warna merah.. lo liat deh hasilnya disini
    ;)

    BalasHapus
  6. to Rombak Vista mU: Posting telah diupdate, silakan review kembali terutama pada paragraf terakhir "Catatan"

    BalasHapus
  7. thanks brow... kini q dah punya tulisan ular...
    succes for you

    BalasHapus
  8. kalo yang modelnya lurus mengikuti mouse gimana..? maksudnya tidak harus melingkar pada saat mousnya diam. Soalnya terlalu rame..

    BalasHapus
  9. to Andali: Trik ini khusus membuat teks menjadi melingkar, tapi klo lurus OB ngga tahu. Soalnya berkenaan dengan bahasa javascript yang belum OB kuasai

    BalasHapus
  10. wau mantap kali, makasih ats kerjasama dan informasinya

    BalasHapus
  11. hehe...mas,makasih yaw... ru aj copas trik na, lucu dech , tp ko' muter na terlalu cepet y.. tapi thanks buanget yaw...;;)

    BalasHapus
  12. thanks.......................

    scptblog.blogspot.com

    BalasHapus
  13. infonya bagus kretive bisa di coba nich

    BalasHapus
  14. terima ksih buaaaaaaaanyak yo mas,,,? kalau kebanyakan ambil aja?

    BalasHapus
  15. makasih banyak bro, banyak trik yg udah q cba tp gagal semua, setelah pakai tips ini baru berhasil!!!! :))

    BalasHapus
  16. template nya bagus dari mana tuh ?

    BalasHapus
  17. keren.., langsung coba....thanks bos.

    BalasHapus
  18. salam kenal, kunjungi balik

    BalasHapus
  19. thanks ya mas,,kerennnnn!!!!!!!!

    BalasHapus
  20. Mantap nih kayanya bang..bs langsung di coba ni hehehehe

    BalasHapus
  21. WALAH KRUSORKU USER USERAN TENAN KANG...........asiiiiik....thenk...kang =))

    BalasHapus
  22. One stop place to find best yamaha portable generators with best price and offer more than 35% Off

    BalasHapus
  23. ikut acchhhhh.....
    thx infonya....

    BalasHapus
  24. rek ini blog saya, di follow yach!!!
    http://kerabat15.blogspot.com/

    BalasHapus