Tutorial Welcome Image di Blogskin


Hey hey there!! Ini ialah post Diya yang kedua di 2012 nie..Jadi DIya nak buat tuto pasal welcome image di Blogskin.



1.Pergi ke Template


2.Click F3 dan search kod  </style>


3.Copy code ni

.hallo {
text-align:center;
margin-top: 250px;
}

4.Pastekan di atas kod </style> tadik.

Divider Graphics

5.Ok lepas paste kod tu,.click F3 dan search kod  </head> pulak.Then copy code bawah ni

<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="hallo" onClick="javascript:toggle('wise', 3000); this.style.display='none'; document.getElementById('june').style.display=''">
<img src="http://img713.imageshack.us/img713/1038/excontoh.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;">







7.Pastekan kod tu di atas kod  </head> 


8.Preview dulu then Gantikan tulisan merah dengan image korang.Nak ambik bawah ni pun boleh.u r welcome
http://3.bp.blogspot.com/-oZeb9SvOE1E/TwATJ8otI5I/AAAAAAAAAhY/Lk-G7_SjJ-E/s1600/welcome6.png



http://4.bp.blogspot.com/-gUODuM_LPIU/TwATTZE96EI/AAAAAAAAAho/yQGr2Dy2Bhw/s1600/welcome2..png


http://2.bp.blogspot.com/-R-ezUWaCfLI/TwATXrf6lhI/AAAAAAAAAhw/91B8EkGrPHo/s1600/welcome3.png




http://2.bp.blogspot.com/-lHg2JO1AvuQ/TwATeY01q8I/AAAAAAAAAh4/nBIIcBKDv2Y/s1600/welcome4.png


http://4.bp.blogspot.com/-kyeld2eFgBQ/TwATgkIiVhI/AAAAAAAAAiA/UPsbzngjxK0/s1600/welcome5.png


dari blog miss d'ya 

http://i1101.photobucket.com/albums/g422/Dekya135/welcome1.gif


 
http://i1101.photobucket.com/albums/g422/Dekya135/welcome2.gif


 
http://i1101.photobucket.com/albums/g422/Dekya135/welcomeheader3.gif


 
http://i1101.photobucket.com/albums/g422/Dekya135/welcomeheader41.gif


 dari blog adrianafahrna

 
http://3.bp.blogspot.com/-SZqAnEZ5_VY/Tqa_yQKpsWI/AAAAAAAABUU/Bw14c2RtDbY/s1600/welcome2.png 


 

http://4.bp.blogspot.com/-X5_U5lsvK3Y/Tqa_z0MxYGI/AAAAAAAABUc/uOOYahAwiZc/s400/welcome3.png


 
http://1.bp.blogspot.com/-nCgVzIxcymA/Tqa_wWmLjWI/AAAAAAAABUM/CkIDNukLLG4/s400/welcome1.png


dari blog adah
 






nak ambik pape sila komen dulu k-

