Tutorial : Welcome Image

Heyo.

Tutorial ni telah direquest oleh akak Nuriy.

Dia tanya cam mana nak buat welcome image.

Tahu x welcome image yang mana?

Yang gambar bawah ni haa..

UNTUK CLASSIC TEMPLATE (BLOGSKINS)

• Dashboard > Template > Edit HTML
• tekan CTRL + f , search kod ni : </style>
• kemuadian, copy kod dibawah ni, dan paste kan dekat atas kod tadi.

.hallo {
text-align:center;
margin-top: 250px;
}

• Kemudian, cari kod ni  </head>
• copy kod kat bawah ni, paste kan di BAWAH kod </head> tadi.

<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="hallo" onClick="javascript:toggle('wise', 3000); this.style.display='none'; document.getElementById('june').style.display=''">
<img src="URL IMAGE"
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>
  

• URL IMAGE tu tukar dengan url image korang. Kalau takde, sama ada nak ambik kat blog Anis Fadhilah or kat bawah ni.
•  PREVIEW dulu. kalau okay,  SAVE TEMPLATE CHANGES . 

Ni ada sikit welcome image yang saya buat.

Simple je, haha, guna pixlr :)

http://i1223.photobucket.com/albums/dd505/MrSpongebob183/blooger183/welcomeimage1-1.png

http://i1223.photobucket.com/albums/dd505/MrSpongebob183/blooger183/welcomeimage2.png

http://i1223.photobucket.com/albums/dd505/MrSpongebob183/blooger183/welcomeimage3.png

http://i1223.photobucket.com/albums/dd505/MrSpongebob183/blooger183/welcomeimage4.png

http://i1223.photobucket.com/albums/dd505/MrSpongebob183/blooger183/welcomeimage5.png

http://i1223.photobucket.com/albums/dd505/MrSpongebob183/blooger183/welcomeimage6.png

Ngeee, tetibe rajin nak buat welcome image tu.

Sorry tau kalau buruk.

Kalau nak ambi, nak kredit boleh, x nak kredit pun xpe.

Kbai.

From: -Muhd Fadlin-