Tutorial 102 : Welcome Image dalam Blog.

Hot tutorial today..
Korang perasan tak ada some blog dia letak image..then bila click baru keluar blog dia.

Korang nak try this tutorial. Sungguh chantek yer..

contohnya macam ni :

ok itu my design..contoh jer hahha.. Nak try tak my honey-honey sekalian?? jom get ready!


Penting!!!#untuk langkah keselamatan sila download full template korang. Kang tak boleh jadi tak ler jahanam template korang kan :)

1. Sign in Blogspot > Design > Edit Html >

2. Cari code di bawah, Ctrl F dan paste dalam kotak find..enter!


]]></b:skin>
3. Bila korang dah jumpa code di atas, copy code di bawah dan pastekan di atas code yang dicari 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. Tukarkan URL IMAGE ANDA dengan korang punya url/link gambar kesukaan korang. Nak design sendiri pun boleh :)

5. Preview, kalau menjadi SAVE sahaja!

Nak gambar comel-comel? nahhh ni dia khas untuk korang. Aku design sendiri tahu..pilihlah yang mana berkenan di hati nurani korang...

http://4.bp.blogspot.com/-8FqXpCWHjpY/TlCafQj23LI/AAAAAAAABr4/Kc-bxGXKYAw/s1600/ciknurfarah1.png
http://4.bp.blogspot.com/-QywGewn7lDk/TlCag6-yAfI/AAAAAAAABr8/FGyuT2XCp0s/s1600/ciknurfarah2.png

http://4.bp.blogspot.com/-LSuvXKTMWgY/TlCaiNTG1WI/AAAAAAAABsA/5H1J7LbWXoY/s1600/ciknurfarah3.png
http://1.bp.blogspot.com/-8dkuBVer3ik/TlCamv7sktI/AAAAAAAABsE/6qgZxzm_ouw/s1600/ciknurfarah4.png

http://3.bp.blogspot.com/-PagUkG0ZC0A/TlCanrfHMII/AAAAAAAABsI/EUbyXBqDwHM/s1600/ciknurfarah5.png


# semuanya girly-girly..ikut citarasa I la bila I yang design..uolls nak citarasa sendiri sila design sendiri yer sayang sekalian.. :)

k baiii @___________________@

P/s : kalau nav bar korang jadi semacam..turun ke sidebar, try tutorial ini
http://bicarafarah.blogspot.com/2011/07/tutorial-73-delete-navigation-bar.html

# Kalau sebarang masalah ketika mencuba tutorial ini saya tidak bertanggungjawab yer..kan dah kata suruh download full template ( sebab this widget maybe tak sesuai dengan some template, harap maklum )



Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
108 Comments for "Tutorial 102 : Welcome Image dalam Blog."

eh sukenye tuto nie..sye mek satu..thanks a lot..-)

thnx..dh jadik dh.heeeee...amik design tu eyh...dh lama dh cri tutorial ni..hihi..jemputlh singgah belog fara eh nti sng2 follow lh..

nak tnye..cane ea ble da wat tue kluo navbar..

@AzahraGamalAbdulNasir

try buang ikut tutorial sebab masa save tutorial ni dia kata nak save widget navbar..so delete je kalau xnak :)

Suka tuto nie . I ambik stu ehhh ;DDD

sy ambik 1 ye :).. owh ya..cmna erk nk bwt shoutbox cm awk pnya ni??

alamak kak,sya wat mnjadi tp npe nav bar sye da turun ke bwah & xleh nk ubah?cmne ni kak?t0lh syer! =(

cmne sye nk buang balik welc0ming bl0g tu?dah try tp xjd & error~

@miraedo92

masa save tadi better delete je nbar.. adik try tutorial buang navbar..

wahhhh!!!!!cute nyerww....cool larr...sye da try..jadik pulak tu..huhuhu..beat nyerww,,trimas kak farah...

awak , mcm mane nak design sendiri ?
:/

akak..yg size gmbar tu tak kisah eh cmane?

akak.. kite na amek satu jugak.. tapi, kite da ade message box bile mule2 bukak blog.. yang mcm disable right click tuh.. so,, kne delete yang tu dulu ke??

saya dah try buat, tp blog saya xjadi la, xboleh masuk kat blog... :(

kita balik lagi.. dah coba dengan teliti,,, dah jadi pun :) tq Cik Farahhh :)

salam....terima kasih byk...saya amik satu..dah jadi dah utk template designer.....jom singgah blog saya plak....

tutorial yg best...sye try satu okie donkie

akk. cmne eh nk buang bnda ni.d bila sy try buang die ade ckp sal navbar1.. cmne ye..hope sgt dpt bls secepat mungkin :)) terima kasih yee..

@.rai.di.sini.

ada save full template?

kalau ada pakai semula y save tu..mybe tmplate dh error

nice ! saya amek satu image tu ! tq sgt2 !

knp saya preview , invalid ?? huhu

akq x jdi laa ....napew erk...bila sy preview die ktew invalid

anna ambek satu ehh ,yang ada assalamualaikum tuh .cute sangat .thanks akak :)

Sye nk ambik 1 nih eh :) .. yg assalammualaikum nye cute :D .. thxx akk farah

akaq,camne nk download nyer?(kat ne?)

saya da buat tuto ini . heee :DD
thanks miss :)

best sgt tuto ni! mintak izin ambik satu nak pasang di blog. rajin2 usha la http://nazzuha.blogspot.com/ ;)

