21 August 2011

Tutorial Blog - Welcome Image (Click Here To Enter)

salam blogger semua..huh kenyang sudah....
berapa hari lagi dah nak raya nie..hahahaha..
hmm nampak tak gambar kat atas tue..
apit nak letak kat blog sebenarnya..tapi ada problem..
so xdapat nak letak WELCOME IMAGE untuk blog nie..
apit rasa kalau letak welcome image nie..loading blog akan cepat..
tapi xdapat lak nak boh..blog nie gelong kit..
dah la loading lambat..hahahahaha..sabar jer la..
so apit tengok ramai yang letak welcome image nie kat blog..
macam-macam style gambar ada..nice ja..
so ada yang nak letak tak? ikut tuto bawah k..

1. Log In > Dashboard > Dashboard > Design > Edit HTML > Tick Expand Widget
2. Di keyboard tekan CTRL+F dan cari code kat bawah nie..
]]></b:skin>
3. Now, copy code bawah nie dan paste di atas code kita cari tadi.
</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>
4.  Yang warna kuning tue letak URL image k!
5. Kalau jadi, Save Template..kalau tak jadi tanya budak comel nie >> KLIK
6. tutorial nie apit credit untuk LyssaSecret..
7. Kat bawah nie apit share image-image welcome note untuk anda..
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigrmcTRoWQKhr7WoHrA-ISkBRSwTHaIkx3Y2E8umKphNpQgFbyFMuYK-NCMm9wlqU1SfPcg21hDTjzKeYTVigUVVL8pAuk_IZ8c2tHMs-rcSCLxjOjFgkfqs7JtONnc7WeovDzpFRkkG8v/s1600/Welcome+Note+2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-CbsOGbWzmvnDgav4mqusNxne2b45kz8DnBBSyr4cO59ia2VaeNctZt5QGFQVlyh-Ph8o6tWaZ_kS4dFoHE-FPUpieNqGL0qm-LTCqyxrVKXmRAsSqRnLj0Hd_hUUHO3RVsaKWw0negF/s1600/Welcome+Note+3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigMaKi5oc0dw4ezPTWabux-bTka27HMour43er96FC8DqIT7ARNNDjA6VbsTuXlMqM8BoWFr86jhXfiUx6YwowwPaPbSzX6fX7pwNkHmMFRAqTy2ZjK2tmCSNddccc9ATE7KtkClnBUBuj/s1600/Welcome+Note+4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjNCrXbFPZShae3fky9Om9jN_wgPScPJujgDypl-edA_g6zs6kZ3TUsdL197PlmRpG0T9Dodb2dVrY6eXTw17yOqErLyqmaLc8OxgGVbrWeFsCzCAdW7rJ6YuRWTIOGu-u-tPay5PIVMsw/s1600/Welcome+Note+Pink.png

57 orang komen:

MadNip said...

skrg tggu lyssa post mcm mana nak bg code ni fungsi utk homepage jee ..

LYSSA FAIZUREEN said...

wahh dia punya image semua nye sempoi sempoi nohh.. jeles :)

Rawlins GLAM said...

besh..besh...suka...suka....thanks....

princess frozen said...

comel la..

Gary Asip said...

pergghh.. cara apit lagi simple la.. yang gary buat kat blog gary tuh kod dia kompleks gila... nak buat tutorial pun susah.. huhu~..

Gary Asip said...

pergghh.. cara apit lagi simple la.. yang gary buat kat blog gary tuh kod dia kompleks gila... nak buat tutorial pun susah.. huhu~..

ratu zuleyqha said...

salam apit.. thanks wt tuto ney.. saya curik satu image anda,, hehe :D

tia @ Ini Kisah Tia said...

menjadiiiiii . hehee . Tia ambik satu imej yeeee :)

Anonymous said...

comel2.. ain amik satu... :)

amanina nasuha said...

untuk apit

http://adramycien.blogspot.com/2011/08/nk-tunjuk-niec0meeyy.html

Alif Haris said...

eh yg ni sempoi je coding ..
hari tu sape punye nth kompleks kot ..pening2

Dianz Ipoh said...

apit .. amik satu yea :)

menjadi la :)

tq apit :)

si kerdil disisiNYA said...

hee amek satu k:)

NSR said...

take

MisS NaSiHa said...

apit..sy amik 1..comel sgt..tq..hehe

kerisperak said...

Blog orang kreatif memang berat loading apit.. don worry..hehehe, welcome image ni camne apit? macam pop up ke?

Ummi Fathiah said...

salam. macam mana apit buat banner untuk blog pilihan tu?? macam mana buat gambar2 kecik untuk blog pilihan tu?

