Friday, 14 September 2012

Cara Mudah Pasang Welcome Image di Blogspot

Welcome image ini adalah imej akan terpapar bila kita mula-mula masuk ke blog.Kita perlu klik pada imej tersebut bagi memasuki blog berkenaan.Rasanya sudah banyak blog yang memasangnya dengan berbagai imej.Jika ada yang berminat untuk membuatnya.Ikuti langkah-langkah di bawah ini:


1.Log in ke Dashboard
2.Pilih Design >>Edit HTML


3.Cari kod  ]]></b:skin> pada template
Kemudian masukkan kod dibawah ini diatasnya:


</style></head>
<script language="javascript" type="text/javascript">
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);
}
}

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);
}

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('ybl', 3000); this.style.display='none';
document.getElementById('tbb').style.display=''">
<center><img src="http://i219.photobucket.com/albums/cc282/garam63/welcome.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"/></center>
</div>
<div id="ybl" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="tbb" style="display : none;">
<body>

#bahagian teks berwarna biru boleh digantikan dengan url imej anda sendiri

4.Kemudian simpan template anda
Selamat mencoba semoga berhasil.....

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

NO SPAM :
Komentar yang memasukkan link active tidak akan di tampilkan atau terhapus secara otomatis.