Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Cara membuat tulisan bergerak mengikuti kursor blog

Cara membuat tulisan bergerak mengikuti kursor blog-Hello sob kali ini saya mau berbagi tips mempercantik tampilan blog dengan memasang tulisan berjalan mengikuti gerakan kursor mouse Anda. Pastinya diantara kalian ada yang pernah melihat ketika berkunjung ke blog orang lain ada tulisan bergerak mengikuti kursor mouse Anda.

Nah untuk membuat tulisan berjalan pada kursor mouse blog Anda cukuplah mudah, hanya memasang script dibawah ini untuk Anda pasang pada blog Anda. Berikut adalah langkah-langkahnya:

Cara membuat tulisan berjalan mengikuti kursor blog:

  • Silahkan login ke akun blog Anda
  • Pada dasebor pilih Template
  • Edit HTML
  • Cari kode ]]></b:skin> (untuk mempercepat gunakan Ctrl+F)
  • Jika sudah ketemu silahkan copy dan paste kode dibawah ini tepat diatas kode ]]></b:skin>
Toggle Title
#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;}
  • Selanjutnya Simpan
  • Sekarang pergi ke Tata letak
  • Pilih Add a gadget
  • Pilih HTML/JavaScrip
  • Masukan kode javascript dibawah ini pada kolom HTML/JavaScript
Toggle Title
<script type=’text/javascript’>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = “Tulis Kata-Kata 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>

Keterangan:

Kode yang saya beri warna biru silahkan ganti dengan tulisan yang Anda inginkan.

Itu dia cara membuat tulisan berjalan mengikuti kursor mouse pada blog, bagaimana cukup mudah bukan cara mebuatnya? Jika masih ada pertanyaan silahkan kirim pertanyaan Anda pada kotak komentar dibawah ini dan jangan lupa jika artikel ini bermanfaat klik tombol share dibawah ini untuk membantu meningkatkan blog ini. Terima kasih. Baca juga: cara mengganti tampilan kursor mouse pada blog

Loading...

Add a Comment

Your email address will not be published. Required fields are marked *

More in Blogger
Menampilkan related tags infolinks di bagian bawah artikel

Pasti sudah tidak asing lagi dengan program ppc in-text advertisements yang...

Close