Do you want to welcome image appear in your blog before visitor can read your blog content. Now many blogger had use this widget to decorate they blogger look more interesting.You also can changes the picture when ever you want
1.Go to Blogger Dashboard
2.Click template Design >> Edit HTML
3.Find this code: ]]></b:skin> in html code
Then paste below script ABOVE the this code ]]></b:skin>:
</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>
Replace the red word with your image url
4.save your template then preview
7 comments:
This code had removed my navbar tab and i'm unable to revert my template!
hi... it's doing good. but the image is placed in top centre, please make it appear in middle of the page...
THANK YOU SO MUCH!!!! Really helped me!!
Just awesome man
Index page ko ek naya look aaya...
thax for uploading this code
Looked for an easy way to do this, and found it! Thank you so much!! All other sites I found were too confusing. You made it so simple to do and I love what I have created!
website design
What should I do to make it stop appearing if the visitor is just going to another page, or going back to the home page from an inside page?
Interesting post. Thanks for sharing with us.
Popup builder for magento
Post a Comment