Cara Menciptakan Goresan Pena Mengikuti Kursor Di Blog Terbaru

Salah satu tips lain untk memperindah dan menciptakan tampilan blog menjadi menarik adalah dengan menciptakan text atau goresan pena bergerak mengikuti kursor di blog. Mungkin sahabat blogger pernah berkunjung pada sebuah blog dan melihat goresan pena bergerak mengarah ke mana saja kursor sahabat gerakkan kemudian kalau kursor didiamkan maka goresan pena tersebut akan terus berputar mengelilingi cursor. Sebenarnya sahabat juga dapat membuatnya setips gampang dengan hnya menambahkan script html tertentu pada blog.

Kali ini aku akan share gimana Trik Membuat Tulisan Mengikuti Kursor Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sahabat yang ingin menciptakan text bergerak / berjalan / berputar mengelilingi cursor pada blog.

Trik Membuat Tulisan Bergerak Mengikuti Cursor :

1. Bikin goresan pena mengelilingi kursor menyerupai diatas adalah dengan tips masuk ke sajian Tata Letak dan klik Tambahkan gadgett

2. Kemudian klik tombol tambah pada pilihan HTML/Javascript

3. Setelah itu masukkan isyarat berikut ke dalam kotak konten menyerupai pada gambar, silahkan ganti script yang ditandai merah dengan isyarat warna (bisa lihat disini) dan goresan pena yang sahabat inginkan, kalau sudah klik Simpan.. Selesai

<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 broser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
yusername:jscheuer1 - This notice must remain for legal use
*/
;(function(){
var msg = "Welcome To My Blog"; // Ganti goresan pena 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,
ymousse = a * circleY + 20, xmousse = 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,
mousse = function(e){
e = e || window.event;
ymousse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmousse = !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] += (ymousse - Y[0]) * speed;
x[0] = X[0] += (xmousse - 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)){
ymousse += window.pageYOffset;
xmousse += 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(){
ymousse += window.pageYOffset;
xmousse += 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('mousseover', mousse, false);
document.addEventListener('moussemove', mousse, false);
if (/Apple/.ujit(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmoussemove', mousse);
};
})();
//]]></script>

4. Berikut adlah tampilan text bergerak mengelilingi kursor pada blog

Nah itulah gimana menciptakan goresan pena mengikuti kursor di blog dengan gampang dan cepat.

Silahkan dicoba