Hallo Guys.. Apa kabar? Semoga dalam keadan sehat dan berbahagia tentunya. Pada kesempatan kali ini akan saya bagikan bagaimana cara mudah membuat tulisan mengikuti kursor pada blog.
6. Tuliskan Teks yang akan mengikuti kursor pada bagian kode yang saya beri warna Merah. selain itu, sobat bisa juga mengganti warna teks yang akan mengikuti kursor, jenis font dll. silahkan sobat berkreasi.
7. Setelah semua selesai di atur, klik Simpan.
Semoga artikel ini dapat membantu sobat blogger semua, juka ada petranyaan, kritik dan saran, silahkan sobat tuliskan pada kolom komentar yang telah di sediakan di bawah artikel.
Membuat tulisan pada blog ini ada sebagian orang yang tidak menyukainya karena memperrumit tampilan web blog mereka. Tetapi tidak sedikit pila yang menyukai adanya tulisan yang terus mengikuti kursor pada blog.
Nah, jika sobat termasuk orang yang menyukai adanya tulisan bergera mengikuti kursor pada blog ini, ikuti tutorial dibawah ini untuk memasangnya.
1. Sobat harus Login terlebih dahulu pada blog sobat
2. Setelah masuk ke dalam blogger, klik menu Tata Letak pada dasbor blogger.
3. Di dalam menu Tata Letak, klik Tambahkan Gadget.
4. Seteah itu akan muncul jendela kecil yang berisi banyak widget, di dalam jendela ini, sobat pilih saja HTML/Javascript.
5. Letakkan kode di bawah ini pada kolom yang telah di sediakan.
<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 Yang Akan Mengikuti Kursor Di Sini";/* 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-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},makecircle = function(){ // rotation/positioningif(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 circled = 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 resistancey[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 arraysif(!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>
6. Tuliskan Teks yang akan mengikuti kursor pada bagian kode yang saya beri warna Merah. selain itu, sobat bisa juga mengganti warna teks yang akan mengikuti kursor, jenis font dll. silahkan sobat berkreasi.
7. Setelah semua selesai di atur, klik Simpan.
Semoga artikel ini dapat membantu sobat blogger semua, juka ada petranyaan, kritik dan saran, silahkan sobat tuliskan pada kolom komentar yang telah di sediakan di bawah artikel.
EmoticonEmoticon