Ikuti tutorial di bawah:
1) Login akaun blogger > Dashboard > Add A Gadget > HTML/Javascript
2) Copy paste kod dibawah pada ruangan html tadi
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'ARIAL';
color: #8D38C9;
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">
;(function(){
var msg = "TEXT HERE";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
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>
Dalam kod di atas, tukarkan :
ARIAL - font pilihan korang
TEXT HERE - masukkan text korang sendiri
8D38C9 - kod warna text pilihan korang, boleh pilih kod warna di bawah:
( untuk paparan lebih besar, klik di sini)
3) Save dan lihat hasilnya.
Selamat mencuba! :)
Special:
 wOoWW...!!!!!
    wOoWW...!!!!!   
            
 dia dicabar untuk SENYAP...
       dia dicabar untuk SENYAP...
            
 Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
      Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
            
 watch a movie...
     watch a movie... 
            

 wOoWW...!!!!!
 wOoWW...!!!!!
 Alert message pada blog
  Alert message pada blog  
 



17 komen budak comel:
x dpt wak wat la..
susahnye........
comel sangt...^_^~~
can ne nak buad bloh yg macam nih ??
ta jd pown...:(
thnx , mudah paham ;)
kenapa saya buat tak naik pun text tu , dah banyak kali try dah.. ?
mcm mne nk tukar arrow jadi yg kiut2??
thx menjadik jugak belajar kat sniy :D
thankkzzz
bagus ne,,
kunjungi jugak ya Http://nanaarklob.blogspot.com
@Mizs amy refer tutor ni http://jombinabelog.blogspot.com/2011/11/cursor-comel-untuk-blog.html
siap daa....
simple & mudah faham
thanks
mcm mna nak tukar font dye ekk??tak tau sgt nie???
Comel
@Weeyah Abdullah tukar font ARIAL dalam kod di atas kepada font pilihan awak
OH ,.. yes .. akhirnya boleh jugakk .. thanx .. <3
yeayyy alhamdulillah dapat gak wat hee...
Post a Comment