Translate

Monday, December 31, 2012

Tutorial Perkataan Ikut Cursor

Assalamualaikum ..
Hari ni Nabila nak ajar macammana nak buat perkataan ikut cursor macam Nabila punya blog ni ..
first skali korang daftar je trus pergi kat dashboard > design > add a gadget > HTML/javascript
2 . Copypasta kan kod kat bawah ni ..


<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
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 = "Perkataan anda di sini";
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>
Tukar Perkataan Anda Disini dengan perkataan yang korang nak ..
Selamat mencub^^
jgn lupa komen yerr??





Friday, December 28, 2012

Tuturial Cara Letak Button ' BACK TO TOP ' Untuk Blog .

Assalamualaikum .. Hari ni Nabila nak kongsikan Tutorial ni dengan korang semua ..
Macam mana nak letak button BACK TO TOP .. Memandangkan semua malas nak pergi ke atas , senan jek cuma kena tekan jek nanti automatik ade kat halaman atas , mak aih ! macam lif pulak kan?? oklah , berbalik kepada tutorial tadi ..

Firstly, korang kenalah Daftar dulu , kalo x , mcmmne nk wat kan ??
2. Pergi kat dashboard > design > add a gadget > html/javascript
3. Pastu Copypasta Kod kat bawah ni .

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a> 

4. " Url gambar " tu korang masukkan url gambar ' Arrow Back To Top ' korang .

Kalau korang malas nak cari URL GAMBAR ' Arrow Back To Top ' korang , kat sini Nabila ade sedia kan beberapa gambar  ' Arrow Back To Top ' untuk korang .


http://img338.imageshack.us/img338/9871/2evyotw.gif


http://img132.imageshack.us/img132/5848/totopbutton.png


http://img175.imageshack.us/img175/7297/up3.png


http://img28.imageshack.us/img28/2494/30720265.png


http://img529.imageshack.us/img529/1986/96133335.png


http://img294.imageshack.us/img294/9831/14193731.gif




Tapi kalau korang nak yang CUTE ada kat bawah ni ..



http://img205.imageshack.us/img205/7824/74211510.gif



http://img196.imageshack.us/img196/6670/49238758.png



http://img266.imageshack.us/img266/3325/81258407.png



http://img13.imageshack.us/img13/5533/20610818.png



http://img543.imageshack.us/img543/5941/62667078.png



http://img267.imageshack.us/img267/7242/36935517.png


http://img857.imageshack.us/img857/4428/12543870.png



http://img17.imageshack.us/img17/3190/51122514.png



http://img31.imageshack.us/img31/9105/57461251.png



http://img811.imageshack.us/img811/5130/38543106.png



http://img26.imageshack.us/img26/2135/83340054.png



http://img859.imageshack.us/img859/7859/17455371.png


Tapi kalau gambar kat atas tu x der yang berkenan , korang boleh pilih yang SUPER CUTE pulak macam kat bawah ni ..


                         http://i1230.photobucket.com/albums/ee493/daya331/top5.png



                          http://i1230.photobucket.com/albums/ee493/daya331/top4.png



                           http://i1230.photobucket.com/albums/ee493/daya331/top3.png



                         http://i1230.photobucket.com/albums/ee493/daya331/top2-1.png



                        http://i1230.photobucket.com/albums/ee493/daya331/top1.png
http://angrybirdsaddiction.com/wp-content/uploads/2011/06/angry-bird-red-16x16.png