☏ Blog Idol ☎

TUTORIAL:Macam mana nak buat ' Welcome Image '

Assalamualaikum , guys.Hari ni FQ nak buat tutorial "Welcome Image".Mesti ramai yang dah tahukan Welcome Image tu apa.Tapi kalau ada siapa-siapa yang tak tahu nilah Welcome Image tapi ni Welcome Image FQ :


(But Ada Some Template Yang Tak Sesuai Untuk Code Ini)


  Go To Dashboard  > Template (Blogger Newer Interface) > Edit HTML

 Cari code ni : ]]></b:skin> : Kalau nak mudahkan penvarian tu just tekan Ctrl F

 Kalau korang dah jumpa code itu pastekan code kat bawah ini di atas code 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"
  • 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>
(jangan pulak korang copy bullet tu .kalau korang copy meme'ah tak jadi)

 URL IMAGE tu korang tukarkan dengan url gambar yang korang nak letak nanti.

 FINISH ! Kalau korang nak cari URL korang boleh cari di Blog Cik Farah or Blog Kak Lyssa Faizureen ataupun  korang boleh buat sendiri.

Tips ==>Kalau tak nak download full template guna template (Pitcure Window)

Kalau ada problem just tanya di ruang komen or c- box nanti FQ try untuk jawab ok.Selamat Mencuba!!

No comments: