Ensiklopedia Doktor Chenta

Saturday, 25 February 2012

tutorial welcome image

korang! pernah dengar tak lagu tema cinta kura-kura nyanyian sofaz tuh?
eiyqa suka betul lirik yang mula2 sekali tuh
"Berikan ku peluang terakhir sekali lagi
Untuk membukti kasih sejujurnya di hati
Maafkan seandainya cintaku tidak sempurna"

aummm~sweet hehehe......
 anyway hari ni eiyqa dapat surat dari yayasan pendidikan cheras
untuk biasiswa masa eiyqa di university nanti hehehe!

yup2 hooray! sukanya eiyqa! ^^
dan dengan senang hatinya eiyqa nak ajar korang macam mana nak buat welcome image...

korang tahu tak ape itu welcome image...?
alarh macam ni :


alarh comel kan??
nak jugak?? jom follow this step dengan muka ada senyum hehe! chill~

1)log in > dashboard > design > edit html > tick expand widget

2) cari kod ni : ]]></b:skin>

3) copy code dibawah ni dan paste diatas kod ]]></b:skin>


</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><img src="URL IMAGE YANG KORANG SUKA"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>
4)yang warna merah tu gantikan dengan url welcome image yang korang suka..

kalau tak tahu nak ambik katmane just ambik je yang bawah ni dengan penuh suka hati :))


http://i1053.photobucket.com/albums/s466/Princess_Turtle/welcome1.gif


http://i1053.photobucket.com/albums/s466/Princess_Turtle/welcome2.gif

5) dah siap cepat2 save hehehe!

1 comment: