loading...

Saturday, December 4, 2010

How to create a Splash screen in blogger using jquery

Have anyone  noticed the  splash screen when you visited the apple website yes you should. By this inspiration Martin Angelov of tutorialzine created a tutorial on how to make a Apple-style splash screens using the jquery.

So i decided to create a Splash Screen in blogger using the above procedure.Its awesome to have a Splash screen in blogger and follow the below instructions to integrate .to blogger.


How to create a Splash screen in blogger using jquery
for the clear understanding of the code look for tutorialzine.here i will explain how to place the code correctly in blogger to have a Splash screen which look this in blogger http://splashscr.blogspot.com/(demo).
Constrains:
All blogspot users know that its difficult to load directly the intro page,thats the only constrain you could be having using splash screen.

Step1
find </head> and paste the below code.I have used if condition so that it loads only for the homepage.if you want it to be loaded for every page then remove this <b:if cond='data:blog.url == data:blog.homepageUrl'>.....</b:if> statements.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://dl.dropbox.com/u/13256471/splash-screen/js/jquery.splashscreen.js'/> 
<script type='text/javascript'>
$(document).ready(function(){

 $(&#39;#header&#39;).splashScreen({
  textLayers : [
   &#39;http://dl.dropbox.com/u/13256471/splash-screen/img/welcome.png&#39;,
   &#39;http://dl.dropbox.com/u/13256471/splash-screen/img/make.png&#39;,
   &#39;http://dl.dropbox.com/u/13256471/splash-screen/img/new.png&#39;
  ]
 });
});
</script>
</b:if>

Step2
Add the following Styles just above ]]></b:skin> field.
It would be better if you use png images.here i have used the header section for the effect.Make sure that you add a image to header using the page header gadget and also see to that the css rule of #Header1_headerimg have margin top value to be equal to the texttopoffet value in the jquery.splashscreen.js file(this is for the perfect alignment).
#header{
background-image: url(http://dl.dropbox.com/u/13256471/splash-screen/img/splash.png);
height:150px;
 margin-bottom:15px;
background-position : center;
}
#splashScreen img{
 margin:0 auto;
}

#splashScreen{
position:absolute;
 top:0;
 left:0;
 height:100%;
 width:100%;
 background-color:#252525;
 background-repeat:no-repeat;
        text-align:center;

}
#Header1_headerimg{
margin-top:10px;
}

Thats it you are ready to Splash blogger

6 comments:

  1. Hey but how do you change the text on the splash screen ?

    ReplyDelete
  2. the text can be changed only in the image if you liked to change the text then create a png text image in photoshop

    ReplyDelete
  3. I enter the code correctly..
    but why this code doesn't work correctly in my blogger?

    ReplyDelete
  4. Used this as my loading screen, because I couldn't do the ajax thing. It says Loading... for a second. Cool. Check it out at my blog

    ReplyDelete
  5. How do you get the dropbox without the "https://" . I only get a secure http link which blogger doesn't permit?!?

    ReplyDelete

fuzionpro Headline

fuzionpro