Amninano : Tutorial

Showing posts with label Tutorial. Show all posts

July 16, 2011

Tutorial: Background hover

by Unknown, in Tutorial

ASSALAMUALAIKUM SEMUA..
Mungkin ramai yang x tau ape tuh background hover kan?? mcm nie background hover

Picture credit to : SugarNoodles

Yang aku kotakkan tu lah background hover.. means, bila kita hover kat link atau ape2, ade background..

1st, as usual LOG IN-->DASHBOARD-->EDIT HTML

2nd, cari code a:hover {

3rd, kalau dh jumpa.. copy code kat bawah ni :

position: relative; color: #F3C1BA; background-image: url(your background link); font-style: normal;}
.pop { color: #FFF; background-color: #F8E2D3; padding: 2px; }.pop:hover{ color: #FFF; background-color:#F4AEA2; }

4th, copy code kat ats dan paste bawah a:hover {

5th, Then, preview. kalau jadi tekan je SAVE TEMPLATE

SIAPPPP!!

Kalau ada sebarang masalah or menjadi , drop your komen here ok??

Bubye!! Wassalam..

Dah bace??seperti biasa yer teman2,komen lah..

December 17, 2010

3rd Tutorial:Buat background dgn mudah

by Unknown, in Tutorial

Hye..arini nk wt tuto..xde spe yg request..but sesaje bg tuto nih..hihihi..mcm mne nk wt background ngan mdh??haa,ni tok guru nk ajar nig..Cewahhhh!!

1.Copy code yg akan aq bg kat bwh nih..

2.Seperti biase,pergi kt Design-->Add Gadget-->HTML/Javascript

3.Pastekan code ni

<style>body {background-image: url("URL HERE");

background-position: center; background-repeat:repeat;

background-attachment: fixed; }</style>

4.Yang Url Here tu korang boleh tukarkan ngan background pilihan korang..

Aq akan bg sket code for background

Background Pertama:

http://i153.photobucket.com/albums/s213/manga476/

Cute%20Background/background.gif

Background Kedua:

http://i908.photobucket.com/albums/ac290/
photographyXO/butterfly.gif

Background Ketiga:

http://i153.photobucket.com/albums/s213/manga476/Cute%20Background/cute-background-1-038.gif

Background Keempat:

http://i153.photobucket.com/albums/s213/manga476/Cute%20Background/cute-background-020.gif

Ini sume sumbangan Photobucket..klau nk cri lagi background2 menarik...crilah kt photobucket yeah??Bye!!

December 16, 2010

4th Tutorial:Tukar Font Dengan Cara Mudah

by Unknown, in Tutorial

Hellopp..Ika tnye,cmne nk tkr font cm blog amni??ok,ika..ats permintaan ika.amni wt kan..cara dyer sng jer..

First,

Nmpk x??aq ade bltkan Edit HTML..ok,tkn Edit HTML..

Second,

Ok,dh kuar kt kod bebanyk tu??klau kurang jelas..tekan gmbr utk lg gempak!!Just tkr font sebelom yg font terakhir..mknenyer..font due drpd blakg lah..x phm lagi..??korg perbesrkan lagi la gmbrnyer..phm lerrr..

Third,

Bile dh tkr,tkn Save Template..sng jer kan??3 step jer..klau x jadi,bgtaw k??kot2 aq leyh tlg...BYE!!

Dah bace??seperti biasa yer teman2,komen lah..tkn gmbr utk tumbesaran..

November 23, 2010

2nd Tutorial:Teks bergerak pada kursor anda

by Unknown, in Tutorial

Hai sume..arini aq nk wt tuto lagi..nk taw tuto ape??

Jom,kite tgok..

Ok..mybe yg nie krg jls..xper..klau kog bkk blog aq,korg akn nmpk

kt cursor aq tuh ade teks bergerak bertulis 'Si Budax Tecix' ok..Oklah,aq nk tunjuk cmne nk bwt dyer..

1st,mcm biase pergi kt Design-->Add A Gadget-->HTML/JavaScript

2nd,Salin kod yg akn disertakan..yg diboldkan berwarna merah perlu ditukarkan kpd teks yang anda mahu dan warna....warna boleh diperolehi drpd SINI

/* Circle Text Styles */

#outerCircleText {

font-style: normal;

font-weight: normal;

font-family: 'verdana';

color: #0224FE;

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>

;(function(){

var msg = "Tulis teks 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>

3rd,Tkn Save..klau boleh,tkn Preview dulu..klau ok,tkn Save..

Sng je kan tutorial nih....

Msty blog korg akn tmbh menarik & hot gitcuhhh!!!

:D

Credit To:Mari Bina Blog

TQVM!!

Ctrl+C to copy ok..

November 07, 2010

1st Tutorial:Tutorial Snow..

by Unknown, in Tutorial

Hye sume..msty rmai yg tataw nk wt widget snow kan??alaa yg turun bnyk2 kt blog2 org tuh..yg wrne puteh tuh..haa!!dhtaw??bgus2..arinie aq just nk tunjuk cmne nk wt snow tuh..

Cara-caranya:

1.Go to dashbord>design>add gadget>HTML/javascript

2.Pastekan code yg tertera di bawah kat dalam kotak HTML/javascript


<script src=http://snow-effect.googlecode.com/files/snow.js 
type="text/javascript"></script>

3.dah paste,tekan SAVE..and then,SIAP!!
Rasailah kenikmatan salji yg x berapa sejuk pown..hehehe :D

This tutorial Credit To Talk Itu Cakap