Ummi Fathiah said...

welcome page punya banner tu bole edit sendiri ke? i mean buat design sendiri? kat mana nak buat design??

Puteeeeri said...

<3 ini belog mnyak2 !
thx kayyyooooou 4 this tuto ~
muahhahahahaaaaa ~

Aisyah Humaira said...

dah jadi . mekaseh :)

Nurwani_yusoff said...

ambil satu!hehee

Dania Bella said...

amek catu ! suke .

eyka only ツ said...

amek stu

Azzah said...

apit.amik satu yang last tu:)thanx

Unknown said...

saya ambik satu yerr..thnks 4 tuto nih :)

aIEn said...

salam apit...nak tnye la, kalo kite dh wat n tibe2 nk delete blik bende ni mcm ne ehhh??

plzzz

Unknown said...

Terbaik la....niza try code ni ye apit..<3 tqsm...

Dania Bella said...

Cute lar .. saya love it !

atyn bubbalicious ! said...

AHHH ! tnx ! sye dh jd ! maseh sesangad !

Ammar Bin Rothman said...

kenapa navbar1 hilang eh ?
nanti nak sign in atau sign out cm ne ?

Hahahahanis said...

menjadi. thanks. saya amek satu

Eika cika said...

eika ambil 1 apit :)

Fyza.blogspot said...

wa cute sgat...fyza ambik 1 ek..

Cyberflyz said...

nice..
buat gambar sendiri ngan photoshop..
then upload kt img hosting mna2..
baru best.. :)

aneyz said...

cute2 sume :)
aneyz amik 1 yek :)

Deleted said...

saya ambik satu k . :)

Anonymous said...

macam mana nak delete blik kalau dah xnak gune ? boleh tolong x ?

Anonymous said...

macam mana nak delete blik kalau dah xnak gune ? boleh tolong x ?

Amy Rose said...

amik satu yang warna merah , thanks :)

Adam Malaysian Idol said...

wak, xde ker welcome image utk lelaki? utk pompuan jer tu ha ... hu3 ..

zizi said...

ekin amik 1 . TQ :)

MARDIAH MOHAMAD said...

saya amik satu ye :) thanksss ..

MARDIAH MOHAMAD said...

saya amik satu ye :) terima kasih :D

Fie_zah said...

slm,, hafizz buleh x tolong buat welcome image yg macm merah punya tapi wrna pink...... kiter nk sangat...

Unknown said...

Saya ambil satu ye..^^ Sudah dikreditkan di blog~ Terima kasih sangat! Jemputlah singgah blog~ Haha. ^^

Ammar Bin Rothman said...

cam ne nak delete welcome image, pas 2, nak kembalikan navbar ? diminta penjelasan

Shaky Shake said...

Asalamualaikum.
Nak tanya sikit. knp selepas dah siap buta benda nie, dah jadi tp widget yg member follow tu x nampak gambo2 diorang. knp eh? tolong saya.

terima kasih

FIZGRAPHIC said...

@Shaky Shake : memang auto akan hilang gambar2 follower tue kalau buat benda alah nie :-) sampai skang tak tahu g nape..

Ammar Bin Rothman said...

nie dah kali ketiga saya menanyakan soalan ( cam ne nak delete welcome image, pas 2, nak kembalikan navbar ? diminta penjelasan ) maaf...huhu

FIZGRAPHIC said...

@Tengku Mahkota Amar Ibnu Sultan Rothman Al-Haj Muadzam Shah Alam : just buang code yang kamu letak tue jer lah..dah pandai boh code, mesti pandai terbalikkan step dia kan.. simple..

FIZGRAPHIC said...

@Tengku Mahkota Amar Ibnu Sultan Rothman Al-Haj Muadzam Shah Alam : just buang code yang kamu letak tue jer lah..dah pandai boh code, mesti pandai terbalikkan step dia kan.. simple..

Syafiqah Johar said...

kite ade amik satu welcome note . tapi sekarang . kite nak delete balik . tapi kite cube try padam code die tu . tak boley . ade error la . cane eyk ? boley tolong tak ? :)

Anonymous said...

Thanks thanks thanks . Lame dah cari tuto utk ni . baru jumpa . btw . pinjam satu keyh :)

SRHRFFR said...

cantek!!!sye ambik dan sye guna ya! thaz

Nurhanani binti Md.Zambri said...

cantik. Saye ambek dan gune oke :)

admin said...

oo, gitu ke? dulu ade cuba untuk blog lama, tapi rosak template tak sedia backup.

Tapi,coding tuto yang itu panjang sangat.

Unknown said...

thanks yea . i take yang warna pink tuhh . awesome :)