Cara Membuat Welcome Image (Blog Intro)

Jadi ketika blog anda dibuka akan muncul seperti gambar diatas dan jika di klik enter baru muncul halaman homepage blog agan, yang pastinya ini seo friendly karena berbentuk png alias cuma gambar, sebenarnya barusan saya sudah pasang tapi saya melihat kelemahan dari widget ini yaitu widget ini memiliki kode yang bentrok dengan penampilan foto para followers blog , maksudnya gini andaikan blog anda followers nya ada 70 nah pas anda pasang css ini langsung dah di blog anda foto mereka ngk akan muncul tetapi followers ngk hilang pas agan buka gambar zoom disebelah followers ataupun di www.blogger.com tidak berubah hanya pas di blog saja berubah. Jadi terserah agan mau pasang atau tidak

Kalau begitu langsung saja caranya
1. Masuk www,blogger.com
2. Tempalte
3. Edit HTML
4. Pastekan kode berikut diatas ]]></b:skin>

</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6El_KyV1Il3epaX0cbk2I3dejq-gDGFikpOak-zck8woHsUkTPzlFrM5rP0atrLHU2GaHhd9dYC02mFOrPi9xSb9rcu5FX2cc8qeJgHYbP3MKrHSJ3_RYgKZ5G5zmmIK2hzUSSDgolwk/s1600/b686e8f01dbe46958547250.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="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;"> 

Saya sengaja menampilkan kodenya dalam bentuk blackquote agar kalian nanti tidak bingung karena jika saya pake scoolbar maka nanti kodenya terlipat lipat saya juga bingung
Nah untuk yang link gambar warna merah / link gambar kalian ganti sesuka kalian kalau kalian pake yang itu berarti kalian pake yang kayak gambar dipaling atas itu loh
Silakan comment ya bila tidak mengerti