Wadah Madrasah Pengalaman: Tutorial welcome image


Friday, August 19, 2011

Tutorial welcome image



.



Salam korang...


Kali nie Wan nak wat Tutorial Welcome image.Korang leh tengok contoh kat WanhazelJunior. Wan ubah sedikit koding dari yang asal..


Jom tutorial

Dashboard>Design>Edit HTML
Tick expand widget

Mula mula korang cri kod nie..
CTRL+F bagi memudahkan pencarian


]]></b:skin>


Dah jumpa..Korang copy kod kat bawah nie kat atas kod yang korang cari tadi..






<center>
/* to top */
#toTop { width:100px;background:none;
border:0px solid #ccc;text-
align:center;padding:5px;position:fixed;
bottom:10px;right:10px;
cursor:pointer;color:#666;text-
decoration:none; }
</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=''">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0AeiyUC7mEIQ2cGhIOwauABkdFU6Qr8IPGXLPSU_xzPVPKzbmPqDBPdlYQiRf0P8alXSldHC4eG147udwZ0QfMd6W7o5ypSJlMf8BxWlrfr2QV3B1udjChU4Gub2SWEd87JjY7i4XeEA/s1600/welcome-image1.png"
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></center>





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0AeiyUC7mEIQ2cGhIOwauABkdFU6Qr8IPGXLPSU_xzPVPKzbmPqDBPdlYQiRf0P8alXSldHC4eG147udwZ0QfMd6W7o5ypSJlMf8BxWlrfr2QV3B1udjChU4Gub2SWEd87JjY7i4XeEA/s1600/welcome-image1.png

Kod nie adalah kod Welcome image korang..Korang ubah lah k..Kalau nak guna Welcome Note yang Wan wat tu pun leh jugak


Kalau kod yang korang copy tu tak leh guna..TRy Korang download kod kat sini k..
Klik untuk download

http://www.4shared.com/get/6xgsyXol/welcome_image_blog.html

Preview dulu kalau takde error korang leh save..


Sebelum korang wat tu korang
backup template korang taw..

Selamat mencuba



.




105 comments:

cik cahaya said...

tak menjadik lah.. huhu

ishiko said...

wahh comel hajee..

Harisya Diary said...

wan..dah try wat..ble tekan gambar welcome tu, tak kuar kat home blog.. sedihnya

Little Mimi said...

knape bila saya tekan tak keluar blog saya?

Wan_hazel said...

cik cahaya

tak menjadi ke??

Wan_hazel said...

ishiko

tengs

Wan_hazel said...

Harisya Diary and Mimi Candice

dia kluar ape erk??

Wan_hazel said...

pelik nye..kenapa kat blog wan jadi ye...
guna template ape??

Harisya Diary said...

dia kuar gamabr tu tp bile tekan tak kuar home blog..bile padam balik code tu, terus tak terima..dia kat

More than one widget was found with id: Navbar1. Widget IDs should be unique.
Error 500

skng takleh masuk blog lah ni..hehe

Harisya Diary said...

guna template designer..

skng takleh bukak blog..cmne eh..

Izzat Azhar said...

tak jadi gak... izzat guna template minima..

Izzat Azhar said...

tak jadi gak.... izzat guna template minima... huhu..

Wan_hazel said...

cuba try download kod yg wan bagi link kat entri tu..mana taw copy tak leh..\..

Little Mimi said...

mimi pun xtau..mmg jadi yang selamat datang tu. tapi bila tekan, dia x kluar pun home blog.

Little Mimi said...

betol ckap harisya diary.. mimi pun sama mcm tuh.

Wan_hazel said...

try download kod yg wan kasi link tu k

Little Mimi said...

link mana wan?

Izzat Azhar said...

tak faham la wan.. try download kod yang wan bgi?? code mane?

Little Mimi said...

okey, dah jumpa link. mimi try jap.

Wan_hazel said...

link kat entri tu...download kan k

Little Mimi said...

dah jadi ! thanks wan ! ;)

Harisya Diary said...

highlight kan benda tu? then download? pastu?

Wan_hazel said...

download je.,kat sini,.