161 comments:

  1. kak, knape x jd erk..? welcome note tu kat bwh copyrigt..

    ReplyDelete
  2. Misz Roro,mayb awak letak something kot dkt opening blog awak.try delete salah 1

    ReplyDelete
  3. TAK jadi la. dia jadik dekat bawah header

    ReplyDelete
  4. aienrosman ,kalau macam tu,maknanya awak ada letak something dekat atas header awak.delete dalah satu,insyaallah boleh:)

    ReplyDelete
  5. akak, saya ambik satu tauuu. :) jangan marahhh ^^

    ReplyDelete
  6. wahh ,cantik nyer >_<
    nak nak ! tapi kan ,sy buad tak jadi la :(

    ReplyDelete
  7. sayaa amik satuu tauu tauu :] thanks :p

    ReplyDelete
  8. sy ambik satu ek...terima kasih...

    ReplyDelete
  9. saye amek satu eh. Nk tye. Camne klau saye nk wat sendrik?

    ReplyDelete
    Replies
    1. klau nak wat sndiri,blh je guna photoscape ke photoshop ke.ikut size yg awak nak k^_^

      Delete
  10. This comment has been removed by the author.

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

    ReplyDelete
  12. saya ambiksatu..osem..!tuto kat sini mmg best semua buat menjadi.tq diya..<3

    ReplyDelete
  13. Akak ohsem :D masheh saya amik satu k ? :')

    ReplyDelete
  14. Assalammualaikum ~ akak ~ saye amik satu ye .. ;3

    ReplyDelete
  15. akak .... saye tak kod tue... ada kod lain kha ? huhu

    ReplyDelete
  16. em,k.diya,,klo dye tade head ,cmner plak?? TT_TT

    ReplyDelete
  17. Ala duduk bawah header !! MCm mne nie !!

    ReplyDelete
  18. saya ambil 1 ya....tapi gmbar ada di bawah haeder macam mna???

    ReplyDelete
  19. akak , kita amik satu ehhh ! thanx akak :*

    ReplyDelete
  20. assalamualaikum,dah tekan F3 but tak keluar code style tu.macam mana eh? lifelikeaflower.blogspot.com please reply :( at this email liyanaalfa97@gmail.com

    ReplyDelete
  21. akak , saya ambik satu eh . thankyouu :)

    ReplyDelete
  22. nak satu boleh ? thanks kalau bagi , hehe , lps tuh , pandainyee akak buat semua bende2 nii :D

    ReplyDelete
  23. sy pun na amik jugak la.. ^,^
    thnx.. comel..

    ReplyDelete
  24. akk nape saya punye blog .....welcome image kat bawah saya buat at kawan saya bleh but kat saya x menjadi ... nape??? atas post pastu bila scroll ke bawah baru ada welcome image !!!

    ReplyDelete
  25. yes ! finally , success , thanks a lot yah :)

    ReplyDelete
  26. Akak!!! Cantik sangat. Nak ambik satu ye? Anyway, terima kasih. :) Muah setepek :*

    ReplyDelete
  27. Saya amik satu ,,syukran,, >___________<!!

    ReplyDelete
  28. Salam :) diya , kita amik satu yew . thanks sebab bagi tutorial nieyhh . super bestt :)

    ReplyDelete
  29. Terbaiklah kak dhiya, saye amik satu, tau. yang last. tu. serious, cute. :D

    ReplyDelete
  30. cantekss sgt..nk satu ye...permission plz...

    ReplyDelete
  31. thanks. saye amik satu. macam mane nak buat sendiri ek? gune photoscape boleh tak? macam mane cara yee?

    ReplyDelete
  32. cantik sgt.. saya mintak izin ambil satu yer... hehehehe

    ReplyDelete
  33. kak, sy amik satu.. tp saya punya trlalu bottom.. kne scroll down bru bole tekan... camne nak buat kak?

    ReplyDelete
  34. hi dear saya amik yer, tapi mcm mana nak adjust kedudukan dia yer? sbb mcm double dgn background :(

    ReplyDelete
  35. Terime kasih and sye ambik satu

    ReplyDelete
  36. saya ambik satu ye kak... :3

    ReplyDelete
  37. Akak saya amik tau ? tuto ni mmng senang ! Thnkyou akak :c

    ReplyDelete
  38. kak , saya ambik satu ye :)

    ReplyDelete
  39. akk knpe die dekat bawah copyright?

    ReplyDelete
  40. Waw! Imut imut ya Headernya! aku boleh Izin simpan dan make gak? makasih :)
    Salam Blogger!
    Kunjungi Blog aku ya http://farahtutorial.blogspot.com/

    ReplyDelete
  41. akak, saya amek ok. tapi kan aka. mcm mana nak replace imgae dekat blog :( pelis pelis thanks akak

    ReplyDelete
  42. lawa laa :D :D
    saya amik satu yee
    thnxx ye

    ReplyDelete
  43. saya amik satu yee..terima kasih bebanyak.. :)

    ReplyDelete
  44. awesome! . Saya copy satu ye . Tq

    ReplyDelete
  45. nape die kat bawah header..klau blogskin yang lain header..

    ReplyDelete
  46. umi ambil satu ^^ banyak tips umi dapat dri blog ni ^^ hope sudi follow me http://www.umiekhairudin.blogspot.com

    ReplyDelete
  47. Amik satuu !! thanks. toturial yg mudah dfahami :D

    ReplyDelete
  48. Kak Diya macam mana nak buat mouse pointer corak yang lain???

    ReplyDelete

What do you think? Leave a comment :)