Tutorial Welcome Image (Click Here To Enter)
klik untuk tumbesaran yang sihat.hehehe |
Assalamualaikum semua dan salam 1 Malaysia.Ha, mesti sekarang ni ramai sedang membuat persiapan untuk pulang ke kampung halaman untuk menyambut Hari Raya Aidilfitri.Di sini Budak Sweet'z ingin meminta maaf jika ada terkasar bahasa dan tersalah bicara sepanjang D'ya menulis post blog. Tutorial kali ini ialah tutorial welcome image (click here to enter) .Tak tahu apa itu welcome image, cuba you all perhatikan time you all melawat blog Budak Sweet'z tertera welcome image seperti gambar di atas.Ramai sangat yang request tutorial ni, jadi untuk tidak menghampakan diorang D'ya buat juga tutorial ni walaupun tahap kemalasan semakin menjadi-jadi.Jom tutor :)
Log in >> dashboard >> design >> edit HTML >> tick expand widget templates (jangan lupa okay backup template)
Tekan ctrl+ serentak dan sila cari kod di bawah ini :-
]]></b:skin>
Dah jumpa? Masukkan pula code ini DI ATAS code yang korang cari tadi. Perhatian, letakkan code ini di ATAS code tadi okay.
</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>
</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>
Langkah yang seterusnya ialah gantikan URL IMAGE yang korang suka di perkataan yang bewarna MERAH .Di sini D'ya nak bagi freebies welcome image untuk you all.D'ya edit semua ini guna Photoscape dan Gimp2.So, D'ya harap sangat sesiapa yang menggunakan tutorial ni, sila kreditkan Budak Sweet'z okay.Bukan mudah untuk edit welcome image ni, penat tau.Hope korang suka sebab D'ya lebih banyak main warna, font untuk mengedit welcome image ni dan buat pengetahuan korang semua welcome image ini adalah transparent. Kredit kepada Google dan Tumblr dalam proses D'ya menghasilkan welcome image ni.
Pilih yang mana kamu sukaaa ... :)
http://i1101.photobucket.com/albums/g422/Dekya135/welcome1.gif
http://i1101.photobucket.com/albums/g422/Dekya135/welcome2.gif
http://i1101.photobucket.com/albums/g422/Dekya135/welcomeheader3.gif
http://i1101.photobucket.com/albums/g422/Dekya135/welcomeheader41.gif
Cantik tak header welcome image buatan Budak Sweet'z sebab Shahril betul-betul teliti dalam mengedit welcome image ni dan harap memberikan kepuasan kepada you all.Harap-harap you all suka dengan header ni.Caranya begitu mudah,hanya perlu gantikan URL IMAGE yang you all suka.Ehhh, jangan save dulu.Ikut step di bawah dulu.
Lepas sudah save akan keluar perkataan KEEP WIDGET or DELETE WIDGET. You all pilih dan tekan DELETE WIDGET okay.Paham kan?
p/s : penat mengedit, huhu tapi rasa seronok bila dapat ajar tutorial bak kata pepatah 'sharing is caring' tak gitu? Sesiapa yang guna tutorial ni, sila komen dan like-like laju.heheheh Selamat Maju Jaya :)
No comments:
Post a Comment
Terima Kasih Atas Pandangan Dan Komen Anda . Shahril Akan Memperbetulkan Apa Yang Kurang . :) Lepas komen Jangan Lupa Share Artikel Dan Follow Blog Shahril !