New..!! AhmadBj Blogs Was Reborn..!! Visit US..!!

Adsense

Cara membuat tulisan berjalan mengikuti cursor pada blog

Cara membuat tulisan berjalan mengikuti cursor pada blog adalah salah satu dari trick mempercantik Blog, karna bisanya kalau cursornya ada tulisan yang mengikuti nya itu akan membuat pengunjung betah,
tahu gak kenapa ??


karna memungkinkan pengunjung untuk memainkan cursor pada blog yang ada tulisan yang menikuti nya
#jhahahaaa pengalaman heheheee


untuk melihat seperti apa sih Cara membuat tulisan berjalan mengikuti cursor pada blog, bisa anda lihat Demonya , klik tombol DEMO



oke sudah liatkan ??

saya tau pasti dalam fikiran anda terhadap saya begini
"ini pemilik blog banyak basa basinya lama banget bikin gue kesel"

hehheee bener gak ??

ya udah kalau emang begitu kita langsung sajah masuk ke tutorialnya

  • Login ke Blogger (Dasboard)
  • KLIK Rancangan/Design
  • kemudian menuju Elemen Laman
  • Klik add Gadget
  • pilih HTML/javascript
  • copy paste script di bawah ini
  • simpan/save
  untuk melihat script klik tombol  SHOW di bawah ini