http://www.4shared.com/get/6xgsyXol/welcome_image_blog.html


guna kod yg di download tu k..

Wan_hazel said...

Mimi Candice

dah jadi..bagus2

Harisya Diary said...

sedang mencuba..lepas download, paste kat atas code tu kan? ok

Wan_hazel said...

a ah..sama macam tuto tu..hope leh..

Harisya Diary said...

alhamdulillah..

syukur sngat2..

dah jadi..

amik pengajaran supaya backup dulu code..hahahaha..thnks wan..anyway, comel sngat..

Izzat Azhar said...

dah boleh... thx.. suke tutor ni..

Harisya Diary said...

ohyea..kalu nak centerkan ketengah cikit?

tengok cini wan

http://harisyadiary.blogspot.com

Wan_hazel said...

nak centerkan kene edit lagi gambar tu,,supaya jadi sama besar template tu..yang wan nye tu 1000 lebar dia..

Harisya Diary said...

oh, okeh! tengs yaw..

YAya IEdayah said...

: . suka tut0 niew . yaya guna !

Alya Balqis Studio said...

dah jdi t.kasih wan..

Cik Applemuffin said...

Jom join my first GA ^_^...

http://myshorthand.blogspot.com/2011/08/my-first-giveaway-aksesori-kraf-kristal.html

FatinCokelat ♥ said...

asal tak jadi?http://hikayatchoclate.blogspot.com/b/html-preview?token=d4OG4jEBAAA.sOcxJy-z9D3eGWjcuBq-Wg.KyuL291Bs-MWZwNL7bWxTA&blogID=9066757311807234558

imnotperfect said...

haha dh jadi lah wan,,,
teng q tawwwww

Unknown said...

abg wan , tasha buat dah jadi . gambar cartoon pon dah keluar . tapi , bila tekan je dy tak keluar dekat home lah . macam mana ea ?

Unknown said...

haha . abg wan ! dah boleh dah . tasha pakai code yang download tuh baru jadi . heee :D nice tuto . terima kasih :D

Aynn said...

x leh arr.wan..
dye kuar
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "head" must be terminated by the matching end-tag "".

x phm la...

Wan_hazel said...

Harisya Diary

welcome

Wan_hazel said...

❤ мιzz-уαуαιєуα ❤

sama2 taw

Wan_hazel said...

Zainab

ok kalau free wan join k

Wan_hazel said...

Ana Fatin cokelat

tak jadi??dia jadi camne??

Wan_hazel said...

imnotperfect

welkam..sama2..ehehhe

Wan_hazel said...

tasha ;)

sama2..kod download tu ok lagi kot..tak taw lah nape kod yg dicopy tak bleh

Wan_hazel said...

zaty fifixious

pelik betul..camne tu...

Unknown said...

nurul dah jdik wat.... tpi masuk jer titibe kuaw shoutbox.. erm, x pa la... hehehehe.. thnkx 4 the tuto...

Ikablabla said...

dah jadi dah.. just x center je.. sokay la.. thx anyway :)

Wan_hazel said...

ok..peace

Unknown said...

abg wan , macam mana nak hilang kan simbol --> dekat atas header tasha tu ea ? after buat welcome image dy jadi cenggitu pulak . yang lain semua oke . tapi simbol atas tuh tak boleh hilang pulak . macam mana ea ?
cer abg wan tengok blog tasha .
[tasha-herstorylife.blogspot.com]

Wan_hazel said...

yg tu wan tak taw lak ape masalh dia taw..wan dah habis godek kod...

cik cahaya said...

bila tekan tak kuar home page pun.. huhu.. -.-"

Nazwa Saedun said...

bile da download bru lpas ! hihi

Wan_hazel said...

kene download dulu baru boleh guna

Anonymous said...

tak bole.. gne kod yg dkt entry tak bole.. ngan kod yg download tu pon tak bole.. tak kuar home.. nak wat cm mne ye?

Wan_hazel said...

download pun tak leh..napa yg lain boleh je ye...

Jamalina said...

Wan , saya dah try buat . Dia kuar gambar , tapi bila tekan tuh , tak kuar dekat home blog ! macam mana ni ?

