Cara Membuat Cursor Di Ikuti Teks atau Tulisan Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

2RIS1 Gamers 22 - Pada kesempatan ini 2RIS1 akan berbagi trik kembali tentang artikel yang berhubungan dengan pernak-pernik blog, yaitu Cara Membuat Cursor Di Ikuti Teks atau Tulisan Di Blog.

Cara Membuat Cursor Di Ikuti Teks atau Tulisan Di Blog

Efek dari trik yang saya share ini adalah sebuah teks atau tulisan akan mengikuti kursor mouse ketika kursor mouse di gerakkan ke arah manapun dalam blog. Teks atau tulisan yang mengikuti kursor mouse ini mempunyai efek berputar serta mengikuti arah kemanapun kursor mouse akan digerakkan.

Hebatnya lagi, teks atau tulisan yang mengikuti kursor mouse dalam blog ini bisa di ganti dengan teks atau tulisan seperti yang sobat inginkan, warna dari teks juga bisa di atur sesuai dengan keinginan sobat.

Meski telah banyak yang membahas tentang CaraMembuat Cursor Diikuti Teks atau Tulisan Di Blog, namun tidak ada salahnya saya sekedar mengingatkan kembali tentang Cara Membuat Cursor DiIkuti Teks atau Tulisan Di Blog yang satu ini demi menyempurnakan artikel demi artikel yang saya buat.

Buat kalian yang penasaran & tertarik nih, dan ingin segera membuat dan memasang Cursor Di Ikuti Teks atau Tulisan Di Blog sobat, silahkan ikuti langkah-langkahnya sebagai berikut :

1.      Langkah yang pertama. Silahkan sobat >> Masuk / Login >> ke Blogger.com menggunakan akun sobat.

2.      Pada Dashboard tampilan blogger baru, pilih dan klik Menu >> Tata Letak >> pilih posisi dan klik >> Tambah Gadget >> pilih >> HTML / JavaScript lalu klik tanda +

3.      Kemudian silahkan sobat copy semua Kode Script dibawah ini kedalam kotak HTML / JavaScript.

<style type="text/css">

/* Circle Text Styles */

#outerCircleText {

/* Optional - */

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #0033CC;

/* End Optional */

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

;(function(){

// Your message here (QUOTED STRING)

var msg = "Welcome to 2RIS1 Gamers 22";

// 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 = 15;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)

var rotation = 0.2;

// 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.9;

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>

Keterangan:

✔ Welcome to 2RIS1 Gamers 22 adalah teks / tulisan yang mengikuti cursor, silahkan ganti dengan Teks atau tulisan sesuai yang sobat inginkan.

✔ #0033CC adalah Kode warna teks / tulisan yang mengikuti cursor, silahkan ganti dengan kode warna yang lain sesuai dengan keinginan sobat. Kode warna HTML bisa di lihat pada Hex Color Code Generator & FLAT UI COLOR.

✔ 24 adalah ukuran teks / tulisan untuk membentuk oval / lingkaran, silahkan ganti dengan ukuran yang sobat inginkan.

✔ Angka 0.2 adalah kecepatan putaran teks / tulisan silahkan sobat ganti dengan angka yang lain sesuai dengan keinginan sobat.

✔ Angka 0.9 adalah kecepatan teks / tulisan untuk membentuk oval / lingkaran, silahkan sobat ganti dengan angka yang lain sesuai dengan keinginan sobat.

✔ 15 adalah diameter bentuk oval / lingkaran teks atau tulisan yang mengikuti cursor, silahkan sobat ganti dengan ukuran diameter sesuai dengan keinginan sobat.

Selamat bagi sobat yang sudah berhasil membuat dan memasang Cursor Di Ikuti Teks atau Tulisan Di Blog. Jika sobat menemui kesulitan, silahkan bertanya pada form komentar yang sudah tersedia dan jika ada waktu luang saya akan dengan senang hati membalasnya.

Baca Juga : 3 Macam Widget Label Kategori Responsiv

Demikian tutorial ringan tentang trik Cara Membuat Cursor Mouse Di Ikuti Teks Atau Tulisan Di Blog yang telah saya share, semoga bisa bermanfaat untuk sobat 2RIS1Gamers 22 semua. 

Sourse : 2RIS1 Gamers 22

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Authors : *2RI$1* TURISWAN
Terimakasih Anda telah membaca tulisan / artikel di atas tentang :
Judul : Cara Membuat Cursor Di Ikuti Teks atau Tulisan Di Blog
Rating : ★★★★★ 5 100% based on 999999 ratings. 10 user reviews.
Ditulis Oleh : Unknown
Semoga informasi mengenai Cara Membuat Cursor Di Ikuti Teks atau Tulisan Di Blog bisa memberikan manfaat bagi Anda. Jangan lupa Komentar Anda sangat dibutuhkan, di bawah ini.

Subscribe Untuk Mendapatkan UPDATE Artikel Terbaru!

Enter your email address:

Like This Article :

Share This Article :

Authors : Unknown

Akun Media Sosial :