DON'T LIKE ME

Cara Membuat Tulisan mengikuti Cursor


 ----------------------------------------------------------------------------------
Posting kali ini Blog tutorial lagi, tentang cara membuat tulisan mengikuti icon cursor ya sebagai berikutlah langkah-langkahnya:

Login ke Blogger
Klik Rancangan ( Yang dulunya Tata Letak )
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget ,
Kemudian cari kode </head>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).
Kalau sudah ketemu, Copy Paste kode berikut dan letakkan diatasnya.


<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000ff; /* warna huruf */
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[
;(function(){
// Your message here (QUOTED STRING)
var msg = "THE LOLA GENERATION"; /* tulisan yang muncul */
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20; /* ukuran huruf */
// 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 = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// 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.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>

Yang berwarna HIJAU adalah warna Tulisannya
Yang berwarna BIRU adalah tulisanya tinggal ganti dengan tulisan anda

By : Bang Udin 
 





----------------------------------------------------------------------------------
Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel
----------------------------------------------------------------------------------
Postingan Baru :


Comments
15 Comments

15 komentar:

Anonim mengatakan... Reply To This Comment

wah mantapeuy tulisannya bisa melayang ketika mouse di gerakan.....
mantap ne sangat berguna euy....

Joyo Plencing mengatakan... Reply To This Comment

maturnuwun ya bos,blogku sekarang mulai tmbh keren aja,hheee...pokoke mksh bgt,klo sempet mampir ya

filemmove mengatakan... Reply To This Comment

Mang Juhai : makasih coba aja.
JOJO : tanks juga sahabat dah berkunjung dan komentar... saya sudah mampir di blog sobat...

Gudang Informasi mengatakan... Reply To This Comment

tanks tutorialnya..

fcorp21 mengatakan... Reply To This Comment

siang bang...blognyaudah ane follow...follow back donk...trims moga sukses...
www.fcorp21.blogspot.com

FCORP21 mengatakan... Reply To This Comment

haha...tutorial abang yang tulisan ngikutin kursor malah ane jadiin walpaper...cursor desktop ane jadi diikutin hurup2...thx dech tutorialnya...
www.fcorp21.blogspot.com

filemmove mengatakan... Reply To This Comment

fcorp21 :
tanks ya udah follow me saya sudah follow sahabat juga tanks....

filemmove mengatakan... Reply To This Comment

FCORP21 :
ya sama ya ...senang bisa membantu sahabat....baca juga tutorial lainnya.

FCORP21 mengatakan... Reply To This Comment

gan, kok blog ane belum dfollow, katanya udah...kok gk ada ya...blog agan udah ane follow,nih...back donk...

filemmove mengatakan... Reply To This Comment

FCORP21 : sahabat saya sudah follow ko cek aja follower no 6... tanks ya sahabat.

Putri Sulung mengatakan... Reply To This Comment

Bang Udin makasih banyak Sudah membuat motivasi saya untuk belajar blog dengan semangat...
abis tutorialnya kren2..kasih info lagi bang yang baru tanks ya.

FREEDOM FOR WHAT mengatakan... Reply To This Comment

follow number 677 success gan,,,,,

Laurensiana M. Renny mengatakan... Reply To This Comment

Ma kasih banget buat semua info'y bg....,,sy baru belajar ngeblog ni n info tentang ngeblog kebanyakan semua sy dapat dari bg udin,, ma kasih ya..

sarwenda mengatakan... Reply To This Comment

infonya mantap sekali bang udin.. tanks banyak dah sharing me... makasih bang jangan upa kunjungin saya balik..

jinkinjeng mengatakan... Reply To This Comment

berat sob pasang gituan, terus jga mengganggu banget kalo kita baca artikel,

Posting Komentar