Tutorial Welcome Note Click to Enter
Friday 13 January 2012|| 0 Comments

Hey. Ari ni iyra nak buat tuto welcome note klik to enter. korang tahukan ? benda ni kalau kita tekan baru boleh tengok blog kita :) Jom kita mula. Bismillahhirrahmanirrahim.

1. Dashboard > Design > Edit HTML

2. Tekan CTRL+F then cari code nih.

]]></b:skin>


3. Copy code kat bawah dan pastekan dekat bawah ]]></b:skin> .


</style>
<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=''">
<img src="PICTURE URL"
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"/>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>


4. URL GAMBAR - letakkan link gambar welcome note korang.


5. Cari perkataan body {


6. Pastekan code dekat bawah ni dekat bawah perkaataan body { tu

.input {

text-align: center;

margin-top: 200px;
}


7. Ubah code yang warna oren tu mengikut kesesuaian.


8. Klik save.


9. Lepas korang klik button SAVE tu, dia akan keluar something, macam ni.



10. Korang dekat DELETE dan SIAP lah welcome note korang tu.




Blog Owner
Blog ni hanya ada tutorial and freebies by me. Freebies doodle yang lain ada di blog Monster Doodle dan ini main blog saya nurmunirah; Copyright by me. All the pixel I got from Pixel Dreams.