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 jqueryfor 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.
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).
Thats it you are ready to Splash blogger
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
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(){ $('#header').splashScreen({ textLayers : [ 'http://dl.dropbox.com/u/13256471/splash-screen/img/welcome.png', 'http://dl.dropbox.com/u/13256471/splash-screen/img/make.png', 'http://dl.dropbox.com/u/13256471/splash-screen/img/new.png' ] }); }); </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
Hey but how do you change the text on the splash screen ?
ReplyDeletethe text can be changed only in the image if you liked to change the text then create a png text image in photoshop
ReplyDeleteI enter the code correctly..
ReplyDeletebut why this code doesn't work correctly in my blogger?
dowsn't work for me
ReplyDeleteUsed 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
ReplyDeleteHow do you get the dropbox without the "https://" . I only get a secure http link which blogger doesn't permit?!?
ReplyDelete