alorh..td da cncel..tp jd gk..blom download full tmplete lg...camane nk buat..xleyh nk edit pown :(

sorry nak tnye .. tpi sblom 2 thanx .. sy da jdi buaat mcm d'atas .. tapi npe slpas 2 sy punye sing out ,design n sume2 yg ade kat atas skali 2 hilang ??

thanks for d tuto.. amek 1 ek. ;)

akak, saya amik satu tau. thanks.. :)

HEY , alhamdulillah , ikodd tutorial awk , smuanya mnjadi :) terimakasih yaa :D

Alia ambil yang first tao ! thankss kakak . muamuamuahhhh <3

saya suka tuto ni!saya amik satu ye!thankss!Visit my place back :)...

saya suka tuto ni!saya amik satu ye!thankss!Visit my place back :)...

thankss 4 the tuto.ambik 1 yer.r

Thank you, tengah cari tutor ni lah :)
Jumpa juga. Ambil satu ye. Thank you again :D

thanx kak, anyway sy dh cuba dh.. memang menjadi.. sweet sgt.. kalo rajin singgah la ke blog sy ye ^_^

akq...mcm mne nk credit akq...x reti larh...:(

thanks kak ! da jadi da . berguna btol tuto akk ni .

hah,yg ni lah,mcm mana nk download full template,sorry tanye :) x reti sgt lahh :(

najwa dulu ade buat bende nih . gune akk punye gambar. tp sekarang budak2 dah ta gune tuto ni, so, najwa nak buat welcome image nih . tp macam mane eyh ? die ta nak buang2 pun ? bole akk tolong ta ??

assalamualaikum :) Cik Nurfarah ..cikemy dah copy code ni...& paste dgn image url sndri...buat die kaluar ni...

Warning: Your new template does not include the following widgets:

Navbar1
Would you like to keep these widgets on your blog or delete them?
Deleting widgets cannot be undone.

so ape yg patot cikemy buat ekhh..??!

@nurul najwa

Seeloknya buat back-up. Ikuti arahan tutorial sebelum buat tutorial.

@Fizlina

buat back-up.

itu sama ada nak kekalkan navbar atau x..

This comment has been removed by the author. - Hapus
This comment has been removed by the author. - Hapus

Assalamualaikum , nak tanya sikit.
Kalau kita search blog , pastu tkn link tu , memang akan keluar gambar tu eh ? Takleh ke kalau gambar tu keluar masa kat Homepage je ? Page lain tak keluar gak .. Anyway , nice tutorial and thanks :D

kak..
saya nk gune welcome sign yg saya design sendiri..
to mcm mane nk masok kan??

kak Farah , kalau nak buang macam mana ya ?
saya cuba buang , tapi xboleh .
thanks . :)

"download full template" tu mcm ne ek ? =)

comel la...amek satu ek...
tq cik nurfarah..:)

wahh , comel sangat :) Nadia amik yer ? Thnkss :D

salam.

saya buat xjadi lah. bila preview jadi tp bila nak save template keluar "sorry, but we were unable to complete ur request" . nak buat cmne ye?

Thanks akak!!dulu saya ragu ragu nak buat,setelah saya download full template akhirnya menjadik!!1sayang akak!!

saya amik satuu sayang! thanks for yr tuto!

kak farah..saya amik yg no 2 tue..bila dah copy preview dapat ...tp bila dah nak save tak dapat pulak?..nape yea :(

Cik Nurfarah,,
Mau tanya,, kalau mau menghilangkan welcome image ini gimana ya?
Pening tak bisa ganti background setelah pakai welcome image,, :D
Thanks before,,
:)

@Dyera

saya sarankan download full template sebelum menggunakan tutorial ini sebgai back up.

akak , da jadi da . saya amex satu tauu .
terima kasih . :)

Assalamuaikum kak Frah, saya buat dah jadi dah tapi dia bukan kat center, camne nak center kan?

Knape navbar trun ke bawah ? pliknye! dah banyk kali buat tapi tak bole. navbar tetp ke bawah. kalau delete widget, lansung tkde orng follow. nasib saia download full tamplate. hish !! ta menjadi !!!!!

saya amik satu yek awak...tima kasih.....

terima kasih banyak-banyak.kak farah dah banyak membantu.mesti penat buat tuto kan???

akak..da 2 3 kali cube..ta jdi..):

hi, I have follow this tutorial, but how to place it in the middle and center of the page? thank you :)

akak farah..
sory klau sy ni tukar topic..
tapi mcm mn akak letak yg cursor tu..
mcm..bile cursor tu sentuh link nanti cursor tu tukar..
mcm mn erk?
tolong ajar.. *Q*

ehh suka la tuto ni , saya amek satu ya sis :) . thanks . love u <3

Assalamualaikum akak . macamane ehh nak hilangkan welcome note click enter kat blog ?

comey.. suke3.. saya ambik ni..

akak.. mcm mne kalau nk buang benda ni eh ? thankyou :)

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)
Pesanan:
Anda tidak dibenarkan sama sekali mengambil/menyalin/menyimpan/print screen mana-mana kandungan blog ini kecuali atas keizinan tuan punya blog. Tuan punya blog tidak teragak-agak untuk mengambil tindakan undang-undang jika hak persendirian ini dilanggar.

Pendapat penulis tidak semestinya kekal.
Cik Nurfarah

Related Posts Plugin for WordPress, Blogger...
Back To Top