Wan_hazel said...

download kod tu taw..

Linda said...

wan...thanks ye...da jadi..... :)

Jamalina said...

selepas download ? mcm mne plak ?

Jamalina said...

Wan , dah jadik lah ! Thanks banyak banyak :)

Wan_hazel said...

sama2

mimi_atia said...

thanx wan (^_^) cantek...suke3x..

mimi_atia said...

tq wan..dah jadik (^_^)

Wan_hazel said...

sama2

Cik Kasut said...

waa.. abg wan !
cik kasut da try.. gune image abg wan xpe kann

Wan_hazel said...

ok..eehhehe..peace

Little Mimi said...

salam wan, camne kalau nak buang balik? mimi da buang kod dia tapi, bila preview error.

Wan_hazel said...

remove je kod yg sama....

JiJie Jiaa's said...

npe ble jijie remove kod yg mule2 tu error??

Wan_hazel said...

error???pelik btul...tak de backup template ke

Little Mimi said...

backup template yg mcm mne tu?

Wan_hazel said...

backup..simpan template b4 eddit

Little Mimi said...

camne nak buat backup template tu?

Wan_hazel said...

backup tu leh google taw..nanti ade tutorial kluar

Little Mimi said...

okey thanks !

Wan_hazel said...

ok..ehehhe

aMiRuL CuTe ◠‿◠ said...

wan lps download image tuh nk wat ape lagi

Wan_hazel said...

lepas tu letak dlm template macma dlm tuto tu

Atira Syuhadah said...

thanks wan :)

Atira Syuhadah said...

bende tu jd . tp lpas tu die hilng sendiri . pelik la

Wan_hazel said...

hilang ...kalau dah kene klik ke??

Zahilatus Shima said...

tak menjadi...bile sye buat n preview dye error...mcm mnew nk uat nih...plez help me...

Wan_hazel said...

download kod tu taw...lepas tu try lagi

LittleClaw said...

Tak jadi pun, XML apa benda tah lepas tu gambar tu takleh lah. Macam macam.

Wan_hazel said...

download taw...ade koding yg wan suruh download tu

Atira Syuhadah said...

wan , nak tanya nih . macam mana nak hilangkan benda tuh ?

# sory menyusahkan wan :)

Wan_hazel said...

delete je kod yg sama tu

The Puteri Azmi said...

WAN..

tak jadi lah..and now..?
nak kembali pada yg asal pown tak boleh..mcm mne ek???

Wan_hazel said...

remove kod yg sama tu k

Atira Syuhadah said...

dia ckp mcm nih "More than one widget was found with id: Navbar1. Widget IDs should be unique"

Macam mane tuh ?

Wan_hazel said...

nak delete ke nak pasang???

Atira Syuhadah said...

nk delete :)

Wan_hazel said...

kalau nak delete..delete kod yg sama je k

Red Rose said...

tq...da jdi :)

Wan_hazel said...

welkam..peace

Tuan Muda Afif Imran said...

Salam brother Wan hazel.
Saya dah buat Welcome Image saaya. Lepas tu bila saya nak masuk kat blog saya tk blh. Sbb welcome image tu tkde navigation to my blog. Cam ne ek? Kalau tk paham, masuk blog saya ; http://www.sengajabuatblog.blogspot.com :) Thanks !!

Wan_hazel said...

Tuan Muda Afif Imran

dah try guna kod yg didownload??

KhatijahAzman said...

salam , wan , dah guna and skunk nak delete . da delete kod yg same , tp preview dye tulis error laa . camne ehh ?

Wan_hazel said...

delete macma tu je...nape tak back up template??

Anonymous said...

ala .. np sy plk wat bile preview ok jer ..
tp bile nak save dy tulis sorry! x thu la sbb ape ..

Wan_hazel said...

wan pun tak tah..bteer tak yah guna..sebab bnde nie mnyusahkn skit

gagak putih said...

Abang wan mcm mna nk backup tamplete

Wan_hazel said...

try google..ada tuto tu k..jejjee

qistina said...

Cantik .Tq abg wan Menjadik dengan sekelip mata