Cara Membuat Tulisan Berjalan Mengikuti Cursor/Kursor - BBT: Cara membuat tulisan berjalan di blog mengikuti cursor menggunakan Html JavaScript (Script Circling text trail) Script tulisan berjalan untuk blogger

Cara Membuat Tulisan Berjalan Mengikuti Cursor/Kursor

Bagaimana cara membuat tulisan berjalan di blog?
Kali ini saya akan menuliskan #cara membuat tulisan berjalan/bergerak mengikuti cursor/kursor dengan menggunakan script tulisan berjalan yang namanya #Script Circling text trail.
Dengan bantuan script tulisan berjalan ini (Script Circling text trail) kita bisa membuat tulisan berjalan/berputar mengikuti cursor/kursor di blog, tulisan tersebut nantinya akan mengikuti kemana cursor di arahkan.
Untuk lebih jelasnya bagaimana nantinya script ini bekerja menampilkan tulisan berjalan di blog silakan lihat dahulu contoh tampilannya.

Cara Membuat Tulisan Berjalan Mengikuti Cursor/Kursor di Blogger

Jika tertarik untuk membuat tulisan berjalan mengikuti cursor di blog blogger sobat, silakan ikuti langkah-langkah berikut:
Pertama silakan login dahulu ke dasbor blogger
Klik menu Tata Letak
Cara Membuat Tulisan Berjalan Mengikuti Cursor di Blog
Klik Tambahkan Gadget (Letak gadget bebas)
Membuat Tulisan Berjalan Mengikuti Cursor di Blog
Pilih/klik gadget HTML/JavaScript
Cara Membuat Tulisan Berjalan Mengikuti Cursor
Masukkan kode Script Circling text trail pada kolom isian (bagian konten) [Gambar saya ambil dari tutorial Cara Memasang Iklan di Blog]
Cara Membuat Iklan di Blog
Klik Simpan
Selesai.

Html JavaScript Tulisan Berjalan Mengikuti Cursor/Kursor

Beikut kode Html JavaScript Circling text trail yang harus sobat masukkan pada kolom isian gadget HTML/JavaScript.
<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #4679BD;/*Ganti warna sesuai keinginan*/
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[
/* 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(){
var msg = "Blog Baca Tulis dot Com"; // Ganti tulisan sesuai keinginan
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;
////////////////////// 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>
Pada kode di atas ada kode untuk warna color: #4679BD;/*Ganti warna sesuai keinginan*/
Dan ada kode untuk tulisan berjalan yang akan mengikuti cursor nantinya
var msg = "Blog Baca Tulis dot Com"; // Ganti tulisan sesuai keinginan
Yang perlu sobat perhatikan / yang perlu diganti hanya kode :
  1. #4679BD ganti dengan warna yang sobat inginkan
  2. Blog Baca Tulis dot Com ganti dengan tulisan yang sobat inginkan
Untuk melihat list kode warna silakan baca :  Daftar kode warna untuk blog.
Selamat mencoba!
loading...
Lihat / Tinggalkan Komentar
Arsip
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Membuat Tulisan Berjalan Mengikuti Cursor/Kursor yang ada di blog ini bermanfaat buat sobat