Cara Mudah Buat Teks Mengelilingi Cursor

Mungkin bagi anda yang sering browsing tentunya sering pula menjumpai website/blog yang pada cursornya sering terdapat teks yang berputar mengelilingi cursor tersebut. Hal ini dilakukan tentunya dengan tujuan untuk mempercantik blog/web yang sedikit banyak akan berguna untuk menarik visitors agar betah untuk berlama-lama. Berikut adalah kode yang digunakan :

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
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>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "welcome to Rendy's blog";
/* 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 =20;
// 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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>

Untuk memasang kode tersebut masuk pada Tata Letak - Tambah Gadget - HTML/Java Script kemudian simpan. Selamat mencoba !
Silahkan tinggalkan komentar anda dan terima kasih sudah berkunjung.

Related Post About Blog

Membuat menu bar dengan mudah TANPA KODE di blog 
Cara  mudah menampilkan foto profil blog di search engine google
Membuat Chatbox di Blog 
Membuat Link blog bergoyang
Tambahkan Map Globe di Blog anda
Cara mengganti bahasa dashbor di blog
Membuat efek salju berguguran di blog (part I)
Membuat efek salju berguguran di blog (part II)
Daftar kode warna HTML
Mengganti Email Login Blogspot dengan Mudah
Cara mudah membuat teks mengelilingi cursor
Cara mudah membuat readmore di blog
Membuat scroll box dengan mudah di blog
Cara mengetahui page rank blogspot
Cara membuat link terbuka di tab baru
Cara menambahkan link di blog yang baru
Langkah mudah membuat blog
Membuat Spoiler di Blog itu MUDAH
Menambahkan Facebook Fans page/facebook like box di blog

>>Lihat Juga<<

Cara Mudah Membuat Blog
Cara Mudah Membuat Spoiler di Blog/Blogspot
Cara Menambahkan Link pada Blog Terbaru
Mengganti Email Login Blogspot dengan Mudah
Membuat "ReadMore" diBlog/Blogspot
Membuat Scroll Box dengan Mudah di Blog
Cara Mengetahui PageRank Blog/Blogspot
Cara Membuat Link Terbuka di Tab Baru
Membuat Efek Gerakan Sederhana dengan Photoshop
Membuat Kartu Ucapan Selamat Ulang Tahun dengan Photoshop
Membuat Animasi Bergerak dengan Photoshop
Membuat Efek Tulisan Timbul Sederhana dengan Photoshop
Cara Mudah Mendapatkan Banyak Jempol di Facebook
Membuat Efek Salju Berjatuhan/Berguguran di Blog (part I)
Membuat Efek Salju Berjatuhan/Berguguran di Blog (part II)
Daftar Kode Warna HTML
Cara Membuat Lebel Produk dengan Mudah
Cara Mudah Mmebuat Teks Mengelilingi Cursor
Lari Sprint (jarak pendek)
Sikap Start Aba-aba saat Lari Sprint
Sikap Saat Lari Sprint
Manfaat Lari
Cara Tepat Membentuk Perut Six Pack
Jenis dan Type Jerawat
Cara Cepat Menghilangkan Bekas Jerawat Secara Cepat dan Alami
Membuat Bata Press dari Plastik