Loading Indicator for Blogger post

 100 % working - can't afford demo

Hi, in this tutorial i wanna show how to enable post loading indicator , either for blogger post or entire blog. Most visitors get bored when they open a site which hides all the contents and shows a loading indicator image till the whole page loads. to avoid that we can use the indicators for blogger posts.

Please follow the steps given below with at-most concentration..

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

step 2: goto >> dashboard >> Design>> Edit HTML >> search for

<p><data:post.body/></p>

and replace it with this code

<!-- START: Loading Indicator: Top -->
<span expr:id='"loading-" + data:post.id' style='font-size:75%;'>
  <img width='16' height='16' src='http://i74.photobucket.com/albums/i265/jennzhen/loading/CircleBall.gif' style='vertical-align:middle'/> LOADING ...
</span>
<span expr:id='"loaded-" + data:post.id' style='display:none'>
<!-- END: Loading Indicator: Top -->


<p><data:post.body/></p>

<!-- START: Loading Indicator: Bottom -->
</span>
<!-- END: Loading Indicator: Bottom -->

Step 3: to show load indicator while the entire blog is loading please follow this step,

search for

<div id='blog-posts'> .....</div>

and paste this code in between

 <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:if cond='data:post.allowComments'>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:loop>


<!-- START: Loading Indicator: Script -->
<script type='text/javascript'>
window.onload=function(){
<b:loop values='data:posts' var='post'>
  document.getElementById("loading-<data:post.id/>").style.display='none';
  document.getElementById("loaded-<data:post.id/>").style.display='inline';
</b:loop>
}
</script>
<!-- END: Loading Indicator: Script by wierdwalker.com-->