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.
Keterangan:
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-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},makecircle = function(){ // rotation/positioningif(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 circled = 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 resistancey[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 arraysif(!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>
✔
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
✔
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.
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
Share This Article :
Posts
