Cara Membuat Tulisan Mengikuti Kursor pada Blog- Salah satu cara lain untuk memperindah dan membuat tampilan blog menjadi
menarik yaitu dengan membuat text atau tulisan bergerak mengikuti
kursor di blog. Mungkin sobat blogger pernah berkunjung pada sebuah blog
dan melihat tulisan bergerak mengarah ke mana saja kursor sobat
gerakkan lalu jika kursor didiamkan maka tulisan tersebut akan terus
berputar mengelilingi cursor. Sebenarnya sobat juga bisa membuatnya
secara mudah dengan hanya menambahkan script html tertentu pada blog.
Kali ini saya akan share gimana Cara Membuat Tulisan Mengikuti Kursor pada Blog , silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin membuat text bergerak / berjalan / berputar mengelilingi cursor pada blog.
Cara Membuat Tulisan Mengikuti Kursor pada Blog
1. Login ke blogger anda
2. Pilih Menu Tata Letak => Tambah Gadget
3. Kemudian klik tombol tambah pada pilihan HTML/Javascript
4. Setelah itu copy dan masukkan kode script berikut :
Keterangan :<style type='text/css'> /* Circle Text Styles */ #outerCircleText { font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #4679BD;/*Ganti warna sesuai keinginan*/ 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[ /* 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(){ var msg = "Welcome To My Blog"; // Ganti tulisan sesuai keinginan var size = 24; var circleY = 0.75; var circleX = 2; var letter_spacing = 5; var diameter = 10; var rotation = 0.4; 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>
- #4679BD , anda bisa mengganti dengan warna kesukaan anda - Welcome To My Blog anda juga bisa mengubahnya dengan tulisan yang anda inginkan.
Nah itulah bagaimana membuat tulisan mengikuti kursor di blog dengan mudah dan cepat.
salam,
