How to Setup Animated Static Home Page for My Blog

Are you willing to know how I have created my animated static home page for my blog. Find below the complete code I have used to create my blog's home page. You need not to be a flash website designer. Here is how to build fixed type home page with the below little scripting. You can use this for your blog too. You can also do a little top-up by setting image files as background of the animated platform. This will enhance look and feel of your newly designed blog site. For this, you have to edit template and add image links in the header section of your blogger template.

Step one: Copy the code below and paste it on a notepad and modify according to your requirement.
Step two: Create a blog post.
Step three: Go to HTML tab and paste it.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Home page of Masteradvisers' Blog</title>

<script type="text/javascript">

//SETUP:

var imageCount = 5; // you can change no of images as per your requirement

var changeSpeed = 3; // duration of fade

var fadeSpeed = 0.5; //second the fade works

var fps = 25; // setting frames animation/sec

//FUNCTIONS:

var topImgID

var changeInterval

function $(id){

return(document.getElementById(id));

}

function changeOpac(obj, opacity) {//change the opacity for different browsers:

obj = obj.style;

obj.opacity = (opacity / 100);

obj.MozOpacity = (opacity / 100);

obj.KhtmlOpacity = (opacity / 100);

obj.filter = "alpha(opacity=" + opacity + ")";

}

function changeImage(){

var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list:

var nextImg = $('banner'+nextImgID);

var lastImg = $('banner'+topImgID);

var opac = 0;

changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:

lastImg.style.zIndex = 2;

nextImg.style.zIndex = 3;

var fadeInterval = setInterval(function(){ //run fade on interval:

if(opac < 100){//continue fade:

opac += Math.ceil(100/(fadeSpeed*fps));

changeOpac(nextImg, opac);

}else{//end fade:

lastImg.style.zIndex = 1;

clearInterval(fadeInterval);

}

}, 1000/fps)

topImgID = nextImgID; //prepare next fade

}

function startBanner(firstImageID){

topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);

$('banner'+topImgID).style.zIndex = 2;

changeInterval = setInterval(changeImage, changeSpeed*1000);

}

</script>

<style>

.banner{position:absolute; z-index:1; height:230px; width:520px; margin-left:120px; top:70px; background:#FFF; border:solid 2px #CCC}

.banner h1{position: absolute; margin-left:200px; bottom:20px; right:18px; font-style:italic; color:#444; float:right; width:50%; font-size:40px; text-align:right; line-height:100%;}

#banner1{background:#00DDDD}

Tip: // in case of image use this{background-image:url(IMAGE URL);}

#banner2{background-image:url(images/banner2.jpg);}

#banner3{background:#F90}

#banner4{background:#FFC}

#banner5{background:#99CCFF}

</style>

</head>

<body onload="startBanner(1)">

<div align="center" id="bannerbar">

<div class="banner" id="banner1">

<h1> Tip: spice up with <h1 style="color: violet; font-family: verdana;">

Welcome to Masteradvisers Blog</h1>

</div>

<div class="banner" id="banner2">

<h1>

Here We try to provide</h1>

</div>

<div class="banner" id="banner3">

<h1 >

Some information on</h1>

</div>

<div class="banner" id="banner4">

<h1>

best practices of</h1>

</div>

<div class="banner" id="banner5">

<h1>

Information Technology</h1>

</div>

</body>

</html>

see live example click here

you also need to know how to setup static home page for your blog

Monday, October 21, 2013