Cara Membuat Tulisan Berjalan Mengikuti Kursor di Blog

Untuk mempercantik tampilan halaman blog dan menarik pengunjung Agan-agan bisa membuat sebuah tulisan yang berjalan mengikuti kemana gerakan Cursor dari mouse berjalan sehingga kelihatan hidup halaman blog Agan semua. Untuk lebih jelasnya langsung simak aja cara dibawah ini.

Cara membuat text mengikuti Kursor:
  1. Pertama-tama Log In terlebih dahulu ke account Blogger Anda.
  2. Setelah itu klik Tata Letak >  Klik Add Gadget > HTML/JavaScript.
  3. Copy Script dibawah ini dan paste Pada gadget.
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
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 = "Tulis teks anda disini";
/* 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>

    4. Save/Simpan dan lihat hasilnya.


NB: Sobat dapat mengganti jenis dan warna font. Tulis teks yang anda inginkan pada “Tulis teks disini” yang berwarna merah. Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.

Related Posts:

46 Responses to "Cara Membuat Tulisan Berjalan Mengikuti Kursor di Blog"

  1. thanks info'x gan, bermanfaat sekali bagi saya ..

    ReplyDelete
  2. thaks yah atas semua tulisannya, semoga bermanfaat, nice post

    ReplyDelete
  3. trims sob.. membantu banget.

    ReplyDelete
  4. thnx sob, gwe coba di blog gwe http://puji-share.blogspot.com

    ReplyDelete
  5. sungguh tulisan yang sangat menambah info dan pengetahuan, terimakasih bnyak yah, salam kenal. thaks

    ReplyDelete
  6. cool topic and well written article, I really like your site and will be reading it a lot more!

    ReplyDelete
  7. Makasih Gan Infonya Saya Coba Gan Salam Kenal ......
    Furniture Jepara

    ReplyDelete
  8. wah info menarik nih, saya coba dulu sob :) ditunggu kunjungan baliknya ke blog newbie saya www.713devils.blogspot.com

    ReplyDelete
  9. thaks for sharing, i like your post because very very goods, nice post

    ReplyDelete
  10. KUNJUNGI www.webtekhnologi.blogspot.com

    ReplyDelete
  11. Q_reeeenn bgt..........mksh sob

    ReplyDelete
  12. terimaksih, gue udah nyobain neh.... :))

    ReplyDelete
  13. sangat bermanfaat makasih ya informasinya pengen nyobain nih

    ReplyDelete
  14. terima kasih .. saya sudah coba dan berhasil se x lagi TERIMAKASIH buat bang Arief Budiyanto

    ReplyDelete
  15. Niche sharenya sobt, udah ane coba buat blog saya, tambah keren deh, hehe

    ReplyDelete
  16. mau ane coba kawan tutornya
    http://acemaxs31.com/obat-herbal-hernia-ampuh/

    ReplyDelete
  17. thanks ya udah gue coba keren banget min

    ReplyDelete
  18. gan ane kok gak muncul tulisannya padahal sdh betul
    mohon pencerahanya:D

    ReplyDelete
  19. keren gan . .. terimakasih atas artikel nya.

    ReplyDelete
  20. Thanks untuk informasiinyaa...kereeen

    ReplyDelete
  21. Terima kasih informasinya,sedikit bingung tapi bisa di coba di tes di blog..

    ReplyDelete
  22. Terima kasih infonya mas, kayaknya mesti buka-buka kembali blog lama nih..

    ReplyDelete

Suarakan pendapatmu dan berdiskusi dengan para pembaca lainnya melalui kolom komentar.

Berkomentarlah sesuai dengan isi artikel dan yang terpenting komentar anda tidak boleh mengandung unsur Spamming (spam comment) dan Link Aktif. Terima kasih.