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
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2i2dyIU4w3JAY5iVmURJk0kyn4F5hGFCzc0uGaU2g9jxy2BDPasSw4UJQoDL1DxbUD9pfHW1lqtKBKilqI2pLFt-w-PDmmg6GUxpvz33Tc1IS9Bj1KwlXWhsSZLK9XkPe2w4u2AmsI8/s1600/welcome6.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXwu6fY-IwvpufpYCXpsZMl9ffPUU19ZawuLOyFG2EDH7RgxLcdTk1YJcqfFM_xutufwiW_y1LP7M9EAijfk10CmtSUAEftwrN72Y8pzgOJ3cl7pjw_AfSWyt1BAXOKpxPNnK46oi22q8/s1600/welcome2..png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZMw3Q6Ps1ZhmyGGO-cC5L6PBk7nfmbFHnFEAjddy_4CoxJ4OrUYzK1xvt9gonGaoIobOB9wB_6ZNK8oEyvfjVFmFiIt7W2exTeuTppcAQpde6vmGCQI2CqDd9mQdE_1r3flnuH60wMQ/s1600/welcome3.png




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZBdA4QigjKLB_Gu5bDmM_qn6VnkT-icTi1j6gMqad6Ru9_8isV5lQ901Aw3W7qR0N8subO5ZhyphenhyphenT9omRhdXQKtp-W6IdLJD57rW4HpmSUMB_dh3BylC-f7fKjUesR9s0Fx6x2n-_9lYM/s1600/welcome4.png


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

 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJieiHdudTBcYFb0crldGGoOC8Bo7-nrLrDCLRzmSCOSpHhsZcVaBAH4OMgYo_2SI0grq4jF_6uRcFPgR9F6ruWlaNq1X6uxFmXZCgFbLIfzT7XxWQzkCayHpSTvtmXDphS0CbmdoMBkiG/s1600/welcome2.png 


 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9GrybknPWxUMcxEXObrv0E-ADeCrsrwUzNn1xql8ZDrN7uCf-cZKSQxThKt0S8-E9LgcSdb5zhrUrUQpRfZjV3NeS2i3KvcWTHOQoYP0i_rJNMiii8t_5vpz4UaJhkAkvxpusiy7TyDX/s400/welcome3.png


 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGnP55tSs7m1wi8SjwKzWLZd93gVLGwVZ6Iqk3QbAiOLnBd8x0q0mJrGSeq13mW26eizoQsMg17EuAHmNO6PCZHnVTTdUwt6hBOk75Ec_tolURSkQ82R2NWj8zqnOFLWaZrSTOGkKdtqy3/s400/welcome1.png


dari blog adah
 






nak ambik pape sila komen dulu k-

161 comments:

  1. izatyy sentiasa comel ,ambik je:D

    ReplyDelete
  2. Akak saya mintak satu boleh ??

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

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

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

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

    ReplyDelete
  7. cantiklah .. saya amik satu tau :)

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

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

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

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

    ReplyDelete
  12. 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
  13. This comment has been removed by the author.

    ReplyDelete
  14. take one. thanks kak :D

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

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

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

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

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

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

    ReplyDelete
  21. salam.. nak ambik satu .. :)

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

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

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

    ReplyDelete
  25. 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
  26. akak , saya ambik satu eh . thankyouu :)

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

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

    ReplyDelete
  29. 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
  30. yes ! finally , success , thanks a lot yah :)

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

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

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

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

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

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

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

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

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

    ReplyDelete
  40. Terime kasih and sye ambik satu

    ReplyDelete
  41. Saya Ambil Satu Ye :) Terima Kasih !

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

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

    ReplyDelete
  44. kak , saya ambik satu ye :)

    ReplyDelete
  45. akk knpe die dekat bawah copyright?

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

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

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

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

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

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

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

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

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

    ReplyDelete
  55. assalam saya amik satu ;)

    ReplyDelete

What do you think? Leave a comment :)