Tuesday, March 1, 2011

Tutorial 48 : Cursor Bergerak dengan Perkataan

Assalamualaikum. Apa khabar my reader? Hari ini terasa rajin memenuhi permintaan tutorial dari kalian. Nampaknya 3 kali berturut-turut asyik buat tutorial cursor je. Ok kali ini aku nak buat tutorial cursor bergerak dengan perkataan ala-ala cursor terbang. Korang mesti ada tengokkan blog yang buat cursor macam ini. Bila korang gerakkan cursor automatic perkataan pun turut bergerak-gerak macam main layang-layangkan. Korang nak tak main layang-layang dalam blog? Kalau nak jom cuba tutorial mudah bebeno ni. Tengok gambar di bawah kalau tak dapat berfantasi apa yang aku kata tu.

Step yang senang perlu dibuat sebelum wujudnya benda alah di atas ini. Jom-jom..

1. Sign in blogger > Design > Add Gadget > Html/JavaScript
2. Copy code di bawah dan paste ke dalam Html/Java Script

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'verdana';
color: #FF0080;
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">
;(function(){
var msg = "CURSOR SANGAT CANTIK";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
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>


3. Sebelum SAVE tukarlah benda-benda ini dulu ye.

Verdana untuk jenis font.
#FF0080 untuk warna tulisan yang aku buatkan ni warna pink.
CURSOR SANGAT CANTIK gantikan dengan perkataan korang ye.


4. Lepas itu save SAVE dan tengok hasil yang terjadi.

Kalau nak cantikkan lagi cursor boleh cuba Tutorial 47 dan Tutorial 46
Nak tukar warna font boleh tengok code coding kat SINI.

P/s : Dah cuba tutorial ni janganlah malu-malu nak komen. Daaa

38 comments:

  1. nice tutorial..tapi kdg2 nmpk rimas bila kena ikut ngan all words tu. tq for share

    ReplyDelete
  2. leh tak nak ty somethg,kalo nk post msg kat shoutmix tuu cmner ek?

    ReplyDelete
  3. yg kat shoutbox tepi nie
    btw,sudi la singgah my blog,sebab anda di tag,he7

    ReplyDelete
  4. kak farah . awan minta izin copy tuto ye :) terima kasih :D

    ReplyDelete
  5. sys..nk tnye..kala0 nk tuka tulisan tu dgn tulisan laen mcm mane eyh ??

    ReplyDelete
  6. dayana promote tuto farah dekat orang ;)!

    ReplyDelete
  7. To All..

    Lain tutorial akn diupdate kalau ada kesempatan insyaallah..

    Silakan..promote..:)

    ReplyDelete
  8. akak..adik minta izin copy tuto ea..:-)

    ReplyDelete
  9. dah try..jom jenguk my blog...

    ReplyDelete
  10. thx sgt2 hehe cantik sangat

    ReplyDelete
  11. hihih ,, thank you for you tutorial :D i very like it

    ReplyDelete
  12. macam mana nak buang cursor bergerak tu ye?

    ReplyDelete
  13. danbo
    cantik..cuma nak tnya..macam mana pulak untuk klasik template?harap akak dapat bantu saya ._____. terima kasih~

    ReplyDelete
  14. : saya suka !! sebab suka membuatkan bloggie saya comot-momot.. hehehehe..

    ReplyDelete
  15. Thanks kak farah, now mas dh bule buad kursor t0o :D

    ReplyDelete
  16. makasih ya ..berguna banggett!
    visit my blog www.ciciraherani.blogspot.com

    ReplyDelete
  17. macam mana nk delete yg lagu kat youtube tu sebab buat smpai 3 kali so bende tu ade tiga jadi nak delete dua maacam mana ehh




    ReplyDelete
  18. sis...nak tanya mcm mana kalau nak buang balik cara nie ye? mula2 best tapi lama2 rimas pulak hihihii

    ReplyDelete
  19. @leyzajamil

    macam mana eh nak buang perkataan tu balik?? pilssss :(

    ReplyDelete
  20. Terima kasih atas perkongsian..best sangat

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.