cara membuat kursor di ikuti tulisan/text pada blog

                                                    

Cara pemasangan kode kursor mouse di ikuti teks di blog sangatlah mudah, Karena sobat hanya akan memasukkan kode script pada kotak HTML/JavaScript dalam Tata Letak blog. Dan tentunya sobat tidak usah susah-susah untuk Edit HTML dalam Template blog sobat yang mungkin akan jadi sangat rumit dan memakan banyak waktu.

 Jika sobat tertarik ingin membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog sobat, Silahkan ikuti langkah-langkahnya sebagai berikut:

1. Langkah yang pertama. Silahkan sobat >> Masuk/Login >> ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >> pilih posisi dan klik >>Tambah Gadget >> pilih >> HTML/JavaScript lalu klik tanda +
3. Kemudian silahkan sobat masukkan semua Kode Script berikut kedalam kotak HTML/JavaScript.

                                                                                                                                                                                                         

<style type="text/css">
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF0000;
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">
;(function(){
var msg = "Blog Kucopas";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;

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>

                                                                                                                                                                                                     

4. Langkah yang terakhir. Setelah sobat selesai masukkan semua kode script kedalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya pada semua halaman blog sobat, Kursor mouse akan di ikuti teks kemanapun arah kursor di gerakkan pada halaman blog sobat.

Keterangan:

• #FF0000 adalah Kode warna Teks atau tulisan yang mengikuti kursor mouse, Silahkan sobat ganti dengan kode warna yang lain sesuai dngan keinginan sobat.

• Warna BIRU adalah Teks yang mengikuti kursor mouse, Silahkan ganti dengan Teks atau tulisan seperti yang sobat inginkan.

                                                               tolong tinggalkan komentarnya                                                                                         

Artikel Terkait:

tutorial blogger

• cari template klik disini
• Apa Itu SEO?
• Apa Itu JavaScript
• Kelebihan Dan Kekurangan Blogspot dan Wordpress
• Cara Memberi Password Pada Winrar
• APAKAH BLOGGER ITU PAHLAWAN?
• Cara Memasang Tukeran Link Otomatis Dengan Mistery Linky's Magic Wizard
• efek loading blog dengan animasi keyfames
• 9 Cara Membuat Loading Blog 300% Lebih Cepat
• Cara Memasang Tombol Back to Top diatas Footer pada Blog
• Cara Scan Blog dan Website dari Virus dan Malware
• EFEK SHADOW PADA TEXT DENGAN CSS
• Loading Blog dengan Keyframes dari Bawah ke Atas
• menu blog dengan CSS
• CARA MENGUBAH "JOIN THIS SITE" DENGAN GAMBAR FOLLOWERS 999999999
• cara membuat menu berbentuk lingkaran
• Membuat Efek Sliding
• cara membuat tooltip di blog
• cara membuat read more dan add coment
• cara membuat menu navigasi
• cara membuat gambar poting berputar saat di sorsot mouse
• Pentingnya & Manfaat bahasa inggris bagi seorang blogger
• Pengertian Tentang Komentar Kentut Pada Blog
• Cara Membuat Kotak Judul Postingan Jadi Menarik
• Cara Memasang Embed Link di bawah Postingan Blog