Berkreasi dengan Cursor di Blog

Berkreasi dengan Cursor di Blog - Pada posting kali ini saya akan mencoba berbagai tips kepada anda tentang bagaimana cara berkreasi dengan cursor agar pembaca ~~sedikit~~ tertarik dengan blog kita :)

Ada tiga tips yang kali ini akan saya bagikan untuk anda yang senang dengan sesuatu yang lucu dan unik yang bisa anda terapkan pada cursor di blog anda. Berikut adalah tips yang sudah saya siapkan :)

Menambah Animasi Teks Melingkar di Cursor
Cara membuat teks bergerak melingkar mengikuti gerakan mouse atau dalam istilah bahasa Inggris dikenal dengan nama "Circling text trail". Teks tersebut akan bergerak melingkar mengelilingi pointer mouse disaat mouse sedang idle. Teks yang akan ditampilkan dapat diatur sesuai keinginan.

Yang perlu dilakukan adalah dengan memasukkan script di bawah ini ke dalam gadget html/javascript.

/* Circle Text Styles */

/*http://www.dynamicdrive.com/dynamicindex13/circletext.htm */

#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>

/* 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 = "Selamat Datang";

/* 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>

Kemudian ganti teks yang bertuliskan Selamat Datang pada script di atas dengan katateks yang akan anda gunakan pada animasi teks melingkar di cursor. Jika kesulitan menemukan kata Selamat Datang, bisa menggunakan fasilitas find pada web browser yang anda gunakan, atau dengan menekan tombol Ctrl + F kemudian isikan kolom find dengan Selamat Datang dan enter, maka teks tersebut akan dengan mudah kita temukan setelah itu ganti dengan teks yang anda inginkan :)

Langkah terakhir adalah Simpan dan lihat hasil blog anda, apakah ada yang berubah dengan cursornya..???

Mengganti Cursor dengan Gambar

Tips yang kedua adalah mengganti cursor dengan gambar yang kita suka. Gambar bisa diganti apa saja, asalkan kita bisa menemukan URL dari gambar cursor tersebut. URL dapat kita peroleh dengan cara mengeklik kanan gambar yang kita pilih, kemudian pilih Salin URL gambar. Nah URL ini yang nantinya akan kita kombinasikan dengan script yang ada pada langkah mengganti cursor berikut:

1. Login blogger anda
2. Masuk ke Dashboard dan pilih Tata Letak
3. Klik Tambah Gadget dan pilih HTML/Javascript
4. Copy Paste script di bawah ini

kode 1: Mengubah cursor tapi tidak mengubah saat menyorot link

body{cursor: url("http://dl8.glitter-graphics.net/pub/330/330658m8v492ivpa.gif"), auto;}

</style>

kode 2: Mengubah cursor walaupun saat menyorot link

Ganti tulisan yang berwarna merah dengan URL gambar anda.

Berikut adalah link kursor koleksi lain (untuk mendapatkan link URL nya, klik kanan pada gambar >> Copy image URL / Salin URL Gambar) :

atau bisa mengunjungi situs ini untuk mendapatkan gambar yang lain :)

Cursor Bertabur Bintang

Berikut adalah tips terakhir bagi anda yang suka berkreasi dengan cursor, yaitu memberi animasi bintang yang bertaburan yang mengikuti pointer saat digerakkan. Langkahnya adalah sebagai berikut:

1. Login blogger anda

2. Masuk ke Dashboard dan pilih Tata Letak
3. Klik Tambah Gadget dan pilih HTML/Javascript
4. Copy Paste script di bawah ini dan Simpan

Bintang Pink
<script src="http://arifinsarpon.googlecode.com/files/mujijayaganesha.blogspot.com_cursor_pink.js" type="text/javascript"/></script>

Bintang Merah

Bintang Biru

Bintang Hijau

Selamat mencoba dan Selamat Berkarya... :)

Sumber: Dynamic Drive, Widget n' Tutorial