Cara mudah membuat tulisan melayang dan memutari kursor di blog. Mungkin anda sudah pernah tahu atau berkunjung di beberapa blog yang menggunakan blogger dan saat kursor anda melakukan tindakan di blog tersebut maka akan muncul tulisan yang memutari kursor anda dengan berbagai kata mungkin kata " Welcome to my blog" yang selalu mengikuti kursor anda.
Pada kesempatan ini saya akan membagikan tips tersebut yaitu cara membuat tulisan memutari kursor di blog, jadi dengan menggunakan beberapa kode ini maka anda sendiri dan pengunjung lainya saat mereka berkunjung ke situs anda maka tulisan akan memutari kursor tersebut.
Langsung saja kita bahas Cara Membuat Tulisan Memutari Kursor di Blog.
1. Masuk ke blogger anda.
2. Masuk ke dosbar pilih laman tata letak => Tambah gadget => Pilih gadget HTML/JavaScript.
3. Masukkan kode dibawah ini di gadget HTML/JavaScript.
Klik
<style type='text/css'>
#outerCircleText { font-style: italic; font-weight: bold; font-family: 'comic sans ms', verdana, arial; color: #ff840a; 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(){ // Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING) var msg = "TULISAN ANDA"; // Set font's style size for calculating dimensions // Set to number of desired pixels font size (decimal and negative numbers not allowed) var size = 25; // 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.2; // 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; // BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! // 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>
Ket : Ganti yang berwarna biru sesuai keinginan anda.
4. Simpan.
Sekarang refress blog anda dan lihat hasilnya pasti sudah ada tulisan yang mengelilingi kursor anda bukan. Mungkin anda ingin menggunakan tips lainya rekomendasi beriut ini membuat efek bintang bertaburan. Semoga bermanfaat.
