Thursday, September 30, 2010

Animating your blogger blog with spritely a jquery plugin

Spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It's a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds.
You could have a look at their website for Demo and some more sites using Spritely in their Gallery.

But have you seen a blogger with the above  integrated feature.See yourself for a Demo and you can download the template for free.
Blogger Demo1(animation in header)
Blogger Demo1(animation in footer)

How to integrate to your Blogger blog in Header?
Go to Design->Edit html
Just above </head> paste the below code.(use Ctrl+f to locate it)
<script src='http://www.spritely.net/lib/jquery/1.3.2/jquery-1.3.2.min.js' type='text/javascript'/> 
    <script src='http://www.spritely.net/scripts/jquery-ui-1.7.2.spritely.custom.min.js' type='text/javascript'/> 
    <script src='http://www.spritely.net/lib/jquery/1.3.2/plugins/jquery.spritely-0.2.1.js' type='text/javascript'/> 
<script src='http://www.spritely.net/scripts/main.js' type='text/javascript'/>
Save your template
Find ]]></b:skin> and Add the below css code above ]]></b:skin>
Another way to add it is go to your template designer->advanced options->add CSS and add the below code
#stage {
            top: 0px;
            left: 0px;
            z-index: 100;
.stage {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            min-width: 900px;
            height: 359px;
#bg {
            background: #aedfe5 url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvwPnvGrI/AAAAAAAAAFg/Qbbq-4zMPBc/s1600/sky1.png) 0 0 repeat-x;
#clouds {
            background: transparent url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvtGzYMYI/AAAAAAAAAFU/E5A0QizNsQ4/s1600/cloud.png) 305px 102px repeat-x;
#hill2 {
            background: transparent url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQvuX_kU8I/AAAAAAAAAFY/4a_VXNaGhXs/s1600/hill2.png) 0 263px repeat-x;
#hill1 {
            background: transparent url(http://4.bp.blogspot.com/_Gs8qUUWSOoc/TKQvvpNqviI/AAAAAAAAAFc/Y_h0NLgEDVI/s1600/hill-with-windmill.png) 0 160px repeat-x;
#bird {
            background: transparent url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvslDVPRI/AAAAAAAAAFQ/vQ-mvk1qN6c/s1600/bird-forward-back.png) 0 0 no-repeat;
            position: absolute;
            top: 150px;
            left: 65px;
            width: 180px;
            height: 123px;
            z-index: 2000;
            cursor: pointer;

#dragMe {
    position: absolute;
    top: 290px;
    left: 57%;
    z-index: 150;
    background: url(http://4.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5Oy1NJRI/AAAAAAAAAFs/g-j77pIBQgc/s1600/dragme_text.png) 0 0 no-repeat;
    margin-left: -50px;
    width: 100px;
    height: 65px;
#slider {
        display: none;/* show dynamically for non smart-phones or ipad */
    position: relative;
    z-index: 200;
    height: 14px;
    width: 100%;
    background: url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5PZDTE0I/AAAAAAAAAFw/ogpblya-v0Q/s1600/slider_bg.png) 0 0;
#slider .ui-corner-all {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
#slider.ui-widget-content {
    background: url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5PZDTE0I/AAAAAAAAAFw/ogpblya-v0Q/s1600/slider_bg.png) 0 0;
    border: 0;
#slider .ui-state-default, #slider.ui-widget-content .ui-state-default {
    background: url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5NtTB0YI/AAAAAAAAAFk/2xojrhrue20/s1600/slider_handle.png) 0 0 no-repeat;
    width: 23px;
    height: 30px;
    border: 0;
#slider.ui-slider-horizontal .ui-slider-handle  {
    position: absolute;
    top: -9px;
    cursor: pointer;
    outline: none;
    height: 23px;
#bird2 {
    background: transparent url(http://3.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5Od-6f6I/AAAAAAAAAFo/nOGk-5bkG3E/s1600/bird-forward-back-sm.png) 0 0 no-repeat;
    position: absolute;
    top: 70px;
    left: 155px;
    width: 140px;
    height: 96px;
    z-index: 1800;
    cursor: pointer;
Save your template
Since you are using this as your header you need to the delete the page header widget.
how to do it?

  1. Go to Design->Edit html
  2. Find <header> and delete everything inside it including  <header> and </header>
  3. then you will be prompted with a dialog whether to keep the widget or delete
  4. Hit delete widget 

Save your template

Adding Some extra piece code between the body Tag
Find this <body using ctrl+f And just below it add the following code

<div id="container" style="padding-top: 359px; ">
<div id="stage" class="stage"> 
        <div id="tap" class="stage"></div> 
        <div id="bg" class="stage"></div> 
        <div id="clouds" class="stage"></div> 
        <div id="hill2" class="stage"></div> 
        <div id="hill1" class="stage"></div>  
<div id="bird2"></div> 
    <div id="bird"></div>

Then You have put the Div end tag be careful while doing this
find the below code (use ctrl+f to find </body>)
Place the </div> exactly shown below
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);

Save your template if no error prompted then your are fine.
Thats it you should have a cool looking animated header.
Any problem Ask me through comments.


  1. Great tutorial!
    But please help me to apply the animation at the footer of the blog..

  2. Não consegui do step 3 em diante. Não encontrei o e não entendi como deve ser feito exatamente o fechamento da div que esta dando erro! Se puderem me ajudar serei muito grato. xD


fuzionpro Headline