Sunday, August 21, 2011

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...

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKvDH47sGem9FWiInLAyma4oYt5NUH10ZAOvi38Vn5x9v0r3RwR80ly5vIA2yOlEnViFYZEh66rI2yDruS-UvsQhgMuzh-Ttj9FnNhRjckkzxAop5TQg0_Ps9OHxmTbfbctLOklmCVY4/s1600/ciknurfarah1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioYhEDs3yR6c_JgDndtgTm8-BamJykDA1384a53FcXaTRe5mPoeHwdjQR8LCludghDinJ2bcd2p5XMCu8DM_liT0hKnsuriwBeEp19M5PcC6bAurKS2s3BmVNxXFytajUzKfOYor2DeWA/s1600/ciknurfarah2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieiQNpe1e9spnAI_L6xvOOGGaaNVj9mJhJPxxDgOd5g_3p2hGCBVZh0pP-mkKcHMmHKkvfClKc_l8alQfR53wSexvGeRLtqDFF2hWFTP_12foU1qSU6NrFKGO-HRgJ6-p7eFBsv5qYJK0/s1600/ciknurfarah3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxyLA0z5EGtBcCbeBO6r2IRHc-t9LuFdPTVuGBRwMWWcV4T6RnnU54B_-zuJnDFRT9AM22brngv7ND31OjN9TsSxwx-OydxJKprcqomQZH8wytj_WXrENNzJ5fREn02uS0iCxqydSVQ8/s1600/ciknurfarah4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfOsHFKiADUyqxYPAymMBbJbk4xwiTKbclmyd7xRpAd799OQcR2HFd-nm1jPtLMM0IKd6sbD-qao5P6YRJJfWbgPW6YASPFa1Sns8Tjc24qAE2yYiykn5duu7kVZBCH9HVTMUOli_EAcI/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:

108 comments

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

    ReplyDelete
  2. 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..

    ReplyDelete
  3. comeyllll.....*____*

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

    ReplyDelete
  5. @AzahraGamalAbdulNasir

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

    ReplyDelete
  6. Suka tuto nie . I ambik stu ehhh ;DDD

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

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

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

    ReplyDelete
  10. @miraedo92

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

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

    ReplyDelete
  12. awak , mcm mane nak design sendiri ?
    :/

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

    ReplyDelete
  14. @abby gendoot

    gunalah photoshop atau sewaktu dgnnya :)

    ReplyDelete
  15. 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??

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

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

    ReplyDelete
  18. tq bergune sngat :D

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

    ReplyDelete
  20. tutorial yg best...sye try satu okie donkie

    ReplyDelete
  21. 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..

    ReplyDelete
  22. @.rai.di.sini.

    ada save full template?

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

    ReplyDelete
  23. nice ! saya amek satu image tu ! tq sgt2 !

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

    ReplyDelete
  25. kenapa followers sume hilang ?

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

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

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

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

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

    ReplyDelete
  31. 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 ??

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  42. 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 ??

    ReplyDelete
  43. 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..??!

    ReplyDelete
  44. @nurul najwa

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

    ReplyDelete
  45. @Fizlina

    buat back-up.

    itu sama ada nak kekalkan navbar atau x..

    ReplyDelete
  46. This comment has been removed by the author.

    ReplyDelete
  47. This comment has been removed by the author.

    ReplyDelete
  48. 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

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

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

    ReplyDelete
  51. "download full template" tu mcm ne ek ? =)

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

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

    ReplyDelete
  54. 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?

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

    ReplyDelete
  56. saya amik satuu sayang! thanks for yr tuto!

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

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

    ReplyDelete
  59. @Dyera

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

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

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

    ReplyDelete
  62. 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 !!!!!

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

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

    ReplyDelete
  65. nak design welcome image tu kat mana ye?

    ReplyDelete
  66. nak design welcome image tu kat mana ye?

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

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

    ReplyDelete
  69. 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*

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

    ReplyDelete
  71. Akak nape x jdi eik

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

    ReplyDelete
  73. comey.. suke3.. saya ambik ni..

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

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH