Anda Di : Home » blogger script » blogger tutorial » Cara Membuat Tulisan Mengikuti Cursor

Cara Membuat Tulisan Mengikuti Cursor

Cara Membuat Tulisan Mengikuti Cursor
Gb. Demo Tulisan Berputar

Sudah pernah lihat tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti Cursor di blog blogger?

Tadi saya baru saja berkunjung ke salah satu blog teman yang menulis pesan di buku tamu, di sana saya melihat sebuah tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti kemanapun arah cursor tersebut.

Setelah melihat itu saya jadi ingin untuk menuliskan caranya, siapa tahu ada yang ingin  menghias blog nya dengan tulisan berputar mengelilingi cursor blognya.

Panduan Cara Membuat Animasi Tulisan Berpuatar Mengelilingi Cursor

  1. Login ke dashboard blogger
  2. Klik Tata Letak
  3. Cara Membuat Tulisan Mengikuti Cursor
  4. Setelah itu klik Tambah Gadget
  5. Gadget Tulisan Mengikuti Cursor
  6. Pilih Gadget / Widget HTML/JavaScript
  7. Script Tulisan Mengikuti Cursor
  8. Klik Edit HTML
  9. Tutorial Panduan Membuat Tulisan Mengikuti Cursor
Kemudian masukkan semua script / kode tulisan mengikuti cursor berikut pada widget tadi.
<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999;

