All the way I wrote

@frF

All the way I wrote

Tutorial Welcome Image

December 18, 2011 @ 8:40 AM | 0 Comment [s]

kali ni ak nk post kn kt readers semua tentang WELCOME IMAGE. Perhaps some of u ada yg dah tahu & ada yg dah buat dah pun. And maybe some of u jugak ada yg still x tahu..

Let me introduce to u bout this tutorial.. welcome image ni yang kalau korang tgk je blog, korang kene click ENTER dulu.. ok faham ank2 semua?

bagus!
first, mcm biasa..

dashboard > design > edit html > tick expand.

cari code bawah ni..copy & paste dlm kotak CTRL+F utk memudahkan pencarian!

]]></b:skin>

ok, jumpa kn? copy & paste kn code bwh ni pulak DIATAS code td

</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 ANDA"
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>

next, gantikan 'URL IMAGE ANDA' dgn mana url yg korang suka! senang kn!. Here ada design utk korg:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWc0AF3MGZFjSY_0HKocoCftz6rhg5BWJ1ZzmvxjOd117y-sgW6tcncF3KnHZ5aye5OjI9u0iGGfkBcFrxmWwcqCaLTxIdQrTp8J_O1q9z94SV7UJSpHL3ECHHakA-zoH27M1bBVI1cPV/s1600/Welcome+Note+2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQI_4oVCA5ZQJah6Zpyiu1Ryz5KUoIHd4J0gObNxcuWKB4QvC_fCDYTWJyWIDLwFrs1XfrylfjG0e8A6tRro6PycenpTjitXx76u0A1a3pGr3ZQqHbe9r4_nZDHovGJmD-o5r21L3QWs05/s1600/Welcome+Note+3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLpTYXCXP8pxnXN-2OKbZXsbgoE86jS3PcJCBPV4GKO6tG0prZQ_LJivD_93yYvvJkJovXXakQApmydu_wmIxd5IEAGQIH4AFF1NPK3J4hab800bNo7XmoryzIeaS9TlXBEMS-a_cq3cZY/s1600/Welcome+Note+4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhynWGqH6poAjcTHJemp7Cju9afsZdZAOe13KyoQykyROwDU5cgTXQBM91Z8xHoGn2ibBg6YMw176YMLUKXgUhOoZzyDAeKna5l8an6gAhvZXMP0EhIbSPB15JTD_P6mfrmWDOu5Rilb41y/s1600/Welcome+Note+Pink.png

p/s: jangan lupa download full template dulu ya?? this tuto credit to acik

good luck!

Thanks Baca Entry Saya . Jangan lupa baca entry lain pulak !

Older Post | Newer Post

Hye. Leave your footstep at my Shoutbox. Please don't REMOVE CREDITS!. Thanks for visiting my ugly duckling blog. Owh yeah!drop some comments yaw!