Cara Mudah Membuat Tulisan Berputar di Kursor Blogger

Cara Mudah Membuat Tulisan Berputar di Kursor Blogger

Nah, dalam posting kali ini saya akan kembali membahas tentang blogger. setelah cukup lama tidak membahasnya dalam beberapa posting belakangan.

Disini yang akan saya bahas adalah cara membuat tulisan bergerak berputar mengelilingi kursor di blogger. Untuk melihat contohnya silakan buka pada halaman demo berikut atau silakan kamu coba memasang kodenya sendiri.

Kreasi animasi di halaman blog adalah hal yang wajar dan bebas sesuai keinginan pemiliknya. Hal tersebut biasanya dilakukan untuk menarik minat pengunjung serta memberi kesan animasi yang menarik agar pengunjung tidak bosan.

Berbagai animasi mulai bermunculan dan dipasang di halaman blog. Baik itu animasi yang dapat dikontrol oleh pengguna maupun animasi statis. Salah satu contoh animasi yang dapat dikontrol adalah dengan memasang animasi teks berputar di kursor. Seperti contoh di halaman demo di atas.

Baiklah untuk mulai memasangnya, pertama-tama silakan kamu buka dasboard blogger kamu, kemudian pilih Tata Letak kemudian tambahkan sebuah widget dengan tipe HTML/JavaScript . Setelah itu salin dan tempel kode dibawah ini pada widget tersebut.

<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
font-style:italic;
font-weight:bold;
font-family:'comic sans ms',verdana,arial;
color:#4679BD;
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(){
// GANTI NILAI VARIABEL-VARIABEL DIBAWAH INI SESUAI DENGAN KEINGINAN KAMU
var msg = "Maringngerrang Blog";
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>

Silakan atur bagian yang ditandai sesuai dengan keterangannya. Setelah itu coba lihat hasilnya pada blog/web kamu.

Itulah salah satu cara yang bisa kamu lakukan untuk membuat animasi teks berputar pada kursor di Blogger. Dengan animasi tersebut kamu bisa membuat pengunjung blog kamu bermain dengan kursor mereka.

Mungkin cukup sekian dari saya tentang cara memasang animasi teks berputar pada kursor di Blogger. Semoga artikel ini bisa bermanfaat untuk kamu. Silakan sampaikan komentar terbaik kamu di bagian bawah, baik itu berupa pertanyaan mau pernyataan. Terima kasih dan sampai jumpa!

Related Posts

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel