Cara Mudah Banget
Membuat Tulisan Mengikuti Mouse / Kursor Valid Html5 di Blog - pernahkah sahabat blogger melihat blog tetangga yang ada widget tulisan yang bisa mengikuti mouse maupun cursor ? hembs :-p mungkin sobat bertanya-tanya gimana sih cara bikin tulisan bergerak yang bisa ngikutin cursor kayak gitu ? tenang aja brow , kali ini saya akan memberikan tutorialnya kepada sahabat blogger semuanya :)
Ada yang lain widget tulisan yang bisa mengikuti mouse ataupun kursor ini , yaitu widgenya valid html5 , karena berdasarkan hasil pengamatan saya , tutorial-tutorial yang membahas tentang widget kursor ini widgetnya belom valid , karena saya pecinta valid , saya optimasi widgetnya dan berubah menjadi valid
Berikut Cara Membuat Tulisan Mengikuti Kursor Valid di Blog
- Pertama , silahkan sobat masuk ke editor template [ edit html ]
- Cari kode
]]></b:skin>
atau </style>
- Jika udah ketemu selanjutnya pasang css berikut dbawah ini tepat diatas kode
]]></b:skin>
atau</style>
#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;}
- Jika udah selanjutnya Klik Save [ ettt belom selesai nih gan kita perlu memasang javasript biar cssnya bekerja ]
- Keluar dari editor template => TataLetak => Tambah Widget => Html / Javascript
- Pasang javascript dibawah ini di dalam kolom Html / Javascript tadi
<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Tulis Kata-Kata Anda Disini Brow";
/* 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>
- Terkahir Klik Save
Penting Brow :rokok :
Silahkan sobat ganti Tulis Kata-Kata Anda Disini Brow , dengan kata-kata yang anda inginkan , misalnya welcome to my blog , atau juga , apabila sobat ngin mengganti jenis dan ukuran hurufnya silahkan di edit pada bagian cssnya
12 Komen Tips Membuat Tulisan Mengikuti Kursor Valid Html5 di Blog
Wahh sepertinya tips ini kurang cocok di tanam di blog saya...
Wahh sepertinya tips ini kurang cocok di tanam di blog saya...
ijin untuk saya praktekkan ya mas
Fusing lihatnya :D tapi keren kok buat blog, jadi berseni :D
Kalo ini cocok untuk blog-blog hacker itu yaa gan :D
biasanya saya liat banyak yang pakai ini :)
heheh , kalau gak cucok jangan di pasang saja :)
Monggo di praktekan pak dosen :D
iyah brow dengan adanya tulisan berjalan dan bergerakmengikuti cursor , blog jadi berseni :-d
iya mas , biasanya blog semacam itu banyak yang pakai widget ini
thank's gan infonya
Ajiiib
thank's atas informasinya...
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish