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

Monday, November 26, 2012

Tutorial Perkataan Ikut Cursor

Ingin perkataan mengikut cursor korang semasa melayari blog.?

Contohnya seperti di bawah.



Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.

1. Dari dashboard > design > add a gadget > HTML/javascript (more info)

2. Copy dan paste kod berikut dalam html/javascript yang anda buka.


<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>


Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.

3. Save dan lihat hasilnya.:)


Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.

1.Tukar style

font-style: normal; (pilihan lain italic, oblique, atau inherit)

2. Tukar warna perkataan
color: #FF0080; (untuk code warna, rujuk entri ini HTML color code

3. Tukar jenis tulisan
font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)

Tutorial Gerakkan Title Blog



Jom Nabila ajar korang mcmne nk gerakkan title blog mcm blog saye ni ..


Tutorial untuk buatkan title blog bergerak adalah seperti berikut.


1. Dari dashboard > Design > Add a gadget > Html/Javascript

2. Copy dan paste code berikut dalam ruangan HTML/Javascript



<script language=javascript>
msg = "Title Blog Anda";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>


Note: Tukarkan 'Title Blog Anda' dengan apa sahaja yang anda mahu.

3. Save dan lihat hasilnya.:)

tutorial : Shoutbox Yang Cool Untuk Blogger


1. Buka www.fibox.ws, kemudian klik pada Sign Up



2. Masukkan email address dan password. Tick pada term of service kemudian klik continue


3. Notification mengatakan activation email dihantar kepada emial yang korang daftar.


4. Buka email dan klik pada link yang diberi.


5. Pengesahan bahawa akaun korang telah diaktifkan.


6. Login akaun korang, dan untuk kali pertama anda login korang akan diminta untuk create nama untuk shoutbox korang.


7. Daripada dashboard, korang boleh tetapkan setting yang korang kehendaki



8. Copy code yang diberi dan paste ke dalam ruangan HTML/javascript blog korang.
(tidak faham.?)

9. Save dan lihat hasilnya.:)


Tambahan:
Selepas pendaftaran, korang juga boleh login menggunakan akaun facebook korang.


Wednesday, November 21, 2012

about me..

assalamualaikum semua..
dosa x jwb tau..
nama saya Zahira Nabiella bte. Zahari..
tolong add saye kt facebook saye yer --> zahiranabiella@ymail.com
tolong add yer..  hihihi  =D

Tutorial Sembunyikan FB Fan Page di Blog

Ini cara-cara yang korang boleh ikut .. ikut betul2 tau kalo x mesti x jadi ..


Anda juga boleh tengok contoh page yang diletakkan di tepi dalam blog di blog demo ini.

Tutorial sembunyikan Fb fan page adalah seperti di bawah.

Langkah 1:

i. Dari dashboard > design > edit HTML

ii. Menggunakan fungsi find, (ctrl + F), cari kod </head>

iii. Copy dan paste kod di bawah SEBELUM kod </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>


cth:



Nota: Jika anda dapati kod di atas sudah ada sebelum anda copy paste, abaikan langkah 1, pergi terus ke langkah 2.

iv. Selepas selesai klik Save Template





Langkah 2:

i. Dari dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://tutorialuntukblog.blogspot.com/2011/10/tutorial-sembunyikan-fb-fan-page-di.html">Tutorial Here</a></span></div></div>


Nota: Gantikan "URL PAGE ANDA"

contoh url page:



iii. Save dan lihat hasilnya.:)

Friday, November 9, 2012

Toturial Cara Letak Widget Comel Untuk Blog

jom ikot tutorial Nabila kat bawah nie...
Step 1 : Mula-mula Klik > Dashboard > Design > Page Elements > Add Gadget > Html/Javasript 

Step 2 : Lepas tu copy code merah kat bawah nie dan paste dalam Html/javascript & save!



<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:200px; right:-12px;'>

<a class='linkopacity' href= " http://heartbeat.my?rid=22104 " imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src=" http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/2757393cyia8264jd.gif " /></a><br />

<a class='linkopacity' href=" http://zahiranabiella.blogspot.com/"   imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src=" http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/blogger.png " /></a><br />
</div>

*warna orange boleh tukarkan mengikut kesesuaian blog . Right boleh tukar menjadi Left !
*warna biru : url gambar yang korang pilih ^_^
*warna kuning : tukarkan dengan link yang korang nak...macam ayu, ayu letak link iklan heartbeat. kalau nak gantikan dengan icon facebook pun boleh jugak... ^_^
        


sini ada beberapa freebies yang cOmel-cOmel...kalau nak, korang copy jer code url tu ok...


http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/3-1-2.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/7-1.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/7.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/5.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/6.png


http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/8.gif

http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/7.gif

http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/6.gif

http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/4.gif

http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/5.gif

http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/3.gif
http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/2.gif
http://i1105.photobucket.com/albums/h346/ayusleeping11/cuteface/1.gif

http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/1-1.png

http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/facebook.png

http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/510.png

http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/53.png


http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/511.png


http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/1.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/2.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/4.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/3.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/2t.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/1t.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/4t.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/3t.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/twt3.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/twt1.png



http://i1105.photobucket.com/albums/h346/ayusleeping11/buton/twt2.png





Selamat Mencuba!
http://angrybirdsaddiction.com/wp-content/uploads/2011/06/angry-bird-red-16x16.png