/* End Optional */
/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</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(){
// Your message here (QUOTED STRING)
var msg = "A.R Blog (Blogger Tutorial)";
/* 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 = 24;
// 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>
Keterangan :
// Your message here (QUOTED STRING)
var msg = "A.R Blog (Blogger Tutorial)";

silakah ganti tulisan A.R Blog (Blogger Tutorial) dengan tulisan yang anda inginkan, karena tulisan itulah yang nantinya akan berputar-putar mengeliligi cursor.

Bagaimana cara merubah warna tulisan yang mengikuti cursor tersebut ?

Karena ada beberapa teman kita yang menanyakan hal tersebut maka akan saya tuliskan caranya.

Silakan lihat pada bagian atas kode script tulisan mengikuti cursor tersebut, maka kamu akan menemukan kode
color: #999;
Silakan ganti #999 dengan kode warna lainnya yang kamu suka (ingat hanya kode #999  yang diganti). silakan temukan kode warna yang kamu suka di Daftar Kode Warna

Update tgl 16 November 2011 (penambahan gambar)

Update tgl 16 Desember 2011 (Update Kode Script)

Terakhir Di Update Pada 26 April 2012
Tags: ,

Jangan Lupa Like dan share artike Cara Membuat Tulisan Mengikuti Cursor ini ya.

New Tutorial :
Cara Membuat Tulisan Mengikuti Cursor

Tentang Admin

Hanya seorang blogger biasa yang ingin mencoba menulis apa saja yang bisa di tulis, baik seputar tutorial blog, blogger template, dsb.

Berlangganan via RSS Feed

Mau baca artikel terbaru langsung di Email kamu? Silahkan masukan alamat email kamu untuk berlangganan artikel baru. (GRATIS!!!)

Jangan lupa konfirmasi di Email Kamu.

Saat ini kamu sedang berada di halaman Cara Membuat Tulisan Mengikuti Cursor, di bawah ini ada beberapa artikel lainnya yang mungkin ingin kamu baca, terimakasih atas kunjungannya.

50 komentar

  1. susah kali membuatnya kk..
    bingung ne.
    kenapa gak bsa..

    Harap di balaz

  2. kok gak bisa
    udah capek di tes nya
    balas

  3. Artikel sudah saya sertakan gambar, silakan di coba lagi.

    Jika tulisan berjalan mengikuti cursor nya belum bisa juga maka kemungkinan template punya bos ada script yang membuat script tulisan berjalan mengikuti cursor nya tidak bekerja.

    Terimakasih

  4. thx tipsnya, terus cara merubah warna teksnya bgm?

  5. gan itu sebelum kata body nya itu di hapus semua terus ganti dengan script nya di atas ato bagaimana ??? btuh penjelasan

  6. Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The entity name must immediately follow the '&' in the entity reference. solusinya gimana kang..?

  7. @Cipta Karya Mandiri : Script sudah saya update dan sudah saya tes, silakan gunakan script yg baru ini

  8. terima kasih,.Sukses
    http://alirankiri.blogspot.com/

  9. kalo Your message here (QUOTED STRING)
    ganti apa ?? ga bisa2 nihh

  10. @Kevinn : Sesuai dengan yang sudah saya tulis, yang di rubah adalah tulisan = A.R Blog (Blogger Tutorial)

    Sedangkan bagian Your message here (QUOTED STRING) tidak perlu di rubah

  11. makasih gan sukses blog gua lihat ajha sendiri gan.......
    http://cyberniutron.blogspot.com/

  12. makasih gan,,.. follow aku juga ya...hhe
    inteksol.blogspot.com q tunggu gan..

  13. makasih gan,.,.,
    sangat mudah dalam penggunaan,.,,,.
    ada yg lainnya nda,.,.,.

  14. Makasi brow, gampang ternyata, berguna banget inpo nya.

  15. makasih infonya ..... gan izin sedot....

  16. Saya nggak tau bakal berhasil apa nggak tapi yg pasti akan saya coba dulu. Makasih banyak tutorialnya. Lengkap bangt. Salam kenal

  17. bingung nih..
    blog punya ku ku kok tampilanya beda ya???
    apa caranya beda juga???
    tolong tutorialnya pakek tampilan yg baru!!!
    trima ksih

  18. @annas mukhlisuddin Insya'Allah besok saya tuliskan dimana letak edit html pada blogger baru.

  19. kalau blog yang versi baru gimana kak?
    balas ya kak

  20. @My Blog^^ Ok deh ntar saya tuliskan tutorial baru, sabar ya.

  21. itu ngeletak kan script nya dmn?

  22. makasihh lho yaaa . . . bener2 guampanggg . . :)

  23. gimana cara ganti warnanya zob,,thanks...

  24. makasih sob, berbagi link yuk

  25. mas bro, bisa ga text'a di gnti wrna.??
    biar ccok sma template'a . klo ada tlong ksih y gan.

  26. aq jg mw naya cara ganti warna
    soal teks berputar itu krn kecelakaan, sbnrnya aq cari cara hapus tp setelah di amati keren jg, PUNYAKU WARNA BIRU, APA KALIAN SAMA

  27. tulisan yg panjang itu di copy yhh?...



    balas:

  28. makasih ya atas caranya ini ........
    makasih banyak deh pokoknya

  29. Terima kasih gan..mantap
    mohon copas ya gan..

  30. Sukses gan ! Sipp !
    Makasi gan :D

  31. makasihh.. sangat bermanfaat

  32. GAN MAKSI BANGEEET ILMUNYA YAA..SMOGA ANDA TAMBAH SUKSES.

  33. Thanks gan....
    ane sudah bisa..!!

  34. Tks bgt Bro and sangat kreatif sekali....izin nyedot tanpa ngurangi isi dan linknya....

  35. Hai... Salam kenal Semua...

    Masih ada yang tidak faham?
    Silahkan Kunjungi My Site education, dengan konsep pembelajaran yang sengaja dibuat agar yang belum bisa menjadi sangat bisa.

    Dengan berbagai Tahap-tahap tertentu.

    Silahkan Pelajari Cara membuat animasi Teks yang memutari/mengikuti Cursor.

    Cara membuat Efek Teks memutari Cursor diBlog.

  36. makasih bang,,,info nya,,,gmpang d mengerti,,,sangat membantu sya yg msih awal ni,,,,,,

  37. its work...thanks ilmunya :)

  38. waahhhhh .. tipsnya keren amet !!! akku udah coba .. :) makasihh ya ..