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

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 )



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. nak tnye..cane ea ble da wat tue kluo navbar..

    ReplyDelete
  4. @AzahraGamalAbdulNasir

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

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

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

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

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

    ReplyDelete
  9. @miraedo92

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

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

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

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

    ReplyDelete
  13. 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
  14. saya dah try buat, tp blog saya xjadi la, xboleh masuk kat blog... :(

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

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

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

    ReplyDelete
  18. 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
  19. @.rai.di.sini.

    ada save full template?

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

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

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

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

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

    ReplyDelete
  24. akaq,camne nk download nyer?(kat ne?)

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

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

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

    ReplyDelete
  28. 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
  29. akak, saya amik satu tau. thanks.. :)

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

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

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

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

    ReplyDelete
  34. thankss 4 the tuto.ambik 1 yer.r

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

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

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

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

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

    ReplyDelete
  40. 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
  41. 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
  42. @nurul najwa

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

    ReplyDelete
  43. @Fizlina

    buat back-up.

    itu sama ada nak kekalkan navbar atau x..

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

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

    ReplyDelete
  46. 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
  47. kak..
    saya nk gune welcome sign yg saya design sendiri..
    to mcm mane nk masok kan??

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

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

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

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

    ReplyDelete
  52. 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
  53. Thanks akak!!dulu saya ragu ragu nak buat,setelah saya download full template akhirnya menjadik!!1sayang akak!!

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

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

    ReplyDelete
  56. 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
  57. @Dyera

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

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

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

    ReplyDelete
  60. 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
  61. saya amik satu yek awak...tima kasih.....

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

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

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

    ReplyDelete
  65. 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
  66. ehh suka la tuto ni , saya amek satu ya sis :) . thanks . love u <3

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

    ReplyDelete
  68. comey.. suke3.. saya ambik ni..

    ReplyDelete
  69. 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 :)

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.