<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'calligraffitti', verdana, arial;
color: #0000ff;
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 = "Ahmad Bj Blogs";
/* 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;
// 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.3;
// 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.2;
////////////////////// 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>




Catatan:
              *ganti tulisan Ahmad Bj Blogs dengan tulisan yang anda inginkan



oke sobat semoga blog ente semua semakin cantik,
sebaik baiknya pengunjung adalah pengunjung yang selalu memberikan komentar pada artikel yang di bacanya,
coment ya nanti saya kunjungi balik

110 Responses to "Cara membuat tulisan berjalan mengikuti cursor pada blog"

  1. oke makasih atas kunjnganya pasti ane kunjngin balik gan

    ReplyDelete
  2. keren banged ilmu blog nha... , lihat blog aku yaaa...rikayui.blogspot@gmail.com &kalo di blog bisa saling temenan add friend ya,. jd gusah cari blog km buat belajar ilmu lain. makasi..

    ReplyDelete
  3. ok gan makasih ya dah berkunjung,,, :)

    ReplyDelete
  4. makasihh
    asiikkkk blognya
    kunjungi blog ane ya gan
    http://ananda9mei.blogspot.com/

    ReplyDelete
  5. oya khn udah kedasbor trus gak ada bacaan rancangan/design pusing itu ada nya dimana ?tolong dongk kasih tau maklum baru pemula

    ReplyDelete
  6. ohahaha.. Shira wong indramayu toh.. sama bari kita ya.. wes salam kenal bae bari kita (Vie Chan). Artikel'e bagus pisan , tapi ana sing kita'e bli ngerti kuh, Priben sih nambahaken gambar kakasi kaya di blog shira kuh? trus priben nambahi text bergerak'e di atas'e? wis gah jawab, sing siji bae kita weru'e ^^, jelasaken sing gamblang ok ^^

    ReplyDelete
  7. woww keren makasih yaa infonya :D

    ReplyDelete
  8. waduh sma" orang IM ya nih... nih script kakasihnya tpi gk bsa lewat koment sini ajh email km nya nanti aq kirim lewat email

    ReplyDelete
  9. terimah kasih baget gan blog ane:
    pasti-bisa-tangerang.blogspot.com

    ReplyDelete
  10. terimaksih ats infoNya..

    jgan lupa kunjungi blog sederhana q yaaa
    http://mellyzahra20.blogspot.com/

    ReplyDelete
  11. cara buat yang warna biru jatuh jatuh itu gimana sih?

    ReplyDelete
  12. WAH...MANTAP ABISSSS..
    MAKASIHNYA...

    ReplyDelete
  13. -kemudian menuju Elemen Laman
    -Klik add Gadget
    -pilih HTML/javascript
    saya kurang mengerti mas , add gadget itu ada dimana? saya buka laman tp tdk ada add gadget ?
    mohon penjelasannya lg , trima kasih :)

    ReplyDelete
  14. makasih , ?? ya ??
    atas saran eh , salah ... -_-
    kunjungi blog saya oke?
    http://eunhyuksujucute.blogspot.com/

    ReplyDelete
  15. makasih infonya . tapi blog saya udah kebanyakan hiasan takut jadi berat -__-

    ReplyDelete
  16. Mksih Atas INfo nya , ouh yh Klau mau di ganti jdi warna pink gmana yh ?

    ReplyDelete
  17. kenapa ya di blog saya ga' ada "pilih HTML/javascript" di add gadget ?
    makasih sebelumnya

    ReplyDelete
  18. Langsung ke tkp jgn lupa bos kunbalnya di http://penginapanislami.blogspot.com

    ReplyDelete
  19. Ahahay...blog saya jadi keren^^tengkyuuu yah

    ReplyDelete
  20. mantab nih gan...
    http://theblogfiryal.blohspot.com/

    ReplyDelete
  21. brow makasi ya, posting anda memberikn z bnyk manfaat...

    ReplyDelete
  22. terima kasih ya atas info dan bantuannya

    ReplyDelete
  23. thx
    http://fahmitechno.blogspot.com/

    ReplyDelete
  24. wah.. keren.. ntar di coba deh... thx ya..

    ReplyDelete
  25. thanks mas bro infonya... bermanfaat banget jangan lupa kunjugin blog saya y
    http://altasyadanti.blogspot.com/
    thanks mas bro... jgn lupa kunjungi yah

    ReplyDelete
  26. kunjungi farish-areim.com gak ya.following gue lau sudi

    ReplyDelete
  27. trims dech trik-triknya, sangat membatu dalam mempercantik blog saya.

    ReplyDelete
  28. trims trik-triknya, sangat bermanfaat untuk mempercantik blogku..

    ReplyDelete
  29. bustamins.blogspot.comJanuary 28, 2013 at 7:05 PM

    thanks' triknys....

    ReplyDelete
  30. mantab good bekerja banget makasih banget yaa
    kunjungi aku di
    http://naafigozzndeso.blogspot.com

    ReplyDelete
  31. thank ilmunya ya gan
    mampir dulu di http://cord-online.blogspot.com/

    ReplyDelete
  32. dimana sih bisa nemuin rancangan/desainnya?
    bingung gw

    ReplyDelete
  33. Tq Gan... Liat Blog Saya Gan
    www.thefallen-avenged.com
    kalo bisa kasin saran ya
    jgn lupa Join ^^

    ReplyDelete
  34. terimakasih gan ,, bermanfaat banget ,,
    semoga rame aja blog ny ya gan ?
    :)

    ReplyDelete
  35. Klo cara buat cursor yg kyak blog ente yg ini gmn gan ?

    ReplyDelete
  36. ciamik gann....makasihh banget tuh info, ane tunggu ya mampir dickyslimdick.blogspot.com

    ReplyDelete
  37. mkasih atas info nya ea gan
    comen blek ea gan
    http://topnewssoccer.blogspot.com/

    ReplyDelete
  38. caakeepp thankss ya

    jangan lupa nii link blog ane
    http://radonita.blogspot.com/

    kunjungi and follow yaa
    aku bakal follow kamu juga

    ReplyDelete
  39. kk ahmad gmnasih cara kasih template blog kya blog http://ahmadscheaterlostsaga.blogspot.com/ jawab please

    ReplyDelete
  40. mantap gan..cocok tuk blog ane..
    kunjungi blog ane di:http://bloggerasmuri.blogspot.com

    ReplyDelete
  41. matur nuwun kang , informasinya jadi nambah ilmu nih.

    ReplyDelete
  42. thx a lot yaa gan atas share ilmunya,sangat membantu bgt... maju terusss...buat agan2 yg blom pada nikah atau mo nikah lagi..hehehe..jangan lupa ya kunjungin jg ane punya blog~>> http://nanaifah.blogspot.com/

    ReplyDelete
  43. THANK GAN !!!
    mampir ya !!!
    BARU BELAJAR BLOG NIH :D
    http://denipesat.blogspot.com

    ReplyDelete
  44. mantap... makasih informasinya...

    ReplyDelete
  45. makasih ya infonya,jangan lupa kunjungi blog ane
    http://terdampar2.blogspot.com/

    ReplyDelete
  46. okey trims...
    kode warna ada gak ya..

    ReplyDelete
  47. keren em template pa alamat ny bgi donk

    ReplyDelete
  48. makasi y kk atas pemberitahuannya

    ReplyDelete
  49. Makasih sob keren bget,,sukses terus

    ReplyDelete
  50. gan itu yang di atas semua HTML si copy tolong di jawab ya gan

    ReplyDelete
  51. Follow Back ya mas

    http://www.obitosasuke.blogspot.com

    ReplyDelete
  52. tapi warnanya biru,, apa ga bisa di ubah tu mas?

    ReplyDelete
  53. makasih infonya, sangat membantu

    ReplyDelete
  54. makasih gan, work!!
    kunjungi Blog saya!
    http://dikagood.blogspot.com/

    ReplyDelete
  55. ini yg ane cari gan.. (Y)

    Thank's gan

    ReplyDelete
  56. thqs gan, tingkatkan lagi.

    ReplyDelete
  57. mkasih gan,,,kunjungi blog kami ya ,,
    harmonyfamilykaraokecafe@gmail.com

    ReplyDelete
  58. wah thanks tips nya~
    boleh saya copas kan ya~ :D

    ReplyDelete
  59. Bisa diganti gak sih warna tulisannya?

    ReplyDelete
  60. terimakasih banyak gan sudah memberi ilmu.. semoga bermanfaat,,
    gubukaryaku.blogspot.com

    ReplyDelete
  61. sip banget gan. buat tugas sekolah buat blog nilaiku jadi bagus ...
    kunjungi blogku ya.. sofiyahsophie.blogspot.com

    ReplyDelete
  62. siip banget gan. ngerjain tugas buat blog jadi lebih menarik. kunjungi blogku ya... sofiyahsophie.blogspot.com

    ReplyDelete
  63. makasih ya...tutorialnya sangat bermanffaat :)

    ReplyDelete
  64. Sip gan postingnya buat tugas buat BLOG
    kunjung balik Ya..... :)

    ReplyDelete
  65. Ko setiap di simpan gak bisa mulu ya, mohon kerja samanya.
    apakah langkahnya bener nih yang saya lakukan blog-->tata letak-->tambahkan gadget-->html/java script. terus kalau nge paste kode itu di judul apa di kontennya? tapi saya nge pastenya di konten tanpa ngisi judulnya, tapi pas saya simpan ko ga bisa??

    ReplyDelete
  66. Bila saya copy ini saje yang keluarnya. kenapa ya? Read more: http://ahmadbjblogs.blogspot.com/2012/08/cara-membuat-tulisan-berjalan-mengikuti.html#ixzz3t7zUZKbR

    Copy the BEST Traders and Make Money : http://bit.ly/fxzulu

    ReplyDelete

untuk berkomentar:
1. setelah Anda membaca artikel ini anda wajib komentar
2. komentar anda sangat saya harapkan
3.komentar anda sangatlah penting demi kemajuan blog kita
4. komentar anda bagaikan berlian yang tak ternilai harganya
5. Cantumkan link blog anda apabila anda berkomentar, agar blog anda ikut naik trafic nya

Followers

Like Us On Facebook