free glitter text and family website at FamilyLobby.com

Tulisan bergerak pada cursor

hari ni tutorial mengenai cursor yang mempunyai tulisan bergerak. Boleh je letak ayat2 yang dikehendaki.

Stepnya


Log in blogger =>design =>layout=>add gadget =>html/javascript

selepas itu copy code  dalam kotak ini

tukarkan tulisan yang berwarna merah dengan jenis tulisan,warna dan perkataan yang dikehendaki






<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'trebuchet MS';
color: #80BFFF;
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 = "TUKAR TULISAN YANG ANDA MAHU";
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>


selepas tu jangan lupa save dan preview...
Jika step bergambar tidak jelas sila klik pada gambar ye..Try Jgn Tak Try Ok

warna border box



Ceriakan warna border box 

stepnya boleh  pergi ke

 dashboard=>design=>add a gadget=> HTML/javascript

copy kod di bawah dan jangan lupa tukarkan tulisan yang berwarna merah tu


<div style="border-color: #DF0174; border-style: solid; border-width: 2px; height: 100px; overflow: auto; width: 426px;">




*kalau nak coret dalam kotak tu ..boleh ikut step di sini entri dalam scroll box


kod warna boleh pilih di sini kod warna

jangan lupa save dan publish
Jika step bergambar tidak jelas sila klik pada gambar ye..Try Jgn Tak Try Ok

Pengomen terbanyak

Step untuk letak ruangan pengomen terbanyak jom lihat stepnya

pergi ke

dashboard=>design=>add a gadget=> HTML/javascript


copy kod di bawah dan jangan lupa tukarkan tulisan yang berwarna merah tu (kepada URL blog sendiri)

<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://www.bloggersentral.com/. Please do not remove this credit and the &#8220;Get this commentators widget&#8221; link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
 max = ccCount;
}
if (ccCount < min)
{
 min = ccCount;
} 

} 

ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://maribertutorial.blogspot.com/
 &Exclusions=Tutorial
 &ShowHowMany=10
 &Order=frequency
 &_callback=cCloud
 &_id=cfa196644e1d6159c9183548c4b5e2f5
 &_render=json" 

type="text/javascript"></script>
</div>

<!-- Top Commentators Cloud End -->


jangan lupa save dan publish
Jika step bergambar tidak jelas sila klik pada gambar ye..Try Jgn Tak